payment-examples

2015-07-07T16:12:51Z

Nvk: Add one more example

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

== Real World Examples ==

=== flattr ===
[https://flattr.com/ 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.
* [http://www.golem.de/news/in-eigener-sache-bitte-schalte-deinen-adblocker-aus-1305-98523.html Example] of a flattr button in-context (at the bottom of the article)
* Flattr [https://flattr.com/wherecaniflattr hooks into existing microinteractions] e.g. liking a video on youtube and turns them into monetary tips

=== fido dogecoin twitter tipbot ===
[http://fido.pw.s3-website-us-west-1.amazonaws.com/ fido] is a twitter bot which allows you to transfer dogecoins to other twitter users within tweets. [https://twitter.com/Niklbag/status/422175609511374849 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. <code>@fidotip @recipient 100</code> 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. [http://www.reddit.com/r/dogecoin/comments/1v7gqp/these_are_the_sites_that_i_wish_someone_had_told/cephqds Example of a tip post], followed by its confirmation comment.

Typical usage is described in the [http://www.reddit.com/r/dogetipbot/wiki/index documentation] and [http://www.reddit.com/r/dogetipbot/wiki/gettingstarted 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, <code>+/u/dogetipbot 100 doge</code>, which tips 100 DOGE. Optionally add <code>verify</code> 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 ===
[http://bitcointipbot.com/ 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 <code>+tip 0.01 btc</code> to tip 0.01 BTC ([https://bitcointalk.org/index.php?topic=227169.msg2392282#msg2392282 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 <code>bitcoin:</code> scheme link which opens in your client, if any
** a QR code containing the address, for use with a mobile wallet

Examples:
* [https://coinkite.com/faq/pay coinkite payment button] — has QR code, copyable address, option to send from coinkite account, optional short bio of merchant and tor access
* [http://coinwidget.com/ coinwidget.com] — fairly fully featured, has address, link, QR code and total donated
* [https://coinbase.com/docs/merchant_tools/payment_buttons coinbase payment button] — has QR code, copyable address, option to send from coinbase account, short intro to bitcoin for the unfamiliar
* [http://bitcoinate.org/ bitcoinate] button generator — exceedingly simple, opens a browser-native prompt auto-filled with the bitcoin address to copy and send funds to
* …

https://coinkite.com/static/img/ckbtn/coinkite-button-buynow-lg.png [https://coinkite.com/pay/664B2DF31F-816D8B Link]

=== Paypal donation buttons ===
Paypal have a [https://www.paypal.com/us/cgi-bin/webscr?cmd=_donate-intro-outside&bn_r=o donation button maker] that has various options it generates an HTML form to paste into your site:
<source lang=html4strict>
<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>
</source>

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 [https://payments.amazon.com/business/asp construct donation buttons] for your site. You need to provide them with detailed business information. An example is at [http://www.mercycorps.org/other-ways-donate-online mercy corps.org] (along with Paypal and Google Play donation buttons).
<source lang=html4strict>
<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>
</source>

=== Google Wallet/Checkout donation button ===
Google have a [https://checkout.google.com/seller/checkout_buttons.html button generator] too, that also creates a form. An example is at [http://www.mercycorps.org/other-ways-donate-online mercy corps.org] (along with Paypal and Amazon donation buttons).
<source lang=html4strict>
<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&w=115&h=50&style=white&variant=text&loc=en_US" type="image" />
</div>
</form>
</source>

=== gittip ===
[https://www.gittip.com/ 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 ([https://www.gittip.com/ashedryden/ example]) and set an amount to tip weekly.

=== bitcoin: URL scheme and QR codes ===
[https://html.spec.whatwg.org/multipage/webappapis.html#custom-handlers HTML Spec: §8.6.1.3 Custom scheme and content handlers: the registerProtocolHandler() and registerContentHandler() methods] whitelists the "bitcoin" URL scheme defined by [https://github.com/bitcoin/bips/blob/master/bip-0021.mediawiki BitCoin BIP 0021]. The bitcoin URL scheme has been submitted to IANA and is currently [https://www.iana.org/assignments/uri-schemes/prov/bitcoin provisional].

In practice, Bitcoin payment tends to be done using [http://bitcoinqrcode.org BitCoin QR Codes] which can be scanned by mobile apps like Blockchain, Hive, Green Address etc.

== See Also ==

* [[payment]]
* [[payment-brainstorming]]

Microformats Wiki - User contributions [en]

payment-examples