You can set up subscription plans in Bubble by connecting Stripe via the Bubble Stripe plugin. Create subscription products and pricing tiers in the Stripe Dashboard, then use Bubble workflows to redirect users to Stripe Checkout for payment. Handle webhooks to update user plan status in your database and gate features based on the user's active subscription level.
Set Up Stripe Subscription Plans in Your Bubble App
This tutorial walks you through integrating Stripe subscriptions into your Bubble app. You will create pricing tiers, implement the checkout flow, handle recurring payment events, and restrict features based on plan level. This is essential for any SaaS app that charges monthly or annual fees.
Prerequisites
- A Bubble account with an existing app that has user authentication
- A Stripe account (free to create at stripe.com)
- The Bubble Stripe plugin installed
- Basic understanding of Bubble workflows and Data Types
Step-by-step guide
Create Subscription Products in Stripe
Create Subscription Products in Stripe
Log into the Stripe Dashboard (dashboard.stripe.com). Make sure you are in Test mode (toggle at the top). Go to Products → '+ Add product'. Create a product for each plan tier — for example, 'Basic Plan', 'Pro Plan', and 'Enterprise Plan'. For each product, add a Price: select 'Recurring', set the amount (e.g., $9/month, $29/month, $99/month), and choose the billing interval (monthly or yearly). Copy the Price ID (starts with price_) for each tier — you will need these in Bubble.
Expected result: Three subscription products exist in Stripe with monthly pricing, and you have the Price IDs for each.
Install and Configure the Stripe Plugin in Bubble
Install and Configure the Stripe Plugin in Bubble
In your Bubble editor, go to Plugins → '+ Add plugins' → search 'Stripe' → install the official Bubble Stripe plugin. After installation, click on the plugin to configure it. Enter your Stripe Test Publishable Key (starts with pk_test_) and Test Secret Key (starts with sk_test_). You find these in the Stripe Dashboard under Developers → API keys. Also add your Stripe Webhook Signing Secret (you will create this in a later step).
Pro tip: Start with Test keys for development. When ready to go live, switch to Live keys. Keep your Secret Key private — never expose it in the frontend.
Expected result: The Stripe plugin is installed and configured with your test API keys.
Add Plan Fields to the User Data Type
Add Plan Fields to the User Data Type
Go to Data tab → User data type. Add the following fields: 'stripe_customer_id' (text) — stores the Stripe Customer ID, 'subscription_plan' (text) — stores the current plan name (free, basic, pro, enterprise), 'subscription_status' (text) — stores the Stripe status (active, past_due, canceled), and 'subscription_id' (text) — stores the Stripe Subscription ID for management. Set default values: subscription_plan = 'free', subscription_status = 'none'.
Expected result: The User data type has four new fields for tracking Stripe subscription data.
Build the Pricing Page and Checkout Flow
Build the Pricing Page and Checkout Flow
Create a pricing page with three plan cards. Each card shows the plan name, price, features list, and a 'Subscribe' button. For each Subscribe button, create a workflow: When 'Subscribe Basic' is clicked → use the Stripe plugin's 'Checkout (Subscription)' action. Set the Price ID to the Stripe Price ID you copied earlier. Set the Customer Email to Current User's email. Set Success URL to your app's success page and Cancel URL to the pricing page. This redirects the user to Stripe's hosted Checkout page where they enter payment details.
Expected result: Clicking a Subscribe button redirects the user to Stripe Checkout with the correct plan and price pre-selected.
Set Up Stripe Webhooks for Payment Events
Set Up Stripe Webhooks for Payment Events
In the Stripe Dashboard, go to Developers → Webhooks → '+ Add endpoint'. Set the URL to your Bubble app's webhook endpoint (provided by the Stripe plugin — check the plugin documentation for the exact URL format). Select the events to listen to: 'checkout.session.completed', 'customer.subscription.updated', 'customer.subscription.deleted', and 'invoice.payment_failed'. Copy the Webhook Signing Secret and paste it into the Stripe plugin configuration in Bubble. Create a backend workflow in Bubble that triggers on the Stripe webhook event and updates the User's subscription fields accordingly.
Pro tip: The checkout.session.completed event fires when a user completes payment. Use it to update the User's subscription_plan, stripe_customer_id, and subscription_status to 'active'.
Expected result: Stripe sends webhook events to your Bubble app, and backend workflows update the user's subscription status automatically.
Gate Features Based on Subscription Plan
Gate Features Based on Subscription Plan
Now that users have a subscription_plan field, you can restrict access throughout your app. On premium feature pages, add a 'Page is loaded' workflow with the condition 'Current User's subscription_plan is free' → Go to page 'pricing' (redirect free users). For individual elements, use conditional visibility: set a premium feature group to be visible only when 'Current User's subscription_plan is pro or enterprise'. For workflow actions, add 'Only when' conditions that check the plan level before allowing the action.
Expected result: Free users are redirected from premium pages and cannot see or use premium features.
Complete working example
1DATA TYPE CHANGES:2- User (modified)3 - stripe_customer_id (text)4 - subscription_plan (text, default: "free")5 - subscription_status (text, default: "none")6 - subscription_id (text)78STRIPE DASHBOARD SETUP:9- Product: Basic Plan → Price: $9/month (price_basic_xxx)10- Product: Pro Plan → Price: $29/month (price_pro_xxx)11- Product: Enterprise Plan → Price: $99/month (price_enterprise_xxx)12- Webhook endpoint: [your-app-url]/webhook/stripe13- Events: checkout.session.completed, customer.subscription.updated,14 customer.subscription.deleted, invoice.payment_failed1516PAGE: pricing17- Group BasicCard: name, $9/mo, features list, Button "Subscribe Basic"18- Group ProCard: name, $29/mo, features list, Button "Subscribe Pro"19- Group EnterpriseCard: name, $99/mo, features list, Button "Subscribe Enterprise"2021WORKFLOWS:221. When Subscribe Basic clicked23 → Stripe: Checkout (Subscription)24 Price ID: price_basic_xxx25 Customer Email: Current User's email26 Success URL: [app-url]/subscription-success27 Cancel URL: [app-url]/pricing28292. When Subscribe Pro clicked → same pattern with price_pro_xxx303. When Subscribe Enterprise clicked → same pattern with price_enterprise_xxx3132BACKEND WORKFLOWS (triggered by Stripe webhooks):334. On checkout.session.completed34 → Find User by email = event's customer_email35 → Make changes: stripe_customer_id = event's customer_id36 → Make changes: subscription_plan = map Price ID to plan name37 → Make changes: subscription_status = "active"38 → Make changes: subscription_id = event's subscription_id39405. On customer.subscription.updated41 → Find User by stripe_customer_id42 → Update subscription_status based on event status43 → Update subscription_plan if plan changed44456. On customer.subscription.deleted46 → Find User by stripe_customer_id47 → Set subscription_plan = "free"48 → Set subscription_status = "canceled"49507. On invoice.payment_failed51 → Find User by stripe_customer_id52 → Set subscription_status = "past_due"53 → Send email notification to user5455FEATURE GATING:56- Page load: If subscription_plan = "free" → redirect to pricing57- Element visibility: Visible when subscription_plan is not "free"58- Workflow actions: Only when subscription_plan = "pro" or "enterprise"Common mistakes when setting up subscription plans in Bubble
Why it's a problem: Using Stripe Live keys during development
How to avoid: Always use Test keys (pk_test_, sk_test_) during development. Switch to Live keys only when you are ready to launch.
Why it's a problem: Not handling the 'past_due' subscription status
How to avoid: Check for subscription_status = 'active' (not just subscription_plan != 'free') when gating premium features.
Why it's a problem: Hardcoding plan features instead of using a flexible data structure
How to avoid: Create an Option Set called 'Plan' with attributes for each feature (e.g., max_projects, can_export, can_invite). Check features against the Option Set rather than hardcoded plan names.
Best practices
- Use Stripe's hosted Checkout page rather than building a custom payment form — it handles PCI compliance, card validation, and 3D Secure automatically.
- Always verify subscription status via webhooks, not just after checkout redirect — the redirect can fail while payment succeeds.
- Create an Option Set for plan tiers with feature attributes to make feature gating flexible and maintainable.
- Handle the 'past_due' and 'canceled' statuses gracefully with warning messages and grace periods.
- Add a subscription management page where users can view their plan, update payment method, and cancel.
- Test the complete lifecycle: subscribe, upgrade, downgrade, cancel, re-subscribe, and failed payment.
- Send email notifications for subscription events: welcome, payment failed, subscription canceled, plan changed.
- Use Stripe's Customer Portal for self-service billing management to reduce support burden.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a SaaS app in Bubble.io and need to set up Stripe subscription plans. I want three tiers (Basic $9/mo, Pro $29/mo, Enterprise $99/mo) with Stripe Checkout, webhooks for payment events, and feature gating based on plan. How do I structure the data types, workflows, and Stripe configuration?
Set up Stripe subscription integration with three plans. Add stripe_customer_id, subscription_plan, subscription_status fields to User. Create a pricing page with Stripe Checkout buttons. Handle webhooks to update user subscription data and gate premium features.
Frequently asked questions
Can I offer both monthly and annual billing?
Yes. Create two Prices per Product in Stripe — one monthly and one annual (usually with a discount). Add a toggle on your pricing page that switches between monthly and annual Price IDs in the checkout workflow.
How do I handle plan upgrades and downgrades?
Use the Stripe plugin's 'Update Subscription' action to change the Price ID. Stripe automatically handles proration — charging the difference for upgrades or crediting for downgrades.
What happens when a user's payment fails?
Stripe retries failed payments according to your retry schedule (configurable in Stripe settings). The subscription enters 'past_due' status. Your webhook handler should update the user's status and show a warning banner prompting them to update their payment method.
Can I offer a free trial before charging?
Yes. In the Stripe Price settings, add a trial period (e.g., 14 days). Users complete Checkout but are not charged until the trial ends. Track the trial end date and send reminder emails.
How do I let users cancel their subscription?
Add a 'Cancel Subscription' button in account settings that calls the Stripe plugin's cancel action with the user's subscription_id. You can cancel immediately or at period end (user keeps access until current billing period expires).
Should I build custom billing or use Stripe's Customer Portal?
For most apps, Stripe's Customer Portal handles plan changes, payment method updates, invoice history, and cancellation with minimal setup. For highly customized billing experiences, teams like RapidDev can build tailored subscription management flows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation