Onboarding a user (connecting Stripe account)

This section will go over how to create a connected Stripe account for a user.

Getting started

We will built a simple user onboarding flow to let users connect their Stripe account using Checkout. To start, make sure to:

  • Add the plugin to your app

  • Have a simple page with a button users can use to trigger the onboarding flow (we will go over this further on in this section)

➡️ You can take a look at the plugin demo created in this section here: https://bubble.io/page?name=index&id=stripeconnectdemo&tab=tabs-1

Step 1 - Page contents

We are going to setup a page with a button that triggers the Stripe onboarding flow. As we need to save certain values, like the account ID, to the database make sure your user is logged in. A good place for this button is for example on the user account page. The demo has the following setup:

Step 2 - Create a Stripe Account

The plugin supports the creation of Standard and Express accounts. The Standard account is the easiest to implement while an Express account supports features like a custom payout schedule and the Express Dashboard (instead of the normal Stripe dashboard, the plugin has a workflow action to direct your users to the Express dashboard). You can see the basic differences below.

We need to use the 'Stripe Connect - Create Stripe Account' workflow action to create a Stripe account to connect to the user account. We will create a standard account in the demo by using the workflow action below:

The action returns the Stripe Account ID that we will save to the users object in the database

To retrieve the onboarding URL, we will run the 'Stripe Connect - Create Account Link' workflow action. We need to specify a Return URL and a Refresh URL. When a users finishes the onboarding process, they will be redirected to the Return URL. NOTE: This does not mean that the onboarding succeeded, we still need to check to make sure. When the onboarding gets interrupted (by for example a page refresh) the users will be redirected to the Refresh URL.

As you can see in the image above, I have added the 'return' URL parameter to my Return URL. This is useful as we can use this in the next step to recognise when a users comes back from the onboarding page.

The 'Stripe Connect - Create Account Link' workflow action returns the Onboarding URL you need to redirect your users to:

Step 4 - Check if the onboarding succeeded

Finally we will use the 'Retrieve Stripe Account' data call when the users is redirected to the Return URL. The setup in the demo looks like this:

Create a workflow on page load and call the 'Retrieve Stripe Account' data call to get the status of the charges_enabled parameter
Create a workflow on page load and call the 'Retrieve Stripe Account' data call to get the status of the charges_enabled parameter

You can use the charges_enabled parameter in the response of the 'Retrieve Stripe Account' data call to know if the onboarding succeeded and show a popup to indicate the user or make changes to your users object (both happen in the demo).

Alternative step 4

Instead of checking if the Onboarding succeeded client side, you can also setup up a webhook inside Stripe to be notified if a user completes the Onboarding. Keep in mind that you need to be on a paid Bubble plan for this as you need to use a Backend workflow.

Last updated