Building a buy me a coffee button with Mollie and Apple Pay
One button, a NodeJS backend and a payment provider.
- Answers
- How do you add a buy me a coffee button to your own website?
- Topics
- Amsterdam · design · iPad · lemmid-store · money · payments · programming · server · tablet · vim · work
- Full article on willem.com
- https://willem.com/en/2020-03-25_designing-and-implementing-a-micro-payment-system/
Summary
In 2020 I built my own buy me a coffee button: one button that expands in place, a NodeJS backend that prepares the payment with Mollie, and a redirect to Mollie's payment screen where Apple Pay works.
Full text
For the visitor it is a three step process. Step one: click a single button, no complex order form, no irritating captcha. Step two: the interface expands in place, preserving context, with the option to leave a message or buy multiple cups, while elements like social media buttons hide to keep focus. Step three: the payment provider screen handles the payment with any available method, such as Apple Pay. Behind it, my backend prepares a payment session with Mollie, an Amsterdam based provider with well documented APIs and ready made packages. The backend calculates the amount server side, so the price cannot be manipulated in the browser, receives a payment URL and redirects the user. Status changes arrive later through a webhook. I sketched the design on iPad first, then prototyped the frontend and NodeJS backend before wiring them together.