Forum Academy Marketplace Showcase Pricing Features

10-min guide to set up Stripe Connect for your marketplace

Hello Bubblers!

Having built many bubble apps, I still feel like I know nothing about Stripe. There are many great resources but it is never enough because Stripe is really powerful! So I decided to write a thread and share my experience of integrating Stripe. Hope this helps someone in the future. And if you have any suggestions, please let me know.

My first documentation is about Stripe connect and subscription. Our team just built an app that allows users to create their own subscription plans. It has the following features:

  • onboarding sellers with Stripe Connect
  • create product and price with APIs (subscription plan)
  • create a checkout session
  • webhooks to receive messages when a subscription is paid

If you are building a subscription platform like Patreon or SubStack, this guide may help.

Onboarding sellers

There are three types of seller accounts.

https://stripe.com/docs/connect/accounts#choosing-approach

We decided to use the Standard Account this time. There are at least two ways to create a standard account: With APIs, or with OAuth Connect. We choose OAuth Connect because it enables users to connect their existing Stripe accounts. Basically, we only need to create a button that links to Stripe and a redirect page to redirect the users when they have created the seller account.

Step 1: Enable Stripe Connect on the settings page

To create a Standard Account, we need to navigate our users to a Stripe onboarding page. Stripe will handle the onboarding and identity verification processes.

Before onboarding your sellers, make sure you have set up and activated your Stripe account. Go to your Stripe dashboard > Settings > Connect > Settings. Customize the visual appearance of the onboarding page.

Remember to enable OAuth flow and add a redirect link. Create an empty bubble page to be the redirect link. We will add workflows to this page later.


Copy the client id. We will use the id to create an URL for the OAuth flow.

Client ID example: ca_HUgW0aGkpo4hR9y4qJmCTnVd0vozGvjV

Step 2: Create an URL for the OAuth Connect

https://connect.stripe.com/oauth/authorize?response_type=code&client_id={{CLIENT_ID}}&scope=read_write&redirect_uri=https://sub2.example.com

Parameters:

  • client_id: Your Stripe Connect client id. Find your client id here: https://dashboard.stripe.com/settings/connect
  • redirect_uri: The URL must be added in step 1. If no redirect_uri is specified, Stripe uses the first URI configured in your platform settings.

Create a button with the workflow action “Open an external website”. Add the URL into the destination field.

Now we should be able to see the onboarding page when we click the button.

Step 3: Add workflows to the redirect page

When users completed the onboarding flow, Stripe redirects them back to our page. We can add a “page is loaded” workflow to complete the onboarding flow. We will need an API to create an account and get the account ID.


POST https://connect.stripe.com/oauth/token

Headers:

  • Authorization: Bearer <client_secret>.

Parameters:

  • grant_type: “authorization_code”
  • code: Get “code” from page URL. Stripe will add parameters to our redirect URL. We can get the code by the dynamic expression “Get data from page URL”

Response:

Parameters:

  • stripe_user_id: The unique ID of the seller account.

The Standard account has been successfully created. Remember to save the seller ID. We will use the ID to make requests on behalf of the seller. Next, we are going to create a subscription plan for our users with APIs.

2 Likes

I will keep updating this thread. If you have any problems or difficulties with Stripe, feel free to leave a comment. I’ll pick some ideas here and write a step-by-step guide for each. Cheers!

Hugo
Developer @ Nalfe

60+ Bubble Templates
10+ Bubble Plugins
Bubble Component Library & Extension
No-code Development Subscriptions
No-code Podcast

1 Like

Hello - I am following these instructions (very helpful for a newbie also trying to figure out Stripe).

1 question as i follow the guide - Where do I find the authorisation code?

Hello @amy2,

When the user completed the onboarding flow, Stripe redirects the user to your redirect URL and adds a parameter “code” to the URL. (e.g. www.yourdomain.com/stripe?code=ac_XXXXXX). You can get the code by a dynamic expression “Get data from URL”.

Hi was just wondering if you could give me a few pointers having some issues with payments on my site. I have added all the necessary api keys on both stripe and bubble but it is giving me this message Stripe error: You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. ‘Authorization: Bearer YOUR_SECRET_KEY’). See Stripe API reference – curl for details, or we can help at https://support.stripe.com/. If you could give me a few pointers on what to do to fix this I would be eternally grateful. Thank you so much!

Hi @fosterjulian475, which request gives you the error message? Can you share your Bubble API connector setup as well? Thanks!

Hi @hugolee i having issue with transfer to seller flow,

I use stripe plugin by bubble so far,
And what i want to achieve is have payment like marketplace.

So i build on demand app (online consultation), and student can hire mentor through my app, so far charge the user(student) is not problem, but when my app want to transfer a mentor it always failed,

My question

  1. When in the test mode, do we need our seller account to enable? So the payment will work? So far my seller account in test mode is restricted status

  2. How i display a transaction history for seller so they know their transaction.

Can you lead me the right path? Thank you in advance,

Hey @kerjakansemua.work,

  1. I am not really sure what the problem is, but yes, you may want to ensure the seller account is enabled. One way to figure it out is to check the error log. You may see an error message there telling you what the problem is.
  2. You can retrieve a transaction with an API: Stripe API reference – Retrieve a transaction – curl. You may also want to set up a webhook so that Stripe will notify you when there is a new transaction

hi @hugolee so i have this

can you lead me what data to call here?

  1. on available earning i want to show the total amount of seller get,
  2. on transaction history contain a payout transaction seller, so the idea is like upwork transaction history.

doknow much about api :sweat_smile: