> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fedapay.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
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.
```javascript theme={null}
Intégrer Feda Checkout à mon site
```
[Cliquez ici pour tester](https://demo.fedapay.com/payment-button.html)
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.
```javascript theme={null}
Intégrer Feda Checkout à mon site
```
[Cliquez ici pour tester](https://demo.fedapay.com/customize-form.html)
Pour permettre des collectes de différents montants, vous pouvez intégrer plusieurs boutons de paiement sur la même page.
```javascript theme={null}
Intégrer Feda Checkout à mon site
```
[Cliquez ici pour tester](https://demo.fedapay.com/add-multiple-buttons.html)
Si vous souhaitez déclencher la collecte par un événement spécifique, utilisez JavaScript pour activer le formulaire de paiement sur demande.
```javascript theme={null}
Intégrer Feda Checkout à mon site
```
[Cliquez ici pour tester](https://demo.fedapay.com/trigger-collection.html)
Pour une expérience utilisateur optimisée, vous pouvez intégrer le formulaire de collecte directement sur votre site, sans rediriger l'utilisateur.
```javascript theme={null}
Intégrer Feda Checkout à mon site
```
[Cliquez ici pour tester](https://demo.fedapay.com/payment-no-redirection.html)
## 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.
```javascript theme={null}
```
[Cliquez ici pour tester](https://demo.fedapay.com/form-tag.html)
## Méthode de la classe FedaPay et attributs de configuration
***Checkout.js propose des options pour initialiser le composant de collecte avec plusieurs configurations :***
* **Attribut HTML**: `data-public-key`
* **Type**: *string*
* **Description**: La clé public FedaPay
* **Attribut HTML**: `data-environment`
* **Type**: *string*
* **Description**: L'environnement FedaPay. Les valeurs possibles sont **live et sandbox**.
* **Attribut HTML**: `data-trigger`
* **Type**: *string*
* **Description**: 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**.
* **Attribut HTML**: `data-locale`
* **Type**: *string*
* **Description**: La langue de l'interface de paiement. La valeur par défaut est **fr**.
* **Attribut HTML**: `data-transaction-id`
* **Type**: *integer*
* **Description**: Si vous avez déjà créé la transaction, vous pouvez spécifier l'id de la collecte.
* **Attribut HTML**: `data-transaction-amount`
* **Type**: *integer*
* **Description**: Le montant de la transaction. La valeur par défaut est **100**.
* **Attribut HTML**: `data-transaction-description`
* **Type**: *string*
* **Description**: La description de la transaction.
* **Attribut HTML**: `data-transaction-custom_metadata`
* **Type**: *object*
* **Description**: Objet metadata de la transaction.
**Exemple JS:**
```
{
transaction:{
custom_metadata:{
foo: 'bar'
}
}
}
```
**Exemple HTML**
```
* **Attribut HTML**: `data-customer-email`
* **Type**: *string*
* **Description**: L'email du client
* **Attribut HTML**: `data-customer-firstname`
* **Type**: *string*
* **Description**: Le prénom du client
* **Attribut HTML**: `data-customer-lastname`
* **Type**: *string*
* **Description**: Le nom du client
* **Attribut HTML**: `data-customer-phone_number-number`
* **Type**: *string*
* **Description**: Le numéro de téléphone du client
* **Attribut HTML**: `data-customer-phone_number-country`
* **Type**: *string*
* **Description**: Le pays du téléphone du client
* **Attribut HTML**: `data-currency-iso`
* **Type**: *string*
* **Description**: Le code iso de la devise. La valeur par défaut est **XOF**
* **Attribut HTML**: `data-currency-code`
* **Type**: *string*
* **Description**: Le code de la devise
* **Attribut HTML**: `data-button-text`
* **Type**: *string*
* **Description**: Le text à afficher sur le bontton de paiement.
* **Attribut HTML**: `data-button-class`
* **Type**: *string*
* **Description**: La class css du bontton de paiement.
* **Attribut HTML**: `data-form_selector`
* **Type**: *string*
* **Description**: outre passer 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
* **Attribut HTML**: `data-submit_form_on_failed`
* **Type**: *boolean*
* **Description**: 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.
* **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
1. **Connectez-vous à votre compte FedaPay**
2. Cliquez sur votre **photo de profil** (en haut à droite)
3. Sélectionnez le menu **Applications**
4. 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 :
1. Rendez-vous toujours dans l’onglet **Applications**
2. Saisissez le domaine concerné dans le champ **Révoquer les accès au domaine suivant**
3. 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.
* 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 :
1. Rendez-vous toujours dans l’onglet **Applications**
2. Saisissez le domaine concerné dans le champ **Révoquer les accès au domaine suivant**
3. Cliquez sur le bouton **Révoquer les accès**