Feda Checkout est le moyen le plus facile et rapide pour intégrer un formulaire de paiement à votre site.

Intégrer un formulaire de paiement sur votre site avec Feda Checkout

L'intégration du formulaire de paiement peut se faire de plusieurs manières.

Ajout d'un bouton à votre page

<!--
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>

Démo

Vous avez des options additionnelles tels le montant, la description, les noms et l'adresse mail de l'utilisateur qui veut effectuer un paiement pour personnaliser votre formulaire de paiement.


<!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: '[email protected]',
          lastname: 'Doe',
          firstname: 'John',
        }
      });
  </script>
</body>
</html>

Lorsque les paramètres pour ces options sont renseignés, l'utilisateur est dirigé immédiatement vers le choix du mode de paiement pour régler la transaction.

Démo

Ajout de plusieurs boutons de paiement à votre page

Vous pouvez aussi faire une intégration avec plusieurs boutons de paiement.


<!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="[email protected]"
  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="[email protected]"
  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>

Démo

Intégration avec un évenement pour délencher le paiement

Vous pouvez déclencher le paiement sur votre site avec le formulaire Checkout en utilisant un évenèment javascript.


<!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="[email protected]"
  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>

Démo

Intégration embarquée

Vous pouvez intégrer le formulaire de paiement et faire payer les utilisateurs sans qu'ils ne soient redirigés en dehors de votre site pour régler la transaction.


<!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: '[email protected]',
          lastname: 'Doe',
        },
        container: '#embed'
     });
  </script>
</body>
</html>

Démo
Payer 1000 FCFA

Vous avez la possibilité de changer la couleur de l'arrière-plan de votre formulaire en vous rendant dans les Préférences de votre compte FedaPay.


Intégration utilisant une balise form

Vous avez la possibilité une fois que l'utilisateur finit de payer de soumettre ce formulaire et d'envoyer les données qu'il contient à une page précise.

<!--
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>
Démo

Cette intégration utilise une balise script dans votre formulaire pour afficher un bouton qui déclenchera le processus de paiement lorsque le client cliquera sur ce dernier. N’oubliez surtout pas de passer en paramètre, les valeurs pour les attributs data- sans lesquelles, votre intégration ne marchera pas.

Vous avez :
  • data-public-key : précisez la clé publique de votre compte FedaPay obtenue à sa création
  • data-transaction-amount : définissez le montant du paiement à effectuer par le client
  • data-transaction-description : donnez une brève description de l’objet de la transaction
  • data-currency-iso : précisez l’iso de la devise à utiliser pour la transaction

    Référez-vous aux devises supportées par FedaPay pour plus d'informations.

Les attributs restants, sont facultatifs et ne servent qu’à personnaliser à votre guise la présentation du formulaire et du bouton de paiement si vous souhaitez qu’ils arborent l’identité de votre plateforme.
Il s’agit de :
  • data-button-text : pour modifier le texte affiché sur votre bouton
  • data-button-class : personnaliser le bouton en indiquant pour cet attribut une classe définie de votre choix comme par exemple une classe bootstrap
  • data-widget-description : pour faire une brève présentation de votre plateforme
  • data-widget-image : définir le logo à afficher sur votre formulaire
  • data-widget-title : indiquer l’intitulé de votre plateforme

Lorsque vous utilisez ce code, assurez-vous que les données contenues dans le formulaire vous parviennent bien côté serveur en indiquant le bon paramètre pour l’attribut action, qui à titre illustratif ici est action="index.php".


Méthode de la class FedaPay
static init(options: CheckoutOptions | HTMLElement | string, checkoutOptions?: CheckoutOptions): CheckoutElement | CheckoutElement[]

Initialise le composant de paiement.

Options : CheckoutOptions
Nom Attribut HTML Type Description
public_key data-public-key string La clé public FedaPay
environment data-environment string L'environnement FedaPay. Les valeurs possibles sont live et sandbox.
trigger data-trigger string Le type d'événément qui déclenche l'ouverture de la boîte de dialogue de paiement. La valeur par défaut est click.
locale data-locale string La langue de l'interface de paiement. La valeur par défaut est fr.
transaction.id data-transaction-id integer Si vous avez déjà créé la transaction, vous pouvez spécifier l'id de la transaction.
transaction.amount data-transaction-amount integer Le montant de la transaction. La valeur par défaut est 100.
transaction.description data-transaction-description string La description de la transaction.
transaction.custom_metadata data-transaction-custom_metadata object Objet metadata de la transaction. Exemple JS:

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

Exemple HTML

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

customer.email data-customer-email string L'email du client
customer.firstname data-customer-firstname string Le prénom du client
customer.lastname data-customer-lastname string Le nom du client
customer.phone_number.number data-customer-phone_number-number string Le numéro de téléphone du client
customer.phone_number.country data-customer-phone_number-country string Le pays du téléphone du client
customer.currency.iso data-currency-iso string Le code iso de la devise. La valeur par défaut est XOF
customer.currency.code data-currency-code string Le code de la devise.
button.text data-button-text string Le text à afficher sur le bontton de paiement.
button.class data-button-class string La class css du bontton de paiement.
submit_form_on_failed data-submit_form_on_failed boolean Indique si le formulaire (Lorsque le bouton de paiement ou l'élément embarqué a un parent direct qui est un formulaire) doit être soumis ou non lorsque le paiement échoue.
onComplete - function({ reason: number, transaction: object }) 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.
Méthodes de la class CheckoutElement
open(): void

Ouvre la boîte de dialogue.

Sur cette page