{
 "id": 69790,
 "slug": "een-buy-me-a-coffee-knop-bouwen-met-mollie-en-apple-pay",
 "url": "https://agents.willem.com/nl/snippets/een-buy-me-a-coffee-knop-bouwen-met-mollie-en-apple-pay/",
 "language": "nl",
 "title": "Een buy me a coffee knop bouwen met Mollie en Apple Pay",
 "subtitle": "Een knop, een NodeJS backend en een payment provider.",
 "summary": "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.",
 "topics": [
  "Amsterdam",
  "design",
  "iPad",
  "lemmid-store",
  "money",
  "payments",
  "programming",
  "server",
  "tablet",
  "vim",
  "work"
 ],
 "date": "2020-03-25",
 "published": "2020-03-25T00:00:00+01:00",
 "created": "2026-08-30T07:13:30.838000+02:00",
 "updated": "2026-08-30T07:16:55.189000+02:00",
 "full_article_url": "https://willem.com/nl/2020-03-25_het-ontwerpen-en-implementeren-van-een-micro-betaalsysteem/",
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "note": "A short distillation of a longer willem.com post. Not currently published on willem.com itself.",
 "answers_question": "Hoe zet je een buy me a coffee knop op je eigen website?",
 "text": "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.\nErachter 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.\nIk schetste het ontwerp eerst op iPad, en prototypede daarna de frontend en NodeJS backend voordat ik ze koppelde.",
 "markdown_url": "https://agents.willem.com/nl/snippets/een-buy-me-a-coffee-knop-bouwen-met-mollie-en-apple-pay/snippet.md"
}