Checkout.Js
Feda Checkout est le moyen le plus facile et rapide pour intégrer un formulaire de paiement à votre site.
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
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.
-
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 transactionRéférez-vous aux devises supportées par FedaPay pour plus d'informations.
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"
.
Une fois le code intégré, vous devrez connecter votre compte FedaPay à Checkout afin que l’application puisse créer les clients et les transactions.
Cette étape est nécessaire et sécurise votre intégration.
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:
|
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. |
form_selector | data-form_selector |
string | outrepasser le selecteur de selecteur de la base formulaire. Si celui ci est bien indiqué, il sera utilisé pour trouver le formulaire à soumettre après 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.