Accepter des paiements avec Checkout.Js

Pourquoi utiliser Checkout.js pour vos paiements en ligne ?

Checkout.js est un outil conçu pour faciliter l’intégration d’un formulaire de paiement sécurisé et rapide sur votre site web. Que vous soyez développeur ou non, cet outil vous permettra de collecter des paiements directement sur votre site en toute simplicité. Découvrez comment utiliser et personnaliser Checkout.js pour offrir une expérience de paiement fluide à vos utilisateurs.

Avant de commencer, visionnez cette vidéo qui présente le mode d’intégration de Checkout.js :

Méthodes d’intégration de Checkout.js

Checkout.js offre plusieurs options d’intégration pour répondre à différents besoins. Vous pouvez ajouter un bouton de paiement simple, plusieurs boutons de collecte, ou même intégrer le formulaire de paiement directement sur votre site pour éviter les redirections.

Ajouter un bouton de paiement simple à votre page

Commencez par ajouter un bouton simple sur votre page pour déclencher la collecte. Ce bouton permettra à l’utilisateur d’accéder à un formulaire de paiement où il pourra finaliser la transaction.

<!--
Remplacez VOTRE_CLE_API_PUBLIQUE par la clé publique de votre compte sandbox ou live.
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Intégrer Feda Checkout à mon site</title>
    <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
  </head>
  <body>
    <button id="pay-btn">Payer 100 FCFA</button>
    <script type="text/javascript">
      FedaPay.init("#pay-btn", { public_key: "VOTRE_CLE_API_PUBLIQUE" });
    </script>
  </body>
</html>

Cliquez ici pour tester

Personnaliser le formulaire de paiement

Vous pouvez personnaliser les détails de la collecte (montant, description, noms et adresse e-mail du client) pour adapter le formulaire de paiement à votre plateforme.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn">Payer 1000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('#pay-btn', {
        public_key: 'VOTRE_CLE_API_PUBLIQUE',
        transaction: {
          amount: 1000,
          description: 'Acheter mon produit'
        },
        customer: {
          email: 'johndoe@gmail.com',
          lastname: 'Doe',
          firstname: 'John',
        }
      });
  </script>
</body>
</html>

Cliquez ici pour tester

Ajouter plusieurs boutons de paiement sur une même page

Pour permettre des collectes de différents montants, vous pouvez intégrer plusieurs boutons de paiement sur la même page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button class="pay-btn"
  data-transaction-amount="1000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="johndoe@gmail.com"
  data-customer-lastname="Doe">Payer 1000 FCFA</button>

  <button class="pay-btn"
  data-transaction-amount="2000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="janetay@gmail.com"
  data-customer-lastname="Tay">Payer 2000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('.pay-btn', { public_key: 'VOTRE_CLE_API_PUBLIQUE' });
  </script>
</body>
</html>

Cliquez ici pour tester

Déclencher la collecte avec un événement

Si vous souhaitez déclencher la collecte par un événement spécifique, utilisez JavaScript pour activer le formulaire de paiement sur demande.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn"
  data-transaction-amount="1000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="johndoe@gmail.com"
  data-customer-lastname="Doe"
  >Payer 1000 FCFA</button>

  <script type="text/javascript">
    let widget =  FedaPay.init({
      public_key: 'VOTRE_CLE_API_PUBLIQUE'
    });
    let btn = document.getElementById('pay-btn');
    btn.addEventListener('click', () => {
      widget.open();
    });
  </script>
</body>
</html>

Cliquez ici pour tester

Intégration embarquée : Paiement sans redirection

Pour une expérience utilisateur optimisée, vous pouvez intégrer le formulaire de collecte directement sur votre site, sans rediriger l’utilisateur.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <div id="embed" style="width: 500px; height: 420px"></div>

  <script type="text/javascript">
      FedaPay.init({
        public_key: 'VOTRE_CLE_API_PUBLIQUE',
        transaction: {
          amount: 1000,
          description: 'Acheter mon produit'
        },
        customer: {
          email: 'johndoe@gmail.com',
          lastname: 'Doe',
        },
        container: '#embed'
     });
  </script>
</body>
</html>

Cliquez ici pour tester

Personnalisation de l’interface et options avancées

Checkout.js permet de personnaliser les éléments visuels de votre formulaire pour qu’il corresponde à l’identité de votre plateforme. Vous pouvez notamment définir la couleur de l’arrière-plan, le texte du bouton de paiement, ou ajouter un logo.

Modifier l’apparence et ajouter des détails supplémentaires

Clé publique : data-public-key
Montant de la collecte : data-transaction-amount
Description de la collecte : data-transaction-description
Devise : data-currency-iso
Texte du bouton : data-button-text
Classe CSS du bouton : data-button-class
Image et description du widget : data-widget-image, data-widget-description

Méthode avec une balise form pour une intégration avancée

Checkout.js permet également l’intégration avec une balise form pour envoyer des données spécifiques après paiement.

<!--
Remplacez VOTRE_CLE_API_PUBLIQUE par la clé publique de votre compte sandbox ou live.
-->
<form action="index.php" method="POST">
 <input type="hidden" name="field" value="test">
 <script
   src="https://cdn.fedapay.com/checkout.js?v=1.1.7"
   data-public-key="VOTRE_CLE_API_PUBLIQUE"
   data-button-text="Payer 1000"
   data-button-class="button-class"
   data-transaction-amount="1000"
   data-transaction-description="Description de la transaction"
   data-currency-iso="XOF">
 </script>
</form>

Cliquez ici pour tester

Méthode de la classe FedaPay et attributs de configuration

Checkout.js propose des options pour initialiser le composant de collecte avec plusieurs configurations :

public_key

environment

trigger

locale

transaction.id

transaction.amount

transaction.description

transaction.custom_metadata

Attribut HTML: data-transaction-custom_metadata
Type: object

Description: Objet metadata de la transaction.

Exemple JS:

  {
    transaction:{
      custom_metadata:{
        foo: 'bar'
      }
    }
  }

Exemple HTML

<button data-transaction-custom_metadata-foo="bar"></>

customer.email

customer.firstname

customer.lastname

customer.phone_number.number

customer.phone_number.country

customer.currency.iso

customer.currency.code

button.text

button.class

form_selector

submit_form_on_failed

onComplete

Type:

  function{ reason: number, transaction: object }

Description: La fonction de retour lorsque la boîte de dialogue est fermée. Cette fonction prend deux arguments. Le premier est la raison de fermeture de la boîte de dialogue. Il peut être égal à FedaPay.CHECKOUT_COMPLETED (lorsque le paiement est complet) ou FedaPay.DIALOG_DISMISSED (lorsque la boîte de dialogue est fermée par l’utilisateur). Le deuxième argument est l’object transaction créé lors du paiement.

Autorisation de domaine pour Checkout JS

Lors de la première connexion entre votre site marchand et la solution FedaPay Checkout, une autorisation de domaine est nécessaire. Cette étape permet de garantir que vos clients soient correctement redirigés vers votre page de paiement sécurisée, et non vers l’interface de création de compte FedaPay.

Pourquoi cette autorisation est nécessaire ?

Sans autorisation préalable de votre domaine :

Vos clients seront redirigés vers l’interface d’inscription FedaPay,
Ils ne pourront pas finaliser leurs paiements,
Cela peut entraîner une perte de conversions.

Étapes pour autoriser votre domaine

Connectez-vous à votre compte FedaPay
Cliquez sur votre photo de profil (en haut à droite)
Sélectionnez le menu Applications
Dans la section Nom de domaine à autoriser:

Saisissez le nom de domaine de votre site marchand (ex. votresite.com)
Cliquez sur le bouton Autoriser

Une fois cette étape terminée, votre domaine est approuvé pour l’utilisation de Checkout JS.

Révocation d’un domaine (optionnelle)

Dans certains cas, vous pourriez vouloir retirer l’accès d’un domaine autorisé – par exemple :

Si vous avez changé de site ou de domaine principal,
Si vous avez détecté un usage non autorisé ou suspect.

Pour cela :

Rendez-vous toujours dans l’onglet Applications
Saisissez le domaine concerné dans le champ Révoquer les accès au domaine suivant
Cliquez sur le bouton Révoquer les accès

Note : Une fois la révocation effectuée, les paiements via ce domaine seront bloqués.

Documentation de Fedapay

​Pourquoi utiliser Checkout.js pour vos paiements en ligne ?

​Méthodes d’intégration de Checkout.js

​Personnalisation de l’interface et options avancées

​Méthode avec une balise form pour une intégration avancée

​Méthode de la classe FedaPay et attributs de configuration

​Autorisation de domaine pour Checkout JS

​Pourquoi cette autorisation est nécessaire ?

​Étapes pour autoriser votre domaine

​Révocation d’un domaine (optionnelle)

Pourquoi utiliser Checkout.js pour vos paiements en ligne ?

Méthodes d’intégration de Checkout.js

Personnalisation de l’interface et options avancées

Méthode avec une balise form pour une intégration avancée

Méthode de la classe FedaPay et attributs de configuration

Autorisation de domaine pour Checkout JS

Pourquoi cette autorisation est nécessaire ?

Étapes pour autoriser votre domaine

Révocation d’un domaine (optionnelle)