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

# Bubble

Vous utilisez **Bubble** pour créer une application ou un site web sans coder ? Grâce au **plugin FedaPay**, vous pouvez accepter facilement des paiements par carte bancaire (Visa, MasterCard) et Mobile Money dans plusieurs pays d’Afrique de l’Ouest — sans rediriger vos utilisateurs vers une autre page.Voici les étapes pour intégrer le plugin FedaPay dans votre projet  :

### Étape 1 :  Installer le plugin FedaPay

1- Ouvrez l'éditeur de votre application **Bubble**.

2- Allez dans l’onglet **Plugins** (menu de gauche).

3- Cliquez sur **Add plugins**, puis recherchez **FedaPay Payment Gateway**.

4- Cliquez sur **Install** pour l’ajouter à votre application.

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018711/screely-1748015204121_z4rx8l.png" />
</Frame>

<Note>**Astuce** : Une fois installé, vous verrez le plugin dans la liste **Installed plugins**.</Note>

### Étape 2 : Configurer les clés API FedaPay

1- Dans l’onglet **Plugins**, cliquez sur **FedaPay Payment Gateway**.

2- Renseignez les **clés API** :

* Clé Sandbox si vous êtes en mode test

* Clé Live si vous êtes prêt à recevoir de vrais paiements

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018711/screely-1748015773095_fwpeyy.png" />
</Frame>

Vous trouverez vos clés dans [votre compte FedaPay](https://live.fedapay.com/login) → Paramètres API.

### Étape 3 : Ajouter l’élément FedaPay à votre page

1- Dans l’onglet **Design** de Bubble, cherchez **FedaPay Payment Gateway** dans les éléments visuels.

2- Glissez-déposez cet élément n’importe où sur votre page.

<Info>**Pourquoi cet élément est nécessaire** ?
Même s’il peut être invisible pour vos utilisateurs, cet élément permet à Bubble d’activer la fenêtre de paiement. **Ne le supprimez pas**.</Info>

### Étape 4 : Créer un bouton pour déclencher le paiement

1- Ajoutez un **bouton** (ex. : “Payer maintenant”) dans l’éditeur.

2- Cliquez dessus, puis sur **Add/Edit Workflow**.

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018711/screely-1748017025108_rmj5tz.png" />
</Frame>

3- Dans le workflow, ajoutez l’action **Open Checkout** (de l’élément FedaPay).

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018711/screely-1748017163530_vt2xjs.png" />
</Frame>

4- Complétez les champs :

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018712/screely-1748018469163_omvr8c.png" />
</Frame>

* **Amount (Requis)** : le montant à payer (ex. 1000)

* **Description (facultatif)** : “Paiement de commande #123”

* **Firstname / Lastname (facultatif)**

* **Phone number** (facultatif, utile pour Mobile Money)

<Tip>**Conseil** : Vous pouvez utiliser les champs de votre formulaire utilisateur pour remplir automatiquement ces données.</Tip>

### Étape 5 : Gérer le succès du paiement

Une fois que l'utilisateur finalise le paiement via FedaPay, l'événement **checkout\_completed** est déclenché automatiquement dans Bubble.

**Que faire après le paiement ?**

Vous pouvez utiliser cet événement dans votre **workflow** pour :

* Enregistrer la transaction dans votre base de données

* Envoyer un email de confirmation

* Afficher un message de réussite à l’utilisateur

**Comment configurer cela dans Bubble ?**

1- Allez dans l’onglet **Workflow** de votre application Bubble.

2- Cliquez sur le bouton bleu "**New**"

3- Dans la section "**Elements**", sélectionnez **A FedaPay Payment Gateway checkout is completed**.

<Frame>
  <img src="https://res.cloudinary.com/dvilp6td2/image/upload/v1748018713/screely-1748018565647_szjfmv.png" />
</Frame>

**Données disponibles après paiement** :

Vous pouvez récupérer ces informations dans votre workflow :

* transaction\_id

* amount

* customer\_email

* customer\_firstname

* customer\_lastname

### Étape 6 : Tester le plugin dans une app de démonstration

Envie de voir à quoi ça ressemble avant de l’implémenter vous-même ?
Consultez l’éditeur de démo ici : [Lien vers l’application de démonstration](http://bubble.io/page?id=payment-gateway-78241\&tab=Design\&name=index)

### À propos des données collectées

Le plugin FedaPay collecte uniquement les informations saisies par l'utilisateur lors du paiement (prénom, nom, email). Ces données vous sont renvoyées après paiement pour vous permettre de :

* Créer ou mettre à jour un profil utilisateur

* Envoyer une confirmation

* Faire de l’analyse de données

### Où trouver le plugin dans Bubble ?

Il faut cliquez sur le lien suivant : [FedaPay Payment Gateway](https://bubble.io/plugin/fedapay-payment-gateway-1744967327162x196581148574351360)