Note: this tutorial assumes you have already registered for a Stripe account. You’ll need to have added your business name, icon and brand color in the Connect Settings section of your Stripe dashboard
- Install the Stripe Connect - Marketplace plugin
Note: in steps 2-4 I’m putting my API keys into the live section of the Stripe Connect Plugin. If you want to test the plugin out in dev mode (which I recommend you do!), follow the same format and put your test keys into the "- dev. " fields
- Insert your Stripe Secret API key into the “API Key” input box of the plugin page. IMPORTANT: ensure you have “Bearer” before the actual key itself in the input box. So your key should be like this: “Bearer sk_test_xxxx”
- Insert your Stripe Publishable key into the “Stripe Publishable Key” input box of the plugin page. It should begin with “pk_”.
- Insert your Stripe Secret key into the “Stripe Publishable Key” input box of the plugin page. It should begin with “sk_”.
- Add a “Stripe Account ID” field to the user data type in your database (type text)
- Trigger the “Stripe Connect - Create Express Account” workflow action. This will typically be triggered as part of a merchant sign-up flow or via a button on the merchant dashboard. In this example, we’re signing the user up as a seller and then triggering the “Stripe Connect - Create Express Account” action.
- Select the country for your user, their email and the payout interval (how often they get paid out via Stripe). All of this can be done dynamically. In this example, we’re taking the current user’s email and using that.
- Add a workflow action that “makes changes to the current user”. Add the Stripe Account ID created in Step 1 to the user’s Stripe Account ID field.
- Add the “Stripe Connect - Create Onboarding Link” action to the workflow. This is going to create a link that we’ll navigate to in the next step. The “Account” is going to be Stripe Account ID we’ve saved down the current user. The Refresh URL is the URL the user will be redirected to if the account link has expired or is otherwise invalid. In this example, we’re adding a “?refresh=true” parameter to the end of the homepage URL of our demo app. Similarly the “Return URL” is the URL the user is directed to after successfully going through the Stripe onboarding process. We’ll add a “?return=true” parameter to the homepage URL for when the user successfully completes their onboarding process.
- Navigate to the link we just created using the “Open an external website” action.
- Now when a user signs up to your bubble app, they’ll be redirected to the Stripe onboarding portal.
Note: the demo app I’m using below is called Qualified
-
Once your user successfully the onboarding process they’ll be redirected to the “Return URL” you specified in step 9. Your users will only be able to accept charges via Stripe if they’ve filled out all the necessary information on the Stripe onboarding portal. Sometimes they won’t do this because… well people don’t always do what they’re supposed to
With that in mind I suggest you do the following… -
Create a field for users in your database called “Charges enabled?”
- Go back to the “Return URL” of your app and add a workflow action on page load that uses the “Stripe Connect - Retrieve Account Details” API call that comes with the plugin. Use this action to change the “Charges enabled?” for the user to “yes” if they have indeed given all the relevant information to Stripe.
The final step in action:
Other resources:
- Stripe Connect - Marketplace plugin
- Demo app on how to use Stripe Connect - Marketplace plugin
- Detailed video tutorial on how to use plugin
