Are you using Bubble to build an app or website without coding? With the FedaPay plugin, you can easily accept credit card payments (Visa, MasterCard) and Mobile Money in several West African countries — without redirecting your users to another page.Here are the steps to integrate the FedaPay plugin into your project:

​
Step 1 – Install the FedaPay Plugin

1- Open your Bubble app editor.

2- Go to the Plugins tab (left-side menu).

3- Click on Add plugins, then search for FedaPay Payment Gateway.

4- Click Install to add it to your application.

Tip: Once installed, you’ll see the plugin listed under Installed plugins.

​
Step 2 – Configure Your FedaPay API Keys

1- In the Plugins tab, click on FedaPay Payment Gateway.

2- Enter your API keys:

  • Sandbox Key if you are in test mode

  • Live Key if you’re ready to accept real payments

You can find your keys in your FedaPay → API Settings.

​
Step 3 – Add the FedaPay Element to Your Page

1- In Bubble’s Design tab, search for FedaPay Payment Gateway in the visual elements.

2- Drag and drop the element anywhere on your page.

Why is this element necessary ? Even if it’s invisible to your users, this element allows Bubble to launch the payment window. Do not delete it.

​
Step 4 – Create a Button to Trigger the Payment

1- Add a button (e.g., “Pay Now”) in the editor.

2- Click on it, then click Add/Edit Workflow.

3- In the workflow, add the action Open Checkout (from the FedaPay element).

4- Fill out the fields:

  • Amount (Required): the payment amount (e.g., 1000)

  • Description (Optional): “Order payment #123”

  • Firstname / Lastname (Optional)

  • Phone number (Optional, useful for Mobile Money)

Tip: You can use your form input fields to automatically populate these values.

​
Step 5 – Handling Payment Success

Once the user successfully completes the payment via FedaPay, the checkout_completed event is automatically triggered in Bubble.

What to do after the payment?

You can use this event in your workflow to:

  • Save the transaction to your database

  • Send a confirmation email to the customer

  • Display a success message to the user

How to set this up in Bubble?

1- Go to the Workflow tab of your Bubble application.

2- Click the blue “New” button

3- In the “Elements” section, select: A FedaPay Payment Gateway checkout is completed

Available Data After Payment:

You can retrieve this information in your workflow:

  • transaction_id

  • amount

  • customer_email

  • customer_firstname

  • customer_lastname

​
Step 6 – Test the Plugin in a Demo App

Want to see how it works before implementing it yourself?

Check out the demo editor here: Link to demo app

​
About the Collected Data

The FedaPay plugin only collects the information the user enters during payment (first name, last name, email).These details are returned to you after payment, allowing you to:

  • Create or update a user profile

  • Send a confirmation

  • Perform data analysis

​
Where to Find the Plugin in Bubble?

You must click on the following link: FedaPay Payment Gateway

Are you using Bubble to build an app or website without coding? With the FedaPay plugin, you can easily accept credit card payments (Visa, MasterCard) and Mobile Money in several West African countries — without redirecting your users to another page.Here are the steps to integrate the FedaPay plugin into your project:

​
Step 1 – Install the FedaPay Plugin

1- Open your Bubble app editor.

2- Go to the Plugins tab (left-side menu).

3- Click on Add plugins, then search for FedaPay Payment Gateway.

4- Click Install to add it to your application.

Tip: Once installed, you’ll see the plugin listed under Installed plugins.

​
Step 2 – Configure Your FedaPay API Keys

1- In the Plugins tab, click on FedaPay Payment Gateway.

2- Enter your API keys:

  • Sandbox Key if you are in test mode

  • Live Key if you’re ready to accept real payments

You can find your keys in your FedaPay → API Settings.

​
Step 3 – Add the FedaPay Element to Your Page

1- In Bubble’s Design tab, search for FedaPay Payment Gateway in the visual elements.

2- Drag and drop the element anywhere on your page.

Why is this element necessary ? Even if it’s invisible to your users, this element allows Bubble to launch the payment window. Do not delete it.

​
Step 4 – Create a Button to Trigger the Payment

1- Add a button (e.g., “Pay Now”) in the editor.

2- Click on it, then click Add/Edit Workflow.

3- In the workflow, add the action Open Checkout (from the FedaPay element).

4- Fill out the fields:

  • Amount (Required): the payment amount (e.g., 1000)

  • Description (Optional): “Order payment #123”

  • Firstname / Lastname (Optional)

  • Phone number (Optional, useful for Mobile Money)

Tip: You can use your form input fields to automatically populate these values.

​
Step 5 – Handling Payment Success

Once the user successfully completes the payment via FedaPay, the checkout_completed event is automatically triggered in Bubble.

What to do after the payment?

You can use this event in your workflow to:

  • Save the transaction to your database

  • Send a confirmation email to the customer

  • Display a success message to the user

How to set this up in Bubble?

1- Go to the Workflow tab of your Bubble application.

2- Click the blue “New” button

3- In the “Elements” section, select: A FedaPay Payment Gateway checkout is completed

Available Data After Payment:

You can retrieve this information in your workflow:

  • transaction_id

  • amount

  • customer_email

  • customer_firstname

  • customer_lastname

​
Step 6 – Test the Plugin in a Demo App

Want to see how it works before implementing it yourself?

Check out the demo editor here: Link to demo app

​
About the Collected Data

The FedaPay plugin only collects the information the user enters during payment (first name, last name, email).These details are returned to you after payment, allowing you to:

  • Create or update a user profile

  • Send a confirmation

  • Perform data analysis

​
Where to Find the Plugin in Bubble?

You must click on the following link: FedaPay Payment Gateway