Vous pouvez intégrer Feda Checkout en quelques lignes de codes côté client :

<!--
Remplacez VOTRE_CLE_API_PUBLIQUE par la clé publique de votre compte sandbox ou live.
Si vous utilisez votre compte live, vous devez remplacer
le lien par https://checkout.fedapay.com/js/checkout.js
-->
<form action="index.php" method="POST">
 <input type="hidden" name="field" value="test">
 <script
   src="https://sandbox-checkout.fedapay.com/js/checkout.js"
   data-public-key="VOTRE_CLE_API_PUBLIQUE"
   data-button-text="Payer 35000"
   data-button-class="button-class"
   data-transaction-amount="35000"
   data-transaction-description="Description de la transaction"
   data-currency-iso="XOF"
   data-widget-description="Votre boutique 100% africaine"
   data-widget-image="https://sandbox-checkout.fedapay.com/img/marketplace.svg"
   data-widget-title="Afrimarket">
 </script>
</form>

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".