{
 "id": 36984,
 "slug": "2020-03-25_concevoir-et-mettre-en-place-un-systeme-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": "fr",
 "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": "Concevoir et mettre en place un système de (micro)paiement",
 "subtitle": "Rentabiliser mon blog avec du café, Apple Pay et Mollie",
 "summary": "Les paiements en ligne sont plus importants que jamais, maintenant que le virus COVID-19 bouleverse les entreprises. Mes clients cherchent donc de nouvelles façons de gagner de l'argent en ligne. J'ai conçu et mis en place un système de (micro)paiement. Cet article parle de la simplicité qu'on atteint en résolvant des problèmes complexes.",
 "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 and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "fr",
  "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": "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": "pap",
   "title": "Desèño i implementá 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": "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 présente l'appli Keynote au Macworld 2003 et plaisante : il l'a fait faire pour lui-même, en bêta-testeur sous-payé",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/b5830cd60667.webp",
   "description": "Esquisses de concepts d'interface, pour explorer différentes façons de laisser un message et d'offrir plusieurs tasses de café",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/2d289b8f000c.webp",
   "description": "De l'esquisse de conception (à gauche) au prototype (à droite) sur iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/e35470bb82d5.webp",
   "description": "Dessin de la tasse de café avec Picta Graphic for iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/cddef4803d92.webp",
   "description": "Développement de l'interface avec Blink et Inspect Browser sur iPad",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-5.jpg"
  },
  {
   "url": "https://willem.com/global/images/a24f596e619d.webp",
   "description": "Diagramme de séquence esquissé du processus de paiement",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-6.jpg"
  },
  {
   "url": "https://willem.com/global/images/a04e328d248f.webp",
   "description": "Mollie est un prestataire de paiement qui prend en charge de nombreux moyens de paiement : cartes de crédit, PayPal, iDEAL, Sofort, Giropay, SEPA, diverses applis bancaires et Apple Pay",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-7.png"
  },
  {
   "url": "https://willem.com/global/images/d214aa5c60ef.webp",
   "description": "Appel de Mollie depuis NodeJS en JavaScript avec des promesses",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-8.png"
  },
  {
   "url": "https://willem.com/global/images/79791152064c.webp",
   "description": "Traitement des mises à jour du statut de paiement",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-9.jpg"
  },
  {
   "url": "https://willem.com/global/images/acc0ecf42914.webp",
   "description": "Relier le frontend au backend, simple comme 1-2-3",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-10.jpg"
  },
  {
   "url": "https://willem.com/global/images/487f0979a7e9.webp",
   "description": "L'heure de boire du café",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36984_images-11.jpg"
  }
 ],
 "text": "Comprendre une nouvelle technologie\nQuand je développe une nouvelle technologie ou des applis, j'essaie toujours d'imaginer comment ça marcherait le mieux. Le moyen le plus simple de le savoir, c'est de concevoir le produit pour soi-même. Exactement comme Steve Jobs a fait développer Keynote, l'appli de présentation d'Apple, pour lui-même. C'est l'une de ses blagues célèbres sur le fait d'être un_bêta_testeur_sous-payé (https://www.youtube.com/watch?v=ViWnJDomhsM)\nSi tu conçois le produit pour toi, pense à ce que tu voudrais vraiment, vraiment. Pour moi, ça veut dire le modèle d'interaction le plus simple qui soit : je veux que mon logiciel soit simple, facile.\nCas d'usage : offre-moi un café\nPour développer cette technologie de paiement, j'ai imaginé un cas d'usage : ajouter un bouton « offre-moi un café » sur mon site. Si ça marche bien, les gens pourront s'en servir pour montrer qu'ils apprécient ce blog en m'offrant un café. Je trouve que ce cas d'usage est un défi parfait pour concevoir (et construire) un système de (micro)paiement.\nEsquisser des idées\nAvant d'écrire la moindre ligne de code, je conçois souvent mes logiciels en esquissant des idées à la main. Dessiner m'aide à explorer des idées, des mises en page, des processus. C'est l'une des raisons pour lesquelles j'aime autant travailler sur une tablette : esquisser en numérique me permet d'explorer plusieurs pistes à toute vitesse, en copiant-collant chaque idée dans de nouvelles versions.\nPrototypage\nUne fois que tu as exploré des idées pour ton interface, il est temps de développer un prototype. Avec un prototype, tu peux tester l'interface sur différents appareils et voir ce qu'elle donne à l'écran et sous les doigts.\nPendant le prototypage, je regarde souvent l'esquisse pendant que je programme la première version. Sur iPad, je fais ça en écran partagé : l'esquisse à côté de mon code, avec VIM (https://www.vim.org) dans tmux (https://github.com/tmux/tmux/wiki) via Mosh (https://mosh.org) grâce à la formidable appli Blink (https://blink.sh) pour_iPadOS (https://apps.apple.com/en/app/blink-shell-mosh-ssh-client/id1156707581). J'ai dessiné la tasse de café avec Picta_Graphic_for_iPad (https://apps.apple.com/en/app/graphic-for-ipad/id363317633), une superbe appli de dessin qui exporte en images vectorielles (SVG).\nDéveloppement frontend\nL'étape suivante, c'est de développer une interface pleinement fonctionnelle, avec des boutons qui marchent. Pendant le développement, il faut souvent comprendre ce qui se passe, traquer des bugs et affiner des mécanismes. J'utilise le navigateur Inspect_Browser (https://apps.pdyn.net/inspect/) pour iPadOS : j'ai ainsi une interface tactile miniature qui fonctionne juste à côté de mon code. Je peux tester et peaufiner l'interface très vite.\nDéveloppement backend\nAutre étape cruciale : développer la technologie backend qui prépare et suit les paiements en ligne. C'est la partie côté serveur, qui gère la communication entre l'interface frontend (le site web) et le prestataire de paiement (banques, cartes de crédit, Apple Pay, etc.).\nConcevoir le serveur backend est en général un peu plus abstrait que concevoir une interface frontend (visible). Pour savoir quels appels d'API doivent se faire, et dans quel ordre, je trouve très utile de dessiner des diagrammes de séquence UML. Les diagrammes_de_séquence (https://fr.wikipedia.org/wiki/Diagramme_de_s%C3%A9quence) visualisent les interactions d'un programme dans le temps.\nTu vois trois colonnes dans le diagramme de séquence du processus de paiement : le frontend, le backend et le prestataire de paiement. Chaque colonne est un ordinateur différent qui communique avec les autres. Le frontend tourne sur l'appareil de l'utilisateur, le serveur backend tourne sur un VPS que je gère moi-même, et le prestataire de paiement est un serveur externe. L'utilisateur interagit avec le site en cliquant sur le bouton « offre-moi un café », ce qui déclenche une chaîne d'appels d'API qui circulent de droite à gauche.\nLe « serveur backend » calcule le montant que l'utilisateur doit payer. Ce calcul se fait sur le serveur, pas chez le client, pour empêcher les utilisateurs malveillants de manipuler le prix (car la technologie frontend peut être manipulée via le navigateur).\nOn prépare une session de paiement en informant le prestataire que l'utilisateur va effectuer un paiement d'un certain montant. Pour cela, on utilise une clé d'API secrète qui permet au prestataire de savoir sur quel compte bancaire les paiements doivent arriver. Le prestataire renvoie une URL de paiement, qui sert à rediriger l'utilisateur vers la vraie page de paiement.\nLe prestataire de paiement que j'utilise est Mollie (https://mollie.com), une entreprise basée_à_Amsterdam (https://jobs.mollie.com) et dotée d'une plateforme de paiement fantastique. Leurs API sont bien_documentées (https://docs.mollie.com/) et ils fournissent des paquets (https://www.mollie.com/en/developers/packages) pour intégrer facilement leur système de paiement à ton serveur backend.\nEn harmonie avec mes autres serveurs backend, j'ai choisi de développer celui-ci en NodeJS (https://nodejs.org/en/). Ça tourne sur pratiquement n'importe quoi, d'un minuscule Raspberry PI jusqu'aux grands clouds de calcul. Tu peux aussi utiliser PHP (https://github.com/mollie/mollie-api-php), Ruby (https://github.com/mollie/mollie-api-ruby), Python (https://github.com/mollie/mollie-api-python) ou n'importe lequel des autres paquets disponibles (https://www.mollie.com/en/developers/packages). La référence_de_l'API_Mollie (https://docs.mollie.com/reference/v2/payments-api/create-payment) détaille les valeurs auxquelles tu peux t'attendre.\nMises à jour asynchrones du statut de paiement\nPeu de gens se rendent compte que récupérer le statut d'un paiement est un processus asynchrone, qui peut avoir différents statuts. Dans un monde parfait, tu saurais tout de suite si un paiement réussit ou échoue. Mais comme les paiements en ligne sont distribués, avec des backends qui communiquent avec des serveurs différents (banques, cartes de crédit, etc.), on ne sait jamais exactement quand un paiement va aboutir.\nPense aux situations où l'utilisateur ferme la page de paiement, laisse son appareil sans surveillance, ou quand une banque a une panne de son système de banque en ligne. Ça arrive, et c'est à toi de concevoir le serveur backend pour qu'il traite les mises à jour du statut de paiement séparément du processus d'interaction principal.\nLe prestataire de paiement appelle un webhook sur notre serveur backend. Il envoie un message du genre « Regarde, quelque chose a changé sur le paiement XYZ ». Ce message dit seulement que quelque chose a changé, pas quel est le nouveau statut. C'est pour des raisons de sécurité : sinon, des utilisateurs malveillants pourraient imiter l'appel à notre webhook. À la place, notre serveur backend demande le vrai statut du paiement par un canal sécurisé, avec notre clé d'API secrète. Le prestataire renvoie le statut, que notre serveur backend traite ensuite. Selon le statut, on déclenche les actions adaptées : envoyer des notifications par e-mail, lancer la livraison de marchandises.\nFullstack : combiner frontend et backend\nLa dernière étape consiste à relier le frontend à la technologie backend pour que tout le processus fonctionne. C'est ce qu'on appelle le « développement fullstack », puisque tu travailles sur l'ensemble du système. Le développement fullstack est un art à part, que peu de développeurs maîtrisent vraiment : il faut travailler (déboguer et développer) sur plusieurs fronts en même temps, et souvent dans des langages de programmation différents !\nEn pratique, ça veut dire que tu surveilles différentes parties du programme pour voir si elles fonctionnent bien ensemble. Tu regardes les logs du serveur pendant que tu essaies d'effectuer un paiement avec le frontend tout neuf. C'est dur, mais c'est aussi très gratifiant, parce que ça donne un produit qui marche !\nLe bouton « offre-moi un café » qui en résulte offre à l'utilisateur un processus en 3 étapes d'une simplicité trompeuse :\n- étape 1 : clique sur un simple bouton « offre-moi un café », sans formulaire de commande compliqué ni captcha agaçant : juste un seul bouton\n- étape 2 : l'interface se déploie sur place, ce qui préserve le contexte et permet de laisser un message ou de m'offrir plusieurs tasses de café. Les autres éléments de l'interface, comme les boutons de réseaux sociaux, se masquent automatiquement pour mieux se concentrer sur le café\n- étape 3 : l'écran du prestataire de paiement permet à l'utilisateur de payer avec n'importe quel moyen de paiement disponible, comme Apple Pay. Quand le paiement réussit, il est temps de boire du café !\nConclusion\nConcevoir et mettre en place un système de paiement n'est pas si difficile quand on sait ce qu'il faut faire. Mais il faut passer par beaucoup d'étapes pour arriver à le comprendre. Mon bouton « offre-moi un café » a l'air simple, pourtant il a fallu résoudre une foule de défis de conception et de programmation.\nOn n'insistera jamais assez sur l'importance de la simplicité, et pourtant elle est souvent très difficile à atteindre, parce qu'il faut comprendre tous les aspects du problème. Pour citer Einstein : « Le génie, c'est prendre ce qui est complexe et le rendre simple. » Maintenant, essaie le bouton toi-même : il est juste ici ⬇️",
 "word_count": 1406,
 "markdown_url": "https://agents.willem.com/fr/posts/2020-03-25_concevoir-et-mettre-en-place-un-systeme-de-micro-paiement/post.md"
}