Stripe: Force Bubble to Navigate User to Stripe

I have subscription-based app - when my users go from the free plan to a paid plan, the user gets taken to a Stripe page to complete the transaction. However, if a user already has a lower-level paid subscription and wants to upgrade a higher-level paid subscription, Bubble is not directing the user to Stripe to complete the transaction, but it’s making the switch right then and there, which doesn’t seem like good practice, IMO. Is there a special setting that forces Bubble to direct users to Stripe at all times?

1 Like

Use stripe billing management portal api in stripe.js plugin. Have them manage their entire plan from there if that’s the flow you want.

Bubbles native stripe plugin is very under featured.

@calicass83 :wave:

You can create a Stripe Customer Portal using the API Connector like this:

This opens up Stripe so they can have a better user experience when updating, canceling, or resuming their plans. I use this in our eLearning Hub and I think it’s a great built in experience. :blush:

Here is an example, this will return a URL for you so that you can use to go to their customer portal.


Thank you for your response - the customer portal sounds promising. However, I am not very familiar with cURL and what code goes where. Do you know of a detailed guide or video that can explain this?

The image above is what your API connector should look like. Then in the workflow, you would pass along the user’s customer id. Let me see if I can set you up with an example.

1 Like

I personally would run this workflow on the backend through an API connection and then just return the URL, but with this demo account I don’t have access to the backend workflows.

Here is an example you can check out:

Editor: testApp42wCleanDB | Bubble Editor

Out of interest why via backend instead of just using the API connector?

@georgecollier Just to have extra security and make sure no one can access the api key. :blush: Maybe I’m too paranoid. :man_shrugging:

What value do you put here so that it dynamically inputs the current user’s ID?

I am also curious what this portion does - does making it ‘none or self-handled’ make the connection less secure?

Hey @calicass83

This would be the Current User’s Stripe Customer ID.

I am pretty sure that this is just Bubble trying to make it easier for No-Code. We handle the Authentication with a bearer token in the header. Sometimes there are bugs in the way they handle certain Authentication that way.

You could choose ‘private key in header’ if you want, then just put the bearer key in that spot instead. Either way, it’s the same thing. :blush:

Hope that helps.

Ok, I got that part in the actual workflow. What value should I put here in the API connector terminal? If I put a specific user here and run the workflow, it’s pulling this specific user’s ID.

Once you have the API connector Initialized, you can clear that data out so it isn’t used by accident. Then you can have a condition to make sure that the user already has a customer ID before trying to access the portal. Does that make sense?

So, if I leave it blank or remove the parameter altogether, I get this error when initializing:

You don’t need to re-initialize if you are just removing the cus_PSQ... value. Just don’t press the button again after you delete it. Does that make sense? :blush:

Yes, but when I remove the customer id (and I don’t re-initialize) and try to run the workflow, I get this:

this is what I have in the terminal:

Because you need to pass the Current user’s Stripe ID as a parameter in the API call.

I figured it out - my customer’s stripe ID had not been saved to their profile. I added that and now it works. :sweat_smile:

1 Like

I would put a condition on there to make sure they don’t get that error. Just to be safe. :blush:

Got it. That makes sense. Thank you for your help!

On a related note - do you know how to customize the stripe customer portal to give different users access to different plans? :pray::pray::pray:

Currently, in stripe it looks like I can choose all the plans I want users to be able to switch to, but there’s no easy way to specify which users are allowed to access which plans. I think this needs to be done on the backend, but this is all new to me and after hours of googling, am not finding much info about how to actually set it up.