This page will walk you through integrating both the Pricing Page and Customer Portal with Bubble. Without configuring Webhooks this will save you many hours compared to other methods. This really is the fastest way to integrate Stripe with Bubble.io.
We’ll go through:
- Installing the PriceWell Bubble Plugin
- Using the Pricing Page and Customer Portal components
- Sync subscription date from Stripe to Bubble
- Displaying the Customer Portal once a user has a subscription.
Install the PriceWell Bubble Plugin
Go to the PriceWell Bubble Plugin page and click “Install Plugin”
Step 1: Create a Pricing Page and Customer Portal
See detailed instructions below:
Step 2: Embed the Pricing Page in Bubble
Open the page you want to embed your pricing (this is usually a page where the user is already logged in like a Billing Admin page).
Add a new Pricing Table element.
If you can’t see this element, make sure you have the PriceWell plugin installed.
Copy the Pricing Page ID from the Pricing Page you created in Step 1.
Paste the Pricing Page ID into the Pricing Page Id field.
If you know the customers email address or Stripe Customer Id, you can pass it in as a parameter. This will pre-fill the email field on the pricing page.
You can also pre-apply coupon codes here by passing in the coupon code as a parameter.
Sync subscription date from Stripe to Bubble
In your Bubble App go to Data -> Data types -> User
Create the following new fields on the User data type:
|⚠️ You must create all the fields or the integration won’t work|
Now go to Data -> Privacy and give “Everyone else” access to the new Stripe fields and the email field. They must also be able to “Find this in searches” and “Modify via API”. This is so that the PriceWell plugin can update the user’s subscription details for you.
Now go to Settings -> API
- Enable Data API
- User (this gives us access to the user data fields that you allow in the next step)
- Use field display instead of ID for key names
|⚠️ Be sure to check
Now go to Settings -> API -> Generate new API token. Copy the API token
Go to PriceWell.io, login and click Integrations -> Bubble Integration.
Paste the API token into the Bubble API Token field. Then enter you Bubble App Name and click Save. You bubble app name will look something like this
If the integration fails to save, double check your API token and app name.
** ✨ Stripe subscription changes will appear in Bubble automatically ✨**
|⚠️ Changes in your Stripe Test Mode will go to /version-test in Bubble. Live Stripe subscriptions will go to you live Bubble app|
How to make the Customer Portal show when the User has a Subscription
Head back to the page in bubble that has the Pricing Table element on it.
Now add a Conditional step so that the element is only visible when the Current User’s Stripe Subscription Status is not “active”.
Copy the Customer Portal Id from the Customer Portal (on PriceWell.io) you created in Step 1.
Add a Customer Portal element to the page and paste the Customer Portal Id into the Customer Portal Id field. You should also pass in the Stripe Customer Id or email as a parameter (Current User’s Stripe Id).
Add a conditional step so that the Customer Portal is only visible when the Current User’s Stripe Subscription Status is “active”.