Creating a Split Payment Feature in Bubble.io

 

Implementing a split payment feature in Bubble.io allows you to divide payments between multiple parties. This is essential for marketplace applications where you want to send part of the payment to the seller and retain a commission on each transaction. This step-by-step guide details how you can create a split payment feature using Bubble.io and the Stripe plugin.

 

Prerequisites

 

• A Bubble.io account with a project already set up.
• Basic knowledge of Bubble.io workflows and data types.
• Understanding of payment gateways and the concept of split payments.
• A Stripe account set up and configured.
• Familiarity with the Stripe Plugin in Bubble.

 

Understanding Split Payments

 

• Split Payments: This refers to the process of automatically dividing the payment from a single transaction among multiple recipients.

• Use Cases: Primarily used in multi-vendor platforms where the marketplace takes a percentage of a transaction and the rest is paid to the vendor.

 

Setting Up Your Stripe Account

 

1. Log in to Stripe: Go to the Stripe Dashboard and log in to your account.

2. Enable Stripe Connect: For split payments, enable Stripe Connect, which will allow your platform to handle multiple vendors and split payments.

3. Obtain API Keys: Ensure you have your Stripe account's API keys. These will be necessary for the integration in Bubble.io.

1. Create a Connected Account: This is crucial as each vendor on your platform needs a connected Stripe account to receive payments.

 

Configuring Bubble.io with the Stripe Plugin

 

1. Install the Stripe Plugin

• Log into your Bubble.io dashboard.
• Add the Stripe plugin from the Bubble Plugin Library.
• Enter your Stripe API keys obtained during setup in the plugin settings.

1. Create a Data Type for Vendors

• Define a New Data Type for Vendors or Sellers within Bubble to store vendor details.
• Include fields such as stripeAccountID to store Stripe connected account IDs.

1. Create a Payment Page

• Design your page in Bubble.io where users will make payments. Add necessary inputs like amount, description, etc.

 

Implementing Split Payments via Workflows

 

1. Configure the Payment Workflow

• In the Bubble editor, go to the Workflows tab on the payment page.
• Create a new workflow triggered by a button click for confirming a payment.

1. Set Up Stripe Token Creation

• Add an action to create a credit card token using the Stripe plugin. Collect the user’s credit card details securely.

1. Create a Payment Intent

• Use the Stripe plugin's action to create a Payment Intent with the collected amount.
• Store the payment intent ID and associate it with the transaction in your database.

1. Implement Split Logic

• Use the Stripe plugin's Transfer API to create a transfer to the vendor's Stripe connected account using their stripeAccountID.

• Adjust the amount based on your fee or commission to each connected account.

  ```plaintext
  // Example Pseudocode:
  Charge = Total Amount - Platform Fee
  Transfer = Total Amount - Charge
  ```

1. Finalize Payment

• Complete the payment using the saved payment intent once the charge and transfer actions are successful.

 

Testing the Split Payment Process

 

• Sandbox Mode: Use Stripe's test keys and Bubble's preview mode to test without real transactions.

• Verify: Check that payments are split correctly and fees are accurately distributed.

• Debug: Use Stripe’s dashboard to monitor webhook events and transactions.

 

Deploying Your Bubble Application

 

1. Switch to Live Mode

• Switch your Stripe keys to live keys in the Bubble plugin panel.

1. Configure for Production

• Double-check all data connections, especially sensitive ones like API keys.

1. Full Deployment

• Deploy your complete application on Bubble from the development to the live environment.
• Conduct a final round of tests on live transactions.

 

By following these detailed steps, you can efficiently implement a split payment feature in your Bubble.io application using Stripe. This not only ensures smooth financial transactions but also enhances the scalability of multi-vendor platforms on Bubble.