Passer au contenu principal

​
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

1

Récupérer vos identifiants sandbox

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

Définir votre environnement

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

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

ChampTypeRequisDescription
environmentstringOuisandbox ou production
referencestringRecommandéRéférence de transaction unique
clientIdstringOuiVotre client-id Payfonte
amountintegerOuiMontant en sous-unités, sans décimales
currencystringOuiCode devise ISO, par exemple NGN
countrystringOuiCode pays ISO, par exemple NG
customerobjectOuiInformations client, nom, e-mail, téléphone
metadataobjectNonChamps personnalisés renvoyés dans les callbacks et webhooks
callbackfunctionOuiExécuté après le retour d’un événement de paiement
onClosefunctionNonExé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.
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.
Traitez toujours les Webhooks pour confirmer l’état final de la transaction, success ou failed.
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ômeCause probableCorrectif
Le checkout ne s’ouvre pasScript SDK non chargéVérifiez l’URL du script et la console du navigateur
Problèmes d’authentificationclientId invalide ou mauvais environnementUtilisez les identifiants correspondant à sandbox ou production
Échec de validation du montantMontant décimal utiliséConvertissez en sous-unités entières
Erreur de transaction en doublereference réutiliséeGé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.