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

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.