{
 "id": 36984,
 "slug": "2020-03-25_deseno-i-implementa-un-sistema-di-pago-mikro",
 "url": "https://agents.willem.com/pap/posts/2020-03-25_deseno-i-implementa-un-sistema-di-pago-mikro/",
 "source_url": "https://willem.com/pap/2020-03-25_deseno-i-implementa-un-sistema-di-pago-mikro/",
 "language": "pap",
 "date": "2020-03-25",
 "published": "2020-03-25T00:00:00+01:00",
 "created": "2025-06-26T22:10:02.624000+02:00",
 "updated": "2026-10-20T09:24:05.592000+02:00",
 "title": "Desèño i implementá un sistema di pago (mikro)",
 "subtitle": "Gana sèn ku mi blog ku kafé, Apple Pay i Mollie",
 "summary": "Pago online ta mas importante ku nunka awor ku e virus COVID-19 ta perturbá negoshinan. Esaki ta hasi ku mi klientenan ta buska manera nobo pa gana sèn online. Mi a desèñá i implementá un sistema di pago (mikro). E artíkulo aki ta trata di logra simplisidat dor di resolvé retonan konplikó.",
 "topics": [
  "Amsterdam",
  "design",
  "iPad",
  "lemmid-store",
  "money",
  "payments",
  "programming",
  "server",
  "tablet",
  "vim",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary; Curaçao/Bonaire (FPI) spelling, no dictionary available",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "pap",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Designing and implementing a (micro) payment system",
   "url": "https://agents.willem.com/en/posts/2020-03-25_designing-and-implementing-a-micro-payment-system/",
   "source_url": "https://willem.com/en/2020-03-25_designing-and-implementing-a-micro-payment-system/"
  },
  {
   "language": "nl",
   "title": "Het ontwerpen en implementeren van een (micro)betaalsysteem",
   "url": "https://agents.willem.com/nl/posts/2020-03-25_het-ontwerpen-en-implementeren-van-een-micro-betaalsysteem/",
   "source_url": "https://willem.com/nl/2020-03-25_het-ontwerpen-en-implementeren-van-een-micro-betaalsysteem/"
  },
  {
   "language": "de",
   "title": "Design und Implementierung eines (Mikro-)Zahlungssystems",
   "url": "https://agents.willem.com/de/posts/2020-03-25_design-und-implementierung-eines-mikro-zahlungssystems/",
   "source_url": "https://willem.com/de/2020-03-25_design-und-implementierung-eines-mikro-zahlungssystems/"
  },
  {
   "language": "es",
   "title": "Diseño e implementación de un sistema de (micro)pagos",
   "url": "https://agents.willem.com/es/posts/2020-03-25_diseno-e-implementacion-de-un-sistema-de-micro-pagos/",
   "source_url": "https://willem.com/es/2020-03-25_diseno-e-implementacion-de-un-sistema-de-micro-pagos/"
  },
  {
   "language": "fr",
   "title": "Concevoir et mettre en place un système de (micro)paiement",
   "url": "https://agents.willem.com/fr/posts/2020-03-25_concevoir-et-mettre-en-place-un-systeme-de-micro-paiement/",
   "source_url": "https://willem.com/fr/2020-03-25_concevoir-et-mettre-en-place-un-systeme-de-micro-paiement/"
  },
  {
   "language": "it",
   "title": "Progettare e realizzare un sistema di (micro)pagamenti",
   "url": "https://agents.willem.com/it/posts/2020-03-25_progettare-e-realizzare-un-sistema-di-micro-pagamenti/",
   "source_url": "https://willem.com/it/2020-03-25_progettare-e-realizzare-un-sistema-di-micro-pagamenti/"
  },
  {
   "language": "pt",
   "title": "Conceber e implementar um sistema de (micro)pagamentos",
   "url": "https://agents.willem.com/pt/posts/2020-03-25_conceber-e-implementar-um-sistema-de-micro-pagamentos/",
   "source_url": "https://willem.com/pt/2020-03-25_conceber-e-implementar-um-sistema-de-micro-pagamentos/"
  },
  {
   "language": "fy",
   "title": "In (mikro)betelsysteem ûntwerpe en ymplemintearje",
   "url": "https://agents.willem.com/fy/posts/2020-03-25_in-mikro-betelsysteem-untwerpe-en-ymplemintearje/",
   "source_url": "https://willem.com/fy/2020-03-25_in-mikro-betelsysteem-untwerpe-en-ymplemintearje/"
  }
 ],
 "image": "https://willem.com/global/images/5631448e9aa5.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/0027da9ce9fa.webp",
   "description": "Steve Jobs ta anunsiá e app Keynote na MacWorld 2003, ku ta hasi bromo ku e a wòrdu konstruí pa dje mes, pasobra e ta un beta tester mal pagá",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/b5830cd60667.webp",
   "description": "Skèch di konsepto di interfas, ku ta eksplorá diferente opshon pa laga un mensahe i kompra varios kòp di kafé",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/2d289b8f000c.webp",
   "description": "Tradusi e skèch di desèño (robes) pa un protòtipo (drechi) riba iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/e35470bb82d5.webp",
   "description": "Desèñá e kòp di kafé ku Picta Graphic for iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/cddef4803d92.webp",
   "description": "Desaroyá e interfas di usuario ku Blink i Inspect Browser riba iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-5.jpg"
  },
  {
   "url": "https://willem.com/global/images/a24f596e619d.webp",
   "description": "Diagrama di sekuensia skèchá di e proseso di pago",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-6.jpg"
  },
  {
   "url": "https://willem.com/global/images/a04e328d248f.webp",
   "description": "Mollie ta un proveedor di pago ku ta sostené hopi método di pago diferente, inkluí tarheta di kredito, PayPal, iDEAL, Sofort, Giropay, SEPA, varios app di banko i Apple Pay",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-7.png"
  },
  {
   "url": "https://willem.com/global/images/d214aa5c60ef.webp",
   "description": "Yama Mollie for di NodeJS ku JavaScript basá riba promise",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-8.png"
  },
  {
   "url": "https://willem.com/global/images/79791152064c.webp",
   "description": "Manehá aktualisashon di estado di pago",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-9.jpg"
  },
  {
   "url": "https://willem.com/global/images/acc0ecf42914.webp",
   "description": "Konektá frontend ku teknologia di backend, simpel manera 1-2-3",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-10.jpg"
  },
  {
   "url": "https://willem.com/global/images/487f0979a7e9.webp",
   "description": "Ta ora di bebe kafé",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-11.jpg"
  }
 ],
 "text": "Komprondé teknologia nobo\nOra mi ta desaroyá teknologia i app nobo, mi ta purba imaginá semper kon e lo funshoná mihor. E manera mas fásil pa deskubrí esei ta desèñá e produkto pa bo mes. Meskos ku Steve Jobs a laga Apple desaroyá nan app di presentashon, Keynote, pa dje mes. Ta un di su bromanan famoso tokante dje_ta_un_beta_tester_mal_pagá (https://www.youtube.com/watch?v=ViWnJDomhsM)\nSi bo desèñá e produkto pa bo mes, pensa kiko bo lo ke di berdat, di berdat. Pa mi esei ta nifiká e model di interakshon di usuario mas simpel posibel: mi ke ku mi software ta simpel i fásil.\nKaso di uso: kompra kafé pa mi\nPa desaroyá e teknologia di pago, mi a pensa di e kaso di uso di agregá un boton \"kompra kafé pa mi\" na mi website. Si e funshoná bon, hende por usa esaki pa mustra apresio pa e blog aki dor di kompra un kafé pa mi. Mi ta pensa ku e kaso di uso aki ta un reto perfekto pa desèñá (i konstruí) un sistema di pago (mikro).\nSkèch di idea\nAntes di programá un sola liña di kódigo, mi ta desèñá software mayoria di biaha dor di skèch idea ku man. Mi ta haña e proseso kreativo di dibuhá útil pa eksplorá idea, formato di pagina i proseso. Esei ta un di e rasonnan ku mi gusta traha riba tablèt tantu: skèch di idea digital ta laga mi eksplorá varios idea lihé dor di kopia/plak nan den varios iterashon.\nProtòtipo\nOra bo a eksplorá idea pa bo interfas di usuario, ta ora pa desaroyá un protòtipo. Ora bo konstruí un protòtipo, bo por prueba e interfas di usuario riba diferente aparato i wak kon e ta mira i kon e ta sinti.\nMiéntras mi ta traha riba protòtipo, mi ta wak e skèch di desèño mayoria di biaha miéntras mi ta programá e promé vershon. Riba iPad bo por hasi esei ku split screen, kaminda mi ta pone e skèch di desèño mes banda di mi kódigo, ku VIM (https://www.vim.org) den tmux (https://github.com/tmux/tmux/wiki) via Mosh (https://mosh.org) ku e app brilante Blink (https://blink.sh) pa_iPadOS (https://apps.apple.com/en/app/blink-shell-mosh-ssh-client/id1156707581). Mi a krea e kòp di kafé ku Picta_Graphic_for_iPad (https://apps.apple.com/en/app/graphic-for-ipad/id363317633), un app di dibuhu bunita ku ta eksportá pa imagen di vektor (SVG).\nDesaroyo di frontend\nPróksimo paso ta desaroyá un interfas di usuario kompletu ku ta funshoná, ku e botonnan ta traha. Ora bo ta desaroyá bo mester sa hopi bia kiko ta pasa, buska bug i afiná mekanismo. Mi ta usa e Inspect_Browser (https://apps.pdyn.net/inspect/) pa iPadOS pa tin un interfas miniatura di touchscreen ku ta funshoná mes banda di mi kódigo. E ta laga mi proba i perfekshoná e interfas di usuario ku ta traha lihé.\nDesaroyo di backend\nUn otro paso krusial ta desaroyá e teknologia di backend pa prepará i sigi pago online. Esaki ta teknologia di banda di server ku ta kuida e komunikashon entre e interfas di usuario di frontend (e website) i e proveedor di pago (banko, tarheta di kredito, Apple Pay, etc).\nDesèñá e server di backend ta mayoria di biaha un tiki mas abstrakto kompará ku desèñá un interfas di usuario di frontend (visibel). Mi ta haña skèch di diagrama di sekuensia UML mashá útil ora mi ta purba figurá kua API call mester pasa den kua orden. Sequence_diagrams (https://en.wikipedia.org/wiki/Sequence_diagram) ta mustra interakshon di programa den sekuensia di tempu.\nBo ta mira tres kolòm den e diagrama di sekuensia di e proseso di pago: frontend, backend i proveedor di pago. Kada kolòm ta representá un kompiuter diferente ku ta komunik ku e otronan. E frontend ta kore riba e aparato di e usuario, e server di backend ta kore riba un VPS ku mi ta manehá i e proveedor di pago ta un server ekstèrno. E usuario ta interaktua ku e website dor di klik riba e boton \"kompra (kafé pa mi)\", i esei ta aktivá un kadena di API call ku ta flui for di drechi pa robes.\nE \"server di backend\" ta responsabel pa kalkulá e suma ku e usuario mester paga. E ta kalkulá riba server, no den e kliente, pa evitá ku usuarionan malisioso manipulá e kalkulo di preis (pasobra teknologia di frontend por wòrdu manipulá via e browser).\nBo prepará un sesion di pago dor di informá e proveedor di pago ku e usuario lo paga un suma spesífiko. E proseso aki ta usa un yabi API sekreto ku ta laga e proveedor di pago sa na ki kuenta di banko pago mester bai. E proveedor di pago ta duna bek un URL di pago, ku nos ta usa pa manda e usuario pa e pagina di pago real.\nE proveedor di pago ku mi ta usa ta Mollie (https://mollie.com), un kompania ku ta basá_na_Amsterdam (https://jobs.mollie.com) ku un plataforma di pago fantástiko. Nan API ta bon_dokumentá (https://docs.mollie.com/) i nan ta duna paketenan (https://www.mollie.com/en/developers/packages) pa implementá nan sistema di pago den bo server di backend sin difikultat.\nNa armonia ku mi otro server di backend, mi a skohe pa implementá e server di backend den NodeJS (https://nodejs.org/en/). E ta kore riba kasi tur kos (for di un Raspberry PI chikí te ku sistema di cloud grandi). Òf bo por usa PHP (https://github.com/mollie/mollie-api-php), Ruby (https://github.com/mollie/mollie-api-ruby), Python (https://github.com/mollie/mollie-api-python) òf kualkier di e otro paketenan disponibel (https://www.mollie.com/en/developers/packages). E Mollie_API_reference (https://docs.mollie.com/reference/v2/payments-api/create-payment) ta duna informashon detaya tokante e balornan ku bo por spera.\nAktualisashon asinkróniko di estado di pago\nPoko hende ta realisá ku buska e estado di pago ta un proseso asinkróniko ku por tin diferente estado. Den un mundu perfekto bo ta sa direkt si un pago a bai bon òf a faya. Pero pa motibu di e naturalesa distribuí di pago online, kaminda backend ta komunik ku diferente server (banko, tarheta di kredito, etc.), bo nunka no sa presis ki ora un pago lo kompletá.\nPensa riba situashon manera un usuario ku ta sera e pagina di pago, ku ta laga su aparato sin vigilashon, òf ora un banko tin un interupshon ku nan sistema di banko online. E ta pasa, i ta bo tarea pa desèñá e server di backend pa e manehá aktualisashon di estado di pago separá di e proseso prinsipal di interakshon ku usuario.\nE proveedor di pago ta yama un webhook riba nos server di backend. E ta entregá un mensahe manera \"Wak, algu a kambia na pago XYZ\". E mensahe aki ta bisa so ku algu a kambia, e no ta bisa nos kiko e estado nobo ta. Esaki ta pa motibu di siguridat: si no, usuarionan malisioso por imitá e yamada di nos webhook. Na lugá di esei, nos server di backend ta pidi e estado real di pago via un kanal sigur ku nos yabi API sekreto. E proveedor di pago ta duna e estado di pago bek, i despues nos server di backend ta manehá esaki. Segun e estado di pago, ta tuma akshon apropiá, manera manda notifikashon pa email òf kuminsá entregá e produkto.\nFullstack: kombiná frontend ku backend\nE ultimo paso ta konektá e frontend ku e teknologia di backend, pa e proseso entero funshoná. Esaki ta loke hende ta yama \"desaroyo fullstack\" pasobra bo ta traha riba e sistema entero. Desaroyo fullstack ta un arte diferente ku poko desaroyador di berdat ta domina, e ta rekerí ku bo traha (debug i desaroyá) riba varios parti na mes tempu; muchu bia den diferente lenga di programashon na mes tempu!\nNa praktika esaki ta nifiká ku bo lo ta monitoreá diferente parti di e programashon, wak si nan ta traha bon huntu. Wak e log di server miéntras bo ta purba hasi un pago ku e teknologia di frontend ku bo a krea nobo. E ta difísil, pero tambe e ta duna hopi satisfakshon pasobra e ta resultá den un produkto ku ta funshoná!\nE boton \"kompra un kafé pa mi\" ku a resultá ta un proseso di 3 paso ku ta parse mashá simpel pa e usuario:\n- paso 1: klik riba un boton simpel \"kompra un kafé pa mi\", sin formulario di pedido konplikó, sin kódigo captcha iritante: djis un boton so\n- paso 2: e interfas ta ekspandé na su lugá mes, ku ta konservá e kontekst i ta ofresé e opshon pa laga un mensahe òf kompra varios kòp di kafé pa mi. Tambe otro elemento di interfas manera e botonnan di medionan sosial ta wòrdu skondé outomátikamente pa duna mas fokus na e interfas di kafé\n- paso 3: e pantaya di e proveedor di pago ta laga e usuario hasi e pago ku kualkier método di pago disponibel, manera Apple Pay. Ora e pago ta bai bon, ta ora di bebe kafé!\nKonklushon\nDesèñá i implementá un sistema di pago no ta tan difísil ora bo sa kiko bo mester hasi. Pero ta tuma hopi paso pa yega na e komprenshon ei. Miéntras mi boton \"kompra un kafé pa mi\" ta parse simpel, e a rekerí pa resolvé hopi reto diferente di desèño i programashon.\nTa difísil pa eksagerá e importansia di simplisidat, ma tòg ta hopi bia mashá difísil pa logra pasobra e ta rekerí ku bo komprondé tur aspekto di e reto. Pa sitá Einstein: \"E definishon di henio ta tuma loke ta konplikó i hasié simpel.\" Awor, por fabor purba e boton bo mes: e ta aki mes ⬇️",
 "word_count": 1552,
 "markdown_url": "https://agents.willem.com/pap/posts/2020-03-25_deseno-i-implementa-un-sistema-di-pago-mikro/post.md"
}