Onboarding a user (connecting Stripe account)
This section will go over how to create a connected Stripe account for a user.
Last updated
This section will go over how to create a connected Stripe account for a user.
Last updated
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
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:
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:
It is recommended to include the user country as otherwise the country could be locked to the platform's country (especially for express accounts).
The action returns the Stripe Account ID that we will save to the users object in the database
You must update your Connect branding settings with icon in order to create an account link if you have not done that already. You can set those fields at https://dashboard.stripe.com/settings/connect
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.
Keep in mind that we are redirecting users back to the 'version-test' version in this example. If you decide on launching your app, you will need to create a conditional that changes the URL based on the Live and Test mode
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:
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:
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).
If the charges_enabled
parameter is still 'no' after the users is being redirected to the return URL, this probably means that the user has left some information empty during onboarding. You can easily create a new Account Link with the saved Account ID to have the user finish the onboarding. Because you use the existing Account ID, most information will already be prefilled by the user.
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.