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.
| Fact | Value |
|---|---|
| Tool | Bubble |
| Difficulty | Beginner |
| Time required | 30-40 min |
| Compatibility | All Bubble plans (Stripe required for payments) |
| Last updated | March 2026 |
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
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
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
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
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
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
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