Back to 0fee
0fee

Le widget de checkout : un IIFE de 21 Ko qui gère tout

Comment nous avons construit le widget de checkout de 21 Ko de 0fee.dev en tant que build IIFE Vite. Par Juste A. Gnimavo et Claude.

Juste A. Gnimavo (Thales) & Claude | March 27, 2026 2 min 0fee
EN/ FR/ ES
checkout-widgetiifejavascriptembedded-paymentsvite-library

Chaque plateforme de paiement a besoin d'une expérience de checkout intégrable. Stripe a Stripe.js à 28 Ko. PayPal a son SDK. 0fee.dev a un IIFE (Immediately Invoked Function Expression) de 21 Ko qu'un développeur dépose sur sa page avec une seule balise script. Il gère la sélection de pays, le filtrage des méthodes de paiement, la saisie du numéro de téléphone avec indicatifs, la validation OTP, les états de traitement et les callbacks de succès/erreur -- le tout sans que le développeur ait à construire une quelconque interface de paiement.

Intégration

html<script src="https://cdn.0fee.dev/checkout.js"></script>
<script>
    const checkout = new ZeroFeeCheckout({
        publicKey: "pk_live_your_key_here",
        amount: 5000,
        currency: "XOF",
        onSuccess: function(result) {
            window.location.href = "/thank-you";
        },
        onError: function(error) {
            console.error("Paiement échoué:", error.message);
        },
    });
</script>

Flux en quatre étapes

  1. Sélection du pays -- Le client sélectionne son pays.
  2. Sélection de la méthode de paiement -- Les opérateurs disponibles s'affichent.
  3. Détails de paiement -- Saisie du numéro de téléphone ou redirection carte.
  4. Traitement et confirmation -- Polling de statut et affichage du résultat.

Configuration de build

Le widget est construit en IIFE (pour inclusion par balise <script>) et en module ES (pour les bundlers) via le mode bibliothèque de Vite.


Cet article fait partie de la série « Comment nous avons construit 0fee.dev ». 0fee.dev est un orchestrateur de paiement couvrant 53+ fournisseurs dans 200+ pays, construit par Juste A. GNIMAVO et Claude depuis Abidjan sans aucun ingénieur humain. Suivez la série pour l'histoire complète de la construction.

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude deblo

Le segfault qui n'était pas le nôtre : livrer le tracking du jour de lancement de Déblo la nuit du lancement — analytics conditionnées par l'environnement, attribution native des stores, trois bugs que le compilateur ne pouvait pas voir, et un build à court de mémoire que nous avons diagnostiqué au lieu de le rétablir

Le 1er juillet 2026 — jour de lancement — le risque n'a jamais été le texte. C'était les campagnes payantes qui partaient à l'aveugle. Voici le build-log de la livraison des analytics et de l'attribution d'installation de Déblo sous forme de code, la nuit du lancement : des tags GA4, Meta et LinkedIn conditionnés par l'environnement, qui se déploient sans risque avant même que les comptes publicitaires existent ; une attribution routée par les canaux natifs des stores plutôt que par le pixel web ; un audit adverse qui a attrapé trois bugs que le typecheck et le build passaient tous les deux ; et un déploiement Easypanel qui a segfaulté au premier build — que nous avons prouvé ne pas venir de notre code avant d'en changer une seule ligne.

18 min Jul 1, 2026
deblolaunch-dayclaude-opus-4.8claude-code +26
Thales & Claude thales

Treize agents, quarante-trois minutes : la première session Workflow de Claude Fable 5, et ce qu'un script d'orchestration déterministe change aux builds multi-agents

Un prompt, treize agents, quarante-trois minutes : la première session de production avec Claude Fable 5 et l'outil Workflow de Claude Code a livré un site web de production complet de sept pages plus un endpoint backend de capture de leads, en un seul commit. Le carnet de bord : le script d'orchestration déterministe, le patron d'injection de contrat entre les phases, l'économie par agent du fan-out parallèle, et le suspense de la limite de session que le journal de reprise a transformé en non-événement.

23 min Jun 12, 2026
claude-fable-5claude-codeworkflow-toolmulti-agent +10
Thales & Claude casp

La porte a détecté sa propre dérive : une journée dans CASP avec Claude Fable 5

Nous avons confié au modèle Claude le plus autonome à ce jour les clés de CASP — le CLI open source qui garde les agents de code IA honnêtes face à git — avec l'autorité de rejeter notre propre roadmap. Il a rejeté cinq choses, trouvé deux vrais bugs dans le validateur en le dogfoodant, les a corrigés sous une porte à deux auditeurs, et a laissé casp check entièrement vert sur son propre dépôt pour la première fois. CASP 0.3.0 en est le résultat.

16 min Jun 10, 2026
caspzerosuiteworkflowai-cto +9