Bubble.io and Stripe Connect integration: Step-by-Step Guide 2024

Step 1: Create A Stripe Account
Before you integrate Bubble.io with Stripe Connect, you need to have a Stripe account. Visit the Stripe homepage and find the Sign up for free button. Fill that form with your email, full name, password and click 'Create Account.'

Step 2: Create a Stripe Connect application
Once your account is active, visit the Stripe Connect page and create a new application. To do this, navigate to your dashboard and click Settings then Connect Settings. Once on the Connect settings page, click +Add application. Name your application appropriately and save it. This will generate the credentials needed for the integration with Bubble.

Step 3: Get your Stripe API keys
In your Stripe dashboard, navigate to the 'API' tab via the left sidebar. This will open a page where you'll find your publishable and secret API keys. It is recommended to use test mode keys during the integration process. This will ensure that you are not making actual transactions while testing the system.

Step 4: Install the Stripe Plugin on Bubble.io
Head over to your Bubble.io account, visit the Bubble Editor section, and select the application you want to integrate with Stripe. Under the Plugins tab, click +Add plugins. Search for Stripe in the search box, and click Install to add it to your application.

Step 5: Add your Stripe API Keys to Bubble.io Plugin
Click on the newly installed Stripe Plugin. On the plugin page, place your Stripe Publishable Key into the Publishable Key field and your Secret Key into the Secret Key field. It is important that you place your test keys into the fields marked for test keys and live keys into the corresponding live fields.

Step 6: Configure Stripe Connect Settings
Next, you would need to enable Stripe Connect on Bubble.io. Simply toggle the Use Stripe Connect option in the Stripe Plugin settings. This will reveal some additional fields. For the 'Application ID', fill with your Stripe Connect application ID which can be found on your Stripe dashboard under the 'Connect-Settings' tab.

Step 7: Add Redirect URL to Stripe
In your Stripe dashboard, add the URL of your Bubble application to your Connect settings. This can be found under the OAuth section in the Redirects to field. It is usually in the form https://yourapp.bubbleapps.io/api/1.1/oauth_redirect.

Step 8: Stripe actions and workflows in Bubble.io
Finally, in Bubble.io, you can now create workflows and actions related to Stripe. Under the Design tab, click to select an element and then go to the Workflow tab. You will now see Stripe-related actions like Charge the Current User, Subscribe the User to a Plan, etc.

Step 9: Test the Stripe Integration
After setting up the workflows, it is essential to test the integration. This lets you know if everything was added correctly. With your Stripe still in test mode (you can eventually switch to live mode once the tests are satisfactory), perform transactions on your Bubble app and ensure that they reflect in your Stripe Test Dashboard.

It is crucial to note that every time the app needs to make a payment, the Bubble user has to authenticate. This authentication process allows the app to gain access to some data and make transactions on behalf of the user.

Remember, integrating payment gateways can be sensitive because it deals directly with users' money. Ensure all steps are correctly followed and never share your secret key with anyone.