payment-examples

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

Real World Examples

flattr

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.

• Example of a flattr button in-context (at the bottom of the article)
• Flattr hooks into existing microinteractions e.g. liking a video on youtube and turns them into monetary tips

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:

• Follow @fidotip to get a holding address for DOGE
• Tweet using microsyntax, e.g. @fidotip @recipient 100 anywhere in your tweet to tip @recipient 100 DOGE. Add #confirm and @fidotip will tweet a transaction confirmation
• DM fido with an email address and dogecoin address in order to withdraw any DOGE you’ve been tipped

[tipdoge.info/ tipdoge.info] 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:

• register with the bot, giving you a holding address
• transfer some doge into the holding address, which can now be used for tipping
• comment on a post with, for example, +/u/dogetipbot 100 doge, which tips 100 DOGE. Optionally add verify to the end and dogetipbot will comment on your tip when it’s verified
• withdraw any tips you’ve received by sending the bot a message with an address to transfer to

bitcoin tip bot

bitcointipbot.com is a BTC tipbot for the bitcointalk.org 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:

• set an address that the button sends funds to
• you get HTML+JS code which adds a small button to your page, perhaps with total donated amount
• when clicked, the button shows any mixture of
  • the address to send funds to, often in an input field for copyability
  • a bitcoin: scheme link which opens in your client, if any
  • a QR code containing the address, for use with a mobile wallet

Examples:

• coinwidget.com — fairly fully featured, has address, link, QR code and total donated
• coinbase payment button — has QR code, copyable address, option to send from coinbase account, short intro to bitcoin for the unfamiliar
• bitcoinate button generator — exceedingly simple, opens a browser-native prompt auto-filled with the bitcoin address to copy and send funds to
• …

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="https://www.paypal.com/cgi-bin/webscr" 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="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

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 corps.org (along with Paypal and Google Play donation buttons).

<form action="https://authorize.payments.amazon.com/pba/paypipeline" 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="http://www.mercycorps.org" />
  <input type="hidden" name="processImmediate" value="1" />
  <input type="hidden" name="cobrandingStyle" value="logo" />
  <input type="hidden" name="abandonUrl" value="http://www.mercycorps.org" />
<div class="float_left">$  <input type="text" name="amount" size="8" value="" /></div>
<div class="float_left"><input type="image" src="http://g-ecx.images-amazon.com/images/G/01/asp/beige_small_donate_withlogo_whitebg.gif" border="0" /></div>
</form>

Google Wallet/Checkout donation button

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

<form action="https://checkout.google.com/cws/v2/Donations/871841983839058/checkoutForm" 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="this.style.color='black'; this.value='';" size="6" type="text" value="" /></div>
  <div class="float_left">
    <input alt="Donate" src="https://checkout.google.com/buttons/donateNow.gif?merchant_id=871841983839058&amp;w=115&amp;h=50&amp;style=white&amp;variant=text&amp;loc=en_US" type="image" />
  </div>
</form>

gittip

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: §8.6.1.3 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
• payment-brainstorming