Payfonte Inline

Le checkout inline permet à vos clients de payer sans quitter votre page. Vous chargez le SDK Payfonte, initialisez le checkout avec les données de transaction, puis ouvrez l’iframe de paiement. URL CDN du SDK : https://cdn.payfonte.com/payfonte.min.js

Pourquoi utiliser l’inline ?

UX fluide

Les clients restent sur votre site pendant tout le paiement.

Intégration rapide

Ajoutez un script et déclenchez le checkout depuis votre bouton de paiement.

Hooks d'événements

Utilisez des callbacks de fermeture et de finalisation dans votre flux applicatif.

Avant de commencer

Récupérer vos identifiants sandbox

Récupérez votre client-id depuis Settings -> Security -> API Keys and Webhooks sur sandbox-app.payfonte.com.

Définir votre environnement

Utilisez sandbox pour les tests et production seulement après validation de la mise en production.

Générer des références uniques

Créez une reference unique pour chaque tentative de paiement afin d’éviter les doublons.

N’exposez jamais client-secret dans du code frontend. Le checkout inline ne doit utiliser que client-id.

Exemple d’intégration rapide

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Payfonte Inline</title>
</head>
<body>
  <button id="pay-btn">Pay NGN 1,000.00</button>

<script src="https://cdn.payfonte.com/payfonte.min.js"></script>

  <script>
    document.getElementById("pay-btn").addEventListener("click", () => {
      const handler = new Payfonte({
        environment: "sandbox",
        reference: "ORDER-1001",
        clientId: "YOUR_CLIENT_ID",
        amount: 100000,
        currency: "NGN",
        country: "NG",
        customer: {
          name: "John Doe",
          email: "john@example.com",
          phoneNumber: "2348012345678"
        },
        metadata: {
          orderId: "ORDER-1001"
        },
        callback: (data) => {
          console.log("Payment callback:", data);
          // Vérifiez le statut de transaction côté backend avant exécution.
        },
        onClose: () => {
          console.log("Customer closed checkout");
        }
      });

      handler.setup();
      handler.openIframe();
    });
  </script>

</body>
</html>

Référence des paramètres

Champ	Type	Requis	Description
`environment`	string	Oui	`sandbox` ou `production`
`reference`	string	Recommandé	Référence de transaction unique
`clientId`	string	Oui	Votre `client-id` Payfonte
`amount`	integer	Oui	Montant en sous-unités, sans décimales
`currency`	string	Oui	Code devise ISO, par exemple `NGN`
`country`	string	Oui	Code pays ISO, par exemple `NG`
`customer`	object	Oui	Informations client, nom, e-mail, téléphone
`metadata`	object	Non	Champs personnalisés renvoyés dans les callbacks et webhooks
`callback`	function	Oui	Exécuté après le retour d’un événement de paiement
`onClose`	function	Non	Exécuté lorsque la modale de checkout se ferme

Règle de montant importante

Payfonte ne prend pas en charge les montants API décimaux. Envoyez uniquement des valeurs entières en sous-unités.

1000.00 NGN -> 100000
250.50 NGN -> 25050

Voir Spécification des montants pour les règles complètes de conversion.

Flux de production recommandé

Créer la référence côté backend

Générez la référence de transaction depuis votre backend afin de garantir son unicité et son lien avec votre commande interne.

Utiliser le callback uniquement pour l'UI

Considérez le callback frontend comme un signal UX. La finalisation métier doit dépendre d’une vérification backend ou d’un webhook.

Implémenter la confirmation par webhook

Traitez toujours les Webhooks pour confirmer l’état final de la transaction, success ou failed.

Gérer les retries de façon idempotente

Si un callback ou un webhook est rejoué, assurez-vous que le traitement de commande ne s’exécute qu’une fois par référence.

Dépannage

Symptôme	Cause probable	Correctif
Le checkout ne s’ouvre pas	Script SDK non chargé	Vérifiez l’URL du script et la console du navigateur
Problèmes d’authentification	`clientId` invalide ou mauvais environnement	Utilisez les identifiants correspondant à sandbox ou production
Échec de validation du montant	Montant décimal utilisé	Convertissez en sous-unités entières
Erreur de transaction en double	`reference` réutilisée	Générez une nouvelle référence unique

Documentation associée

SDK JavaScript

Exemple complet et référence de configuration du SDK.

Checkout standard

Intégration alternative basée sur une redirection.

Webhooks

Validez le statut final des paiements côté backend.

Premiers pas

Concepts clés

Prestataires et couverture

Développement

Encaisser des paiements

Décaissements

Collecte - Inline

Payfonte Inline

Pourquoi utiliser l’inline ?

UX fluide

Intégration rapide

Hooks d'événements

Avant de commencer

Exemple d’intégration rapide

Référence des paramètres

Règle de montant importante

Flux de production recommandé

Dépannage

Documentation associée

SDK JavaScript

Checkout standard

Webhooks

​Payfonte Inline

​Pourquoi utiliser l’inline ?

UX fluide

Intégration rapide

Hooks d'événements

​Avant de commencer

​Exemple d’intégration rapide

​Référence des paramètres

​Règle de montant importante

​Flux de production recommandé

​Dépannage

​Documentation associée

SDK JavaScript

Checkout standard

Webhooks

Payfonte Inline

Pourquoi utiliser l’inline ?

Avant de commencer

Exemple d’intégration rapide

Référence des paramètres

Règle de montant importante

Flux de production recommandé

Dépannage

Documentation associée