Jump to: navigation, search

Examples of real-world UIs for payment, i.e. transferring monetary value from one person to another.


Real World Examples


flattr is a service for tipping creators via the web. Creators sign up and place a flattr button on their website, which can be clicked by flattr users in order to give tips. Patrons set a monthly tipping budget which is divided equally between all tipped creators that month.

fido dogecoin twitter tipbot

fido is a twitter bot which allows you to transfer dogecoins to other twitter users within tweets. example of a tip tweet. Its usage is built around existing Twitter idioms which all users are familiar with:

[] works pretty much the same.

dogecoin reddit tipbot

/u/dogecointipbot is a reddit bot which can be used to easily transfer dogecoin between reddit users, usually for tipping posts. Example of a tip post, followed by its confirmation comment.

Typical usage is described in the documentation and getting started guide, and involves:

bitcoin tip bot is a BTC tipbot for the forums. Similarly to other tipbots, you register with it to generate a holding address to which BTC are transferred, which can then be tipped to people by quoting a post by them with, e.g. the microsyntax +tip 0.01 btc to tip 0.01 BTC (example tip). Due to technical constraints these posts are not detected automatically and need to have their URLs pasted into a form for tips to be sent.

bitcoin donation buttons

There are many bitcoin/litecoin donation button builders, which generally follow the same pattern:


coinkite-button-buynow-lg.png Link

Paypal donation buttons

Paypal have a donation button maker that has various options it generates an HTML form to paste into your site:

<form action="" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="TDRZJGPM99326">
<input type="image" src="" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="" width="1" height="1">

There isn't a link-based version of this on their site.

Amazon donation buttons

Amazon have a payments service that you can sign up for and construct donation buttons for your site. You need to provide them with detailed business information. An example is at mercy (along with Paypal and Google Play donation buttons).

<form action="" method="post" class="overflow_hidden">
  <input type="hidden" name="immediateReturn" value="1" />
  <input type="hidden" name="collectShippingAddress" value="0" />
  <input type="hidden" name="signatureVersion" value="2" />
  <input type="hidden" name="signatureMethod" value="HmacSHA256" />
  <input type="hidden" name="accessKey" value="11SEM03K88SD016FS1G2" />
  <input type="hidden" name="referenceId" value="Where Most Needed" />
  <input type="hidden" name="signature" value="sByRXA60z64lpNlL6CpCMe4Hml1fyLOALiq68GqtjDE=" />
  <input type="hidden" name="isDonationWidget" value="1" />
  <input type="hidden" name="description" value="Where Most Needed" />
  <input type="hidden" name="amazonPaymentsAccountId" value="CCLFDFRNBPFZVNN91JILM9JECAQA67U428372S" />
  <input type="hidden" name="returnUrl" value="" />
  <input type="hidden" name="processImmediate" value="1" />
  <input type="hidden" name="cobrandingStyle" value="logo" />
  <input type="hidden" name="abandonUrl" value="" />
<div class="float_left">$  <input type="text" name="amount" size="8" value="" /></div>
<div class="float_left"><input type="image" src="" border="0" /></div>

Google Wallet/Checkout donation button

Google have a button generator too, that also creates a form. An example is at mercy (along with Paypal and Amazon donation buttons).

<form action="" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" onsubmit="return validateAmount(this.item_price_1)" class="overflow_hidden">
  <input name="item_name_1" type="hidden" value="Where Most Needed" />
  <input name="item_description_1" type="hidden" value="Your donation allows us to provide help to thousands in need." />
  <input name="item_quantity_1" type="hidden" value="1" />
  <input name="item_currency_1" type="hidden" value="USD" />
  <input name="item_is_modifiable_1" type="hidden" value="true" />
  <input name="item_min_price_1" type="hidden" value="0.0" />
  <input name="item_max_price_1" type="hidden" value="25000.0" />
  <input name="_charset_" type="hidden" value="utf-8" />
  <div class="float_left">$ <input id="item_price_1" name="item_price_1" onfocus="'black'; this.value='';" size="6" type="text" value="" /></div>
  <div class="float_left">
    <input alt="Donate" src=";w=115&amp;h=50&amp;style=white&amp;variant=text&amp;loc=en_US" type="image" />


Gittip is a service for sending weekly recurring tips to users of github, twitter, openstreetmap or bitbucket. To tip people you sign up for an account, visit their profile page (example) and set an amount to tip weekly.

bitcoin: URL scheme and QR codes

HTML Spec: § Custom scheme and content handlers: the registerProtocolHandler() and registerContentHandler() methods whitelists the "bitcoin" URL scheme defined by BitCoin BIP 0021. The bitcoin URL scheme has been submitted to IANA and is currently provisional.

In practice, Bitcoin payment tends to be done using BitCoin QR Codes which can be scanned by mobile apps like Blockchain, Hive, Green Address etc.

See Also

payment-examples was last modified: Tuesday, July 7th, 2015