---
title: "Een buy me a coffee knop bouwen met Mollie en Apple Pay"
language: nl
topics: ["Amsterdam", "design", "iPad", "lemmid-store", "money", "payments", "programming", "server", "tablet", "vim", "work"]
full_article_url: https://willem.com/nl/2020-03-25_het-ontwerpen-en-implementeren-van-een-micro-betaalsysteem/
---
# Een buy me a coffee knop bouwen met Mollie en Apple Pay

*Een knop, een NodeJS backend en een payment provider.*

> In 2020 bouwde ik mijn eigen buy me a coffee knop: een enkele knop die ter plekke uitklapt, een NodeJS backend die de betaling voorbereidt bij Mollie, en een redirect naar Mollie's betaalscherm waar Apple Pay werkt.

Voor de bezoeker is het een proces van drie stappen. Stap een: klik op een enkele knop, geen ingewikkeld bestelformulier, geen irritante captcha. Stap twee: de interface klapt ter plekke uit, met behoud van context, met de optie een bericht achter te laten of meerdere koppen te kopen, terwijl elementen zoals social media knoppen verdwijnen voor focus. Stap drie: het scherm van de payment provider handelt de betaling af met elke beschikbare methode, zoals Apple Pay.
Erachter bereidt mijn backend een betaalsessie voor bij Mollie, een Amsterdamse provider met goed gedocumenteerde APIs en kant en klare packages. De backend berekent het bedrag server side, zodat de prijs niet in de browser te manipuleren is, ontvangt een betaal-URL en stuurt de gebruiker door. Statuswijzigingen komen later binnen via een webhook.
Ik schetste het ontwerp eerst op iPad, en prototypede daarna de frontend en NodeJS backend voordat ik ze koppelde.