Build a membership site in Bubble with free and paid tiers, Stripe-powered subscriptions, gated content pages, and member-only areas. This tutorial covers the data architecture for membership levels, Stripe Checkout integration for recurring payments, content access rules using conditionals and privacy rules, and a member dashboard.
Overview: Membership Sites in Bubble
A membership site gates content behind subscription tiers — free users see limited content while paying members access premium material. This tutorial builds the complete membership infrastructure including tier management, Stripe billing, content access rules, and a member portal.
Prerequisites
- A Bubble account with user authentication
- A Stripe account (test mode works for development)
- The Stripe plugin installed in Bubble
- Content ready to gate behind membership tiers
Step-by-step guide
Design the membership data model
Design the membership data model
Create a 'MembershipTier' Option Set with options: Free, Basic ($9/mo), Premium ($29/mo). Add attributes: price (number), stripe_price_id (text — from Stripe dashboard), features (text — comma-separated feature list). On the User data type, add fields: membership_tier (MembershipTier, default: Free), stripe_customer_id (text), subscription_active (yes/no, default: no), subscription_end_date (date).
Expected result: Membership tiers and user subscription fields are set up.
Set up Stripe products and prices
Set up Stripe products and prices
In your Stripe dashboard, create Products for each paid tier (Basic, Premium). Add a recurring Price to each product matching your pricing. Copy each Price ID (starts with price_). Paste these into the stripe_price_id attribute on your MembershipTier Option Set. Install the Stripe plugin in Bubble and configure it with your Stripe publishable and secret keys.
Expected result: Stripe products and prices are created and linked to your Bubble membership tiers.
Build the pricing page with Stripe Checkout
Build the pricing page with Stripe Checkout
Create a 'pricing' page displaying all tiers in a Row container. For each tier, show the name, price, features list, and a 'Subscribe' button. The Subscribe button workflow: Create a Stripe Checkout Session (via API Connector or Stripe plugin) with the tier's stripe_price_id, success_url = your success page, cancel_url = pricing page. Redirect the user to the Checkout Session URL.
Expected result: Users can select a tier and are redirected to Stripe Checkout to enter payment details.
Handle successful payment with webhooks
Handle successful payment with webhooks
Create a backend workflow called 'stripe-webhook' that accepts Stripe webhook events. In the Stripe dashboard, add a webhook endpoint pointing to your Bubble API URL. Listen for checkout.session.completed events. When received: find the User by Stripe customer ID, update their membership_tier, set subscription_active = yes, and set subscription_end_date.
Pro tip: Always use webhooks rather than redirect-page logic to confirm payments — redirects can fail but webhooks are reliable.
Expected result: Successful payments automatically upgrade the user's membership tier.
Gate content based on membership level
Gate content based on membership level
On content pages, add conditionals that check the user's tier. For a premium article page: When Current User's membership_tier is Free → hide the content Group, show a 'Subscribe to read' message. Add privacy rules on content Data Types: only return premium content in searches when the user's tier matches. This double-gating (frontend conditional + backend privacy rule) ensures content is truly protected.
Expected result: Free users see teaser content with upgrade prompts. Paid members see full content.
Build the member dashboard
Build the member dashboard
Create a 'member-dashboard' page showing: current tier and subscription status, next billing date, a list of accessible content, and account settings. Add a 'Manage Subscription' button that opens the Stripe Customer Portal (create a portal session via API Connector and redirect). The portal lets members upgrade, downgrade, or cancel.
Expected result: Members can view their subscription details and manage billing through Stripe's portal.
Complete working example
1MEMBERSHIP SITE — ARCHITECTURE SUMMARY2========================================34OPTION SET: MembershipTier5 Free (price: 0, stripe_price_id: none)6 Basic (price: 900, stripe_price_id: price_xxx)7 Premium (price: 2900, stripe_price_id: price_yyy)89USER FIELDS:10 membership_tier (MembershipTier, default: Free)11 stripe_customer_id (text)12 subscription_active (yes/no)13 subscription_end_date (date)1415PAGES:16 pricing — Tier comparison + Subscribe buttons17 checkout-success — Confirmation page after payment18 member-dashboard — Account, subscription, content access19 [content pages] — Gated based on membership tier2021WORKFLOWS:22 Subscribe: Create Stripe Checkout Session → redirect to Stripe23 Webhook: checkout.session.completed → update User tier24 Manage: Create Stripe Portal Session → redirect to portal25 Cancel: Stripe webhook subscription.deleted → set tier to Free2627CONTENT GATING:28 Frontend: Conditional visibility based on membership_tier29 Backend: Privacy rules restrict content searches by tier3031STRIPE WEBHOOKS:32 checkout.session.completed → activate subscription33 customer.subscription.updated → change tier34 customer.subscription.deleted → downgrade to FreeCommon mistakes when building a membership site in Bubble
Why it's a problem: Using redirect page logic instead of webhooks to confirm payments
How to avoid: Always use Stripe webhooks to update membership status — they fire reliably regardless of user behavior
Why it's a problem: Only gating content with frontend conditionals
How to avoid: Combine frontend conditionals with backend privacy rules that restrict database searches by tier
Why it's a problem: Not handling subscription cancellations
How to avoid: Listen for customer.subscription.deleted webhook and downgrade the user's tier to Free
Best practices
- Use Stripe webhooks for all subscription state changes, not redirect-page logic
- Gate content with both frontend conditionals and backend privacy rules
- Store Stripe customer ID on the User record for webhook matching
- Use the Stripe Customer Portal for subscription management instead of building custom UI
- Show a content teaser to free users with an upgrade CTA for better conversion
- Handle all webhook events: completed, updated, deleted, past_due
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a membership site in Bubble.io with free and premium tiers, Stripe subscriptions, gated content, and a member dashboard. Can you design the data model and outline the key workflows?
Build a membership site with three tiers (Free, Basic, Premium). Set up Stripe subscription checkout, webhook handling for payment confirmation, content gating by tier, and a member dashboard with subscription management.
Frequently asked questions
Can I offer a free trial?
Yes. In Stripe, add a trial period to your Price. The user is not charged until the trial ends. Handle the trial_end webhook to update the user's status.
How do I handle failed payments?
Listen for the invoice.payment_failed Stripe webhook. Send the user an email asking them to update their payment method. After a grace period, downgrade their tier.
Can I have more than three membership tiers?
Yes. Add as many options as needed to the MembershipTier Option Set. Create corresponding Stripe Products and Prices for each.
How do I let users switch between tiers?
Use the Stripe Customer Portal which handles upgrades and downgrades automatically, including prorated billing.
Is Stripe required or can I use PayPal?
Stripe is the most common choice for Bubble subscriptions. PayPal can work via API Connector but has less plugin support.
Can RapidDev build a membership platform?
Yes. RapidDev builds membership platforms with subscription management, content gating, member portals, and analytics dashboards.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation