payment
This article is a stub. You can help the IndieWeb wiki by expanding it.
๐ณ payment in the context of the indieweb refers to a feature on an indie web site that provides a way for the visitor to that website to pay (credit card, currency, gift card, etc.) the person represented by that indie web site.
- To make payments to support the IndieWeb community, please see The IndieWeb's open collective page at https://opencollective.com/indieweb.
Why
You should have a payment page (e.g. at you.example.com/pay) so:
- anyone who visits your website can easily pay you (for whatever) in the ways you prefer to be paid, similar to how communication links help people communicate with you in the ways you prefer[1].
- you can share a simple you.example.com/pay link to get paid
Why with amount
In addition, your payment page should support a specific amount from the URL so you can:
- message a friend a payment link like yoursite/pay/16/ for a specific amount, to split dinner, pay for something they got for you like donuts etc.
- provide a donation link like yoursite/pay/10 (e.g. for a donation optional yoga class)
How to
There are several tutorials on how to create links / URLs for various payment services to put on your web site:
Currency:
- PayPal
- PayPal donate link -
- Fees: free with linked bank account, $0.30 + 2.9% for credit/debit.
- PayPal.Me - create a simple-looking link to share for people to pay you from their PayPal accounts
https://paypal.me/yournamehere
- PayPal donate link -
- Square Cash (cash.me - different from SquareUp!)
- Requires linking your debit card to your account to receive or send money. Can optionally link a credit card to your account.
- Doesn't work with UK postcode
- Fees:
- Personal account: none for debit card payments. 3% for credit card payments.
- Business account: 2.75% is automatically deducted from any payment accepted with Cash for Business.
- Create a simple-looking URL to share for people to pay you:
https://cash.me/$username
- An amount can be pre-selected by adding it to the URL, e.g.
https://cash.me/$username/10
- Venmo
- Fees: free with linked bank account and some debit, 3% for credit
- Create a simple-looking link to share for people to pay you:
https://venmo.com/Username
- Create a pre-filled link with amount and note:
- Flattr for one-time or recurring (monthly) micro-donations
- Gifts can be anonymous
- Fees: 10% on all the money you receive
- Encourages both buttons and rel-payment
- Monzo.me UK only, requires a Monzo card
- Fees: No fees
- Limit: Limited to ยฃ100
- An amount can be pre-selected by adding it to the URL, e.g.
https://monzo.me/$username/10
Gift card(s):
Once you have a payment URL e.g. pay.example.com/username/usd/5, link to it with rel=payment, e.g.
<a href="https://pay.example.com/username/usd/5" rel="payment">Donate $5 to me</a>
Payment page with amount
Just like PayPal.Me and Square Cash cash.me, your Payment page can allow a subdirectory component for a dollar amount, which it would then build into the specific payment method links:
/payment/10
- to pay you $10
Alternatively this might read better as just "pay" (also less typing), e.g.
/pay/10
- ...
Provider link patterns (only these so far), for an amount of $13.37
cash.me/$username/13.37
paypal.me/username/13.37
venmo.com/Username?txn=pay&amount=13.37
For other providers, keep their icon / link - better to keep the option than make it curiously disappear.
Note: this can be handled fully serverside.
(add how to normalize URL numerical dollar values to something sensible)
(provide open source for sanitizing numerical values)
IndieWeb Examples
rel-payment examples
Specific rel=payment links:
- Aaron Parecki uses rel=payment to link to Venmo, Paypal and Square Cash on his home page.
- Pelle Wessman uses Jekyll to add Flattr rel=payment links to each blog post on voxpelli.com
- Bret Comnes has links to a bitcoin addresses hosted on coinbase a tip jar. I had a dogecoin address that was hosted on dogevault but dogecoin shut down after getting hacked.
- Tantek รelik has a rel=payment link on his tantek.com home page to his "/tip" page autofilled with $1.
payment page examples
Overall /payment page. Just like having a /contact page, your indieweb site should have a /payment page with icons linked to various ways to pay you. Even better: /payment/nn support for auto-filling $ amounts
Aaron Parecki
- Aaron Parecki provides links to his preferred payment methods on a separate payment page as of 2016-11-28:
- payment page will pre-fill the amount on the links to providers that support it when visiting a URL such as:
- 2017-12-10 payment page now supports Payment Request API using the Stripe library.
- As of 2020-04-26, I had to remove the credit card option from my payment page because it was being used to test stolen credit cards. Instead, I now have a new "payment request" post type, which requests a specific amount one time, and then no longer accepts payments once it's been paid. Example:
Tantek
- Tantek รelik provides a mobile-friendly payment page with preferred payment methods as of 2017-10-01 (built on IndieWebCamp NYC 2017 hack day!)
- http://tantek.com/pay (and corresponding tantek.com/request later that night for use at dinner!)
- 2017-12-10 added /pay/n support for auto-filling $ amounts (coded+deployed at IndieWebCamp Austin 2017 hack day!), e.g.
- http://tantek.com/pay/10
- 2017-12-18 Got it working with Venmo as well (in addition to Paypal and Square Cash) after some experimenting (so all three buttons now support explicit amount)
- http://tantek.com/pay/10
Jeremy Cherfas
- Jeremy Cherfas has a page for supporters on his podcast site, offering various payment options and ways to pay.
Grant Richmond
- Grant Richmond has a payment page that supports multiple currencies https://pay.grant.codes
- Amounts and currencies may be filled by adding them in the url:
- If the value to be paid is in GBP and under ยฃ100 then a link to pay with Monzo is provided. Other currencies and higher values are handled by Stripe with Payment Request API support.
Jacky Alcine
- Jacky Alcinรฉ has a pay page at: https://jacky.wtf/pay/
Marty McGuire
- Marty McGuire has a pay page at: https://martymcgui.re/pay/
- Links to payment silo profiles (Venmo, PayPal, Square)
- No support for URLs with payment values at this time.
- Design shamelessly taken from Tantek รelik and silo images from Aaron Parecki. ๐
Anthony Ciccarello
Anthony Ciccarello has a payment page at https://www.ciccarello.me/pay/ since 2022-02-25.
- Lists accepted services in order of his preference
- Links to Venmo and Paypal are updated to include an amount via JavaScript with a special /pay?amount=5 URL (not advertised)
past examples
Eddie Hinkle
- Eddie Hinkle created a sponsor page eddiehinkle.com/sponsor (archived from 2019-07-13) and provided links to it in all podcasts he produced with rel=payment so that Overcast and other podcasts could link to it.
Other independent examples
Podcast Examples
Quite a few podcasters include rel-payment metadata โ mostly in their podcast feeds but also on their blog pages. Podcatchers have started using the data to automate donations. This was started by Marco Arment, creator of iOS podcast app Overcast and tested on his podcast ATP and the Relay FM Network.
Notable examples:
- The 5by5 network uses it in their feeds
- Relay FM has it for every podcast with a default set that can be overridden on a per show basis.
- Big german podcaster Tim Pritlove uses it across all of his podcasts, both web pages and feeds
Scott Hanselman
Intro slide from Scott Hanselman's talk at .NET Fringe 2017:
Silo Examples
Patreon
Patreon is a crowdfunding silo that encourages users to support artists and creators typically on a recurring basis. A variety of issues and critiques of the benefits of the site (and it's silo nature) can be found in No One Makes a Living on Patreon
Drip
Drip is a crowdfunding subsidiary site of Kickstarter.
Ko.fi
Ko-fi is a service with embeddable widgets that allows patrons or supporters to reward or tip users with money, ostensibly the amount that would purchase a cup of coffee.
PayPal
Square Cash
Apple Pay
Venmo
Google Pay
While not technically a direct payment method, Facebook during the 2017 holiday season encouraged users to add a donation button to their posts to encourage giving to non-profits.
In 2018 and expanding in 2019, Facebook also began offering Facebook Fan Subscriptions to creators on Facebook. The feature lets creators offer $4.99 monthly subscriptions to their fans, which gets them access to exclusive content and an opt-in Supporter badge that appears next to the userโs comments on the Page.
Affiliate Programs
An alternate, and less direct method of payment, is to utilize an affiliate payment program in which customized URLs to services or products which provide a payment or commission to the referring site.
Some common affiliate programs that creators frequently use include:
Implementations
Apps
Overcast
Overcast, a podcast player, shows a payment button on the "now playing" screen if a link with rel=payment appears in the episode's show notes.
- https://twitter.com/marcoarment/status/1028451747734409216
- "Podcasters and CMS makers: Next version of Overcast looks for a link in every episode's show notes with
<a rel="payment">
. If present, Overcast adds a nice green "$" button on the Now Playing screen that opens up that donation/Patreon/membership URL of your choice." @marcoarment August 12, 2018
- "Podcasters and CMS makers: Next version of Overcast looks for a link in every episode's show notes with
Castro Podcasts
Castro podcast player shows a "Support this podcast" button since at least 2018-12-22 [2]
Publishing Software
Plugins exist for some open source publishing software:
- WordPress Flattr plugin โ adds rel-payment links to frontpage, blog post pages and feeds
Transistor.fm
The podcast host Transistor.fm provides a way to include a link to a payment page in every podcast episode, marked up with rel=payment.
"Two days ago, @marcoarment suggested a new standard for podcasts:
<a rel="payment"> in a podcast's show notes would reveal a nice green "$" button on the Now Playing screen in @overcastfm.
We just deployed this to @TransistorFM!"
Fireside.fm
Fireside.fm podcast hosting has an advanced option to enter a payment URL, which generates <a rel="payment">
[3].
Tools
- Rel-Payment Firefox Addon โ shows a clickable icon in the address bar when a payment link is detected for a page
- Many podcatchers, like Instacast and gPodder, rely on rel-payment data in feeds for their integration with Flattr for eg. enabling automatic donations for listened episodes
Services
Flattr
Flattr โ publishes rel-payment links on their profile pages as well as on pages for each thing one can donate to. Also heavily uses rel-payment data in their open source browser add-ons.
Liberapay
Liberapay โ an open source service to make recurring donations
Square Cash
Square Cash - allows you to collect payment, e.g. https://cash.me/$aaronpk. An amount can be pre-selected by adding it to the URL, e.g. https://cash.me/$aaronpk/10
Stripe
Stripe can be used to process credit card transactions on your website.
Hazards
Credit card fraud
Twitter hazards
- https://twitter.com/stimmyskye/status/1441177426239766531
- "okay so as some people don't seem to know this is happening:
when someone replies to one of your posts asking you for your paypal / venmo / etc, there are bots that will IMMEDIATELY clone your account and reply with a payment link. they block your account in the same second." @stimmyskye September 23, 2021
- "okay so as some people don't seem to know this is happening:
Coinbase bannings
- Why avoid Coinbase for payment: https://twitter.com/violetblue/status/1111464067716149248
- "Just want the well-meaning folks suggesting I check out Bitcoin to know that I was ejected from Coinbase for no reason at the same time they kicked other people in sex businesses off the service (including erotic comic artists). Add it to the list of non-options." @violetblue March 29, 2019
Brainstorming
Sessions
Related sessions at prior IndieWebCamps
- ?? session around the time of Patreon making major changes in 2018
- 2019/Austin/dolladollabillz
Payment page with reason
It would also be nice to be able to share a URL with the reason for the payment as well, so when the user taps a payment button, the provider has the reason pre-filled in as well.
Take a look at the PayPal.Me and Square Cash cash.me UIs, which I *think* let you edit the amount and add a reason. Those may be good enhancements to consider for such pre-filled out payment subpage URLs. Then again if the payment service provides a final opportunity to edit amount/reason, then having that on your own site may see redundant.
- /pay/5/coffee
- /pay/20/atm
- ...
Vendor support:
- PayPal.me: unknown
- Square Cash: unknown
- Venmo:
¬e=text_here
param, e.g.:https://venmo.com/?txn=pay¬e=Enter%20your%20note%20here
Note: this could be handled fully serverside.
Interested:
- Tantek รelik - one of my Falcon Itches: Payment Links
- ...
Perhaps a pay URL could also just have the reason, without an amount like:
- /pay/tip/
- /pay/donate/
- ...
Aaron Parecki has two payment pages, one at /pay/ the other at /tip/.
Escrow
There has been some discussion around using webmentions as a form of payment notification. Malcolm Blaney has suggested syndicating these webmentions to a 3rdparty website as a form of Escrow. The interaction would work as follows:
Alice creates a post on her site, representing a payment to Bob, and sends him a homepage webmention. The post includes a link to a 3rdparty site (let's call it Carol's site). Bob replies to Alice's post thanking her for the payment.
Carol runs a site that tracks payments, so she looks for specific markup in the original post and subsequent reply. When Alice creates the post, the payment is currently pending. When Bob replies, the transaction is settled.
If Carol's site was considered trustworthy by both parties, they could use a separate mechanism to transfer funds to her account. Carol could then clear the above transaction between Alice and Bob by paying Bob the outstanding amount.
In general though, transactions only need to be settled to calculate the new balance for Alice and Bob, and the low cost of tracking payments via webmention means no transaction fees are required, except when real funds are withdrawn via Carol's site.
Payment Request Post Type
One downside to having the payment request information in the URL is that anyone can construct a similar link. This has been used to test stolen credit card numbers by the attackers visiting a payment page like /pay/1
and then entering stolen credit cards.
An alternative would be to create a new post to request a specific payment with details, and have that post be usable only one time. For public posts, they would at least be usable only once, and since only the author of the website could create these, there's no way to use them to test batches of cards. These posts could also be made private or at least unlisted so they could be sent to individuals.
The W3C Payment Request API could be a good starting point for a payment request post with Microformats. (A Microformats vocabulary for this is needed in order for it to be used to create the post from a Micropub client.) This could be either a new top-level Microformats object, or some additional properties in an h-entry.
The PaymentRequest details share nothing in common with h-entry, but the act of sending a request to someone does start to look more like an h-entry since that would include things like a date, possibly post visibility settings, etc.
https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/PaymentRequest
The Payment Request API is really more about requesting payment information details and is likely too detailed for this post. However, if detailed invoice info is needed in the post, this could be a place to look for a vocabulary to use.
Other places to look for payment request post examples:
- Invoicing systems such as https://www.invoiceninja.com
- Square Cash
- Venmo
- PayPal
Create a payment request in Square Cash
Create a payment request in Venmo
Create a payment request in PayPal
Payment Request Post Details
Across these three examples:
- Who is the request being made to? Every example first asks for the person you'll be sending the request to
- How much is being requested?
- Optional note
In order to use Microformats to express this, h-entry would be a good container to include the note, and the audience property could be used to indicate who the request is being sent to. A new property would be needed to express the dollar amount.
How to handle different currencies? It appears that the currency is not choosable by the requester or the person who pays, but is based on the currency of the requester's payment account.
Articles
Articles about various forms of payment from an independence perspective:
- 2005-03-17 privacy through prepaid credit cards
- 2014-07-23 [4] Quick comparison of Square Cash and Venmo for splitting checks
- 2016-01-10 lifehacker: Money Transfer Showdown: Square Cash vs. Venmo vs. PayPal
See Also
- pledge
- indiepay.me
- http://microformats.org/wiki/rel-payment
- http://relpayment.com/
- homepage
- icon
- Apple Pay
- Payment Request API
- Liberapay
- donation
- supporting
- 2019/Austin/dolladollabillz
- https://wptavern.com/new-github-sponsors-tool-draws-concerns-from-open-source-community
- https://help.github.com/en/articles/about-github-sponsors
- Beware of these payment options too: https://twitter.com/violetblue/status/1111376572810817538
- "Because I write about sex, I can't use:
Amazon Associates
PayPal/Square
MailChimp
Wordpress dot org
Google / Facebook ads
Most web hosts
Apple/Play" @violetblue March 28, 2019
- "Because I write about sex, I can't use:
- https://twitter.com/pinboard/status/1257959130985201664
- "Doing payments first is the way to avoid the rapid growth problem entirely (and depending on your service, spam problems). I charged a tiny signup fee for Pinboard purely as an anti-spam measure, but it ended up getting me endless free publicity. 2009 was a different time." @Pinboard May 6, 2020
- Coil
- https://gumroad.com/gumroad/p/introducing-gumroad-memberships
- Beware of the "acceptable use policy" of payment silos / handlers / processors that may or may not impede use of them, e.g. PayPal briefly had a policy in 2022 that would fine user for spreading misinformation which resulted in a backlash (Washington Post article)
- https://datatracker.ietf.org/doc/html/rfc8905