📌 1. Plugin Installation
• In the Bubble editor, go to the Plugins tab.  
• Click Add plugins and search for FedaPay Payment Gateway.  
• Click Install to add the plugin to your project.  
• Once installed, you will find it in the Installed plugins section.  

📌 2. FedaPay API Configuration

• After installing the plugin, select FedaPay Payment Gateway in the Plugins tab.  
• In the configuration section, enter the mode :  
  – sandbox for testing with API keys for testing.  
  – live to use production API keys and accept real payments.  
• Enter the corresponding API key (sandbox or live) in the appropriate field.  

📌 3. Add the FedaPay Element to the Page

• In the Bubble editor, go to the Design tab.  
• Drag and drop the FedaPay Payment Gateway from the visual elements list onto your page.  
• It can be hidden (not visible to users), but it must be present on the page for the plugin to work properly.  

📌 4. Set Up the Payment Workflow

• On the page where you want to trigger the payment, add a Button element.  
• Click on the button, then click Start/Edit Workflow.  
• In the workflow, add the action Open Checkout from the FedaPay Payment Gateway element.  
• Configure the action by filling in the required fields :  
  – Amount (Required)  
  – Description (Optional)  
  – Firstname (Optional)  
  – Lastname (Optional)  
  – Phone number (Optional)  

📌 5. Handling Payment Success

Once the customer successfully completes the payment via the FedaPay checkout, the plugin automatically triggers the event checkout_completed.

You can use this event in your Bubble workflow to perform any post-payment actions — such as saving the transaction, sending a confirmation email, or displaying a success message to the user.

In addition, the plugin publishes several useful states once the payment is completed :

  – transaction_id – Unique ID of the FedaPay transaction  
  – amount – Total amount paid
  – customer_email – Email address of the customer  
  – customer_firstname – First name of the customer  
  – customer_lastname – Last name of the customer  

You can access these values in your workflows to store them in your database or integrate them into other operations.  

📌 6. Demo Editor Access

To test and inspect this plugin, you can view the demo application's editor here :
Demo Editor