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-1arrow-up-right

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 demoarrow-up-right 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:

circle-exclamation

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

circle-exclamation

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.

circle-exclamation

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 demoarrow-up-right 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 demoarrow-up-right).

circle-exclamation

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