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

Tips
1

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.

Untitled (1)
Untitled (1)759×133 9.45 KB

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.

InkedUntitled_LI
InkedUntitled_LI1143×548 65.8 KB

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”
    Untitled (2)
    Untitled (2)1131×345 24.8 KB

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.

3 Likes
2

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
3

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?

4

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”.

1 Like
5

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!

6

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

7

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,

8

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
9

hi @hugolee so i have this

Screenshot_26
Screenshot_261155×641 25.4 KB

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:

10

Maybe you could make it simple by doing this with bubble workflows. For example, create a data type “transaction” and create a new “transaction” with the data you need when there is a successful payment.

11

hi @hugolee apologies for late reply, i was struglling to stripe. so far so good i can retrieve the transaction,

last question, do you have to wait a few days to payout even it on the test mode?

through the plugin I tried to transfer to seller but the notification said my balance was insufficient even though I was in test mode. any ideas?

thank you very much for your help.

12

Hi @kerjakansemua.work,

Do you mean transferring funds from your account to a seller account or initiating a payout to the seller’s bank account? You have to make sure the account has enough funds. You can log in to the Stripe account dashboard (Stripe Login | Sign in to the Stripe Dashboard) and check the remaining funds in the accounts.

13

yes, payout to the seller’s bank account.
so here is the issue im facing.

Screenshot_31
Screenshot_31631×749 23.3 KB

so, I want sellers to have the ability to withdraw their own funds to their bank account by providing this withdraw/payout button.
but when clicked, the funds that are pulled are mine (platform) not the seller’s funds.
so i withdraw my own funds from my stripe account.

Screenshot_32

14

Instead of creating a payout for your account, you have to create a payout on behalf of your seller. To do so, add a header to the API: 'Stripe-Account: {{CONNECTED_ACCOUNT_ID}}' where {{CONNECTED_ACCOUNT_ID}} is the stripe_user_id returned by the Get Account ID API (starts with acct_).

15

Finally :sweat_smile: thank you. its work
you’re awesome.

thanks in advance @hugolee.

1 Like
16

Nice tutorial. More tips on how to setup Stripe Connect would be nice as their Docs sometimes aren’t enough and their support doesn’t help with questions.

Right now I’m struggling to understand in the logs if my test purchases are registering anything about the connected accounts as I made some test purchases and the value only appears in main account but nothing in the client Standard account dashboard.

17

Hi ! thanks a lot for this tips. However I still can’t manage to have the seller account id of my current user.
When I press the button to start the worflow, it is writtent that the authorization code expired.

In your example you write an authorization code starting as this : as_LYMkXXXX…(etc). I have copy past my own authorization code from URL (which come after being redirected) to the API in the same field as you (using API connector). But it does not work. Any help ?

18

Hi @fontainefevre,

Have you successfully initialized the API call? The authorization code is short-lived, and can be used only once, so you may want to trigger the API immediately after the redirect.

20

Hi,
Have you ever experienced this type of stripe error ‘In order to use Checkout, you must set an account or business name with Stripe Login | Sign in to the Stripe Dashboard’ and if so did you manage to solve it? The problem is that buyers see this notification, once they press the button “pay”.