The Ultimate Guide to Adding & Managing Stripe Subscription Payments in Bubble.io

6th of March, 2025

By the end of this blog, you’ll learn how to integrate and manage Stripe subscription payments in your Bubble.io app—all without writing a single line of code. In this comprehensive guide, we’ll walk you through everything from setting up your Stripe account and products to configuring workflows, creating a dynamic paywall, and handling real-time subscription updates with webhooks.

1. Setting Up Your Stripe Account and Products

The first step is to establish your Stripe account and create the subscription products you’ll offer in your app.

Create Your Subscription Products

• Log in to Stripe: Start by signing up or logging into your Stripe account.
• Navigate to Products: Once in your dashboard, click on the Products tab.
• Add New Products: For example, create a “Monthly Magic” product at £40/month and an “Annual Magic” product at £400/year.
  Remember to note the unique product IDs provided by Stripe—these will be used later in your Bubble workflows.

2. Installing and Configuring the Stripe Plugins in Bubble.io

With your Stripe account set up, the next step is to integrate Stripe with Bubble using plugins.

Add the Required Plugins

• Open Your Bubble App: Go to the Plugins section in the Bubble editor.
• Install Stripe Plugins: Search for and install:
  • The official Stripe plugin by Bubble
  • The Stripe Customer Portal plugin
• Configure API Keys: In your Stripe dashboard, find your test API keys (publishable key, secret key, and client ID). Paste these into the respective fields in your Bubble plugin settings.
  Note: Ensure you are using the latest Stripe Checkout version (version 3 is recommended).

3. Structuring Your Bubble Database for Payment Management

A robust database is essential to track subscriptions accurately. We recommend creating a dedicated “Payments” data type.

Recommended Fields for the Payments Table

• Last Payment Date: (Date) – Captures the start date of the current subscription period.
• Payment Frequency: (Text) – Indicates whether the plan is monthly or annual.
• Product ID: (Text) – Stores the Stripe product identifier.
• Stripe Customer ID: (Text) – Links the user to their Stripe customer record.
• Subscription End Date: (Date) – Marks when the current subscription period ends.
• Status: (Text) – Reflects whether the subscription is active, canceled, or expired.

4. Building the Subscription Workflow

Creating a smooth subscription process involves both a user-friendly interface and backend workflows.

Design the Subscription Page

• User Interface: Create a subscription page with a dropdown menu for selecting either a monthly or annual plan.
• Subscribe Button: Add a button that triggers the subscription workflow based on the selected plan.

Configure the Workflow

1. Initiate Subscription: When the subscribe button is clicked, run a workflow that:
   • Checks the dropdown value
   • Calls the appropriate Stripe action to subscribe the user to the selected plan
   • Passes the Stripe product ID and (optionally) sets up a trial period
2. Record Payment in Database: If Stripe returns a successful response:
   • Create a new entry in the Payments table with fields populated from Stripe (e.g., current period start and end dates, payment frequency, and status)
3. Navigate Users: Upon successful subscription, redirect the user to the main app page. If the payment fails, keep them on the subscription page.

5. Managing User Access Through Login Logic

Tailor your app experience based on subscription status by checking the Payments table when users log in.

Implement Conditional Navigation on Login

• Login Workflow: When a user logs in, add a conditional step:
  • If Active Subscription Found: Navigate the user to the main application page.
  • If No Active Subscription: Redirect them to the subscription page.

This ensures that only active subscribers have full access to your app.

6. Enabling Subscription Management with the Stripe Customer Portal

Allow your users to update or cancel their subscriptions easily through the Stripe Customer Portal.

Set Up the Customer Portal

• Configure Portal Settings in Stripe: Customize your portal to match your branding. Ensure you allow users to cancel or update their subscription.
• Create a “Manage Subscription” Button: In your Bubble app, add a button that opens the customer portal via a dynamic URL.
• Handle Plan Changes: Ensure your workflow supports upgrades or downgrades by linking the Stripe product IDs to the corresponding plan changes in your app.

7. Integrating Webhooks for Real-Time Subscription Updates

To keep your Bubble database in sync with Stripe events (like cancellations or plan changes), set up webhooks and backend workflows.

Setting Up Webhooks

1. Create an API Workflow in Bubble: In the Bubble backend workflows section, create a new API endpoint (e.g., “stripe-webhook”) that accepts POST requests from Stripe.
2. Expose the API Endpoint: Make sure it’s public and set to detect request data.
3. Configure Stripe Webhooks: In your Stripe dashboard, add a webhook endpoint using the API URL from Bubble. Select relevant events such as:
   • Customer Subscription Deleted
   • Customer Subscription Updated
4. Update the Payments Table: In the API workflow, map the incoming Stripe data (e.g., current period start/end, plan interval, product ID, and subscription status) to update the corresponding record in your Payments table.

8. Testing Your Integration

Before going live, rigorously test every scenario:

• New Subscriptions: Test signing up for both monthly and annual plans.
• Plan Changes: Verify that upgrading/downgrading updates both Stripe and your Bubble database.
• Cancellations: Ensure that when a subscription is canceled via the customer portal, the change reflects in your app.
• Real-Time Updates: Use test mode in Stripe to simulate webhook events and check the updates in Bubble.

9. Conclusion

Integrating Stripe subscription payments into your Bubble.io app is a powerful way to monetize your project without any coding. By following this guide, you can:

• Set up your Stripe account and subscription products
• Configure the required Bubble plugins and API keys
• Build intuitive subscription workflows and secure user access
• Leverage the Stripe Customer Portal for self-service management
• Keep your app in sync with real-time updates using webhooks

Now that you have a complete guide to add and manage subscription payments, it’s time to implement these steps and watch your app thrive. If you encounter any issues or have further questions, feel free to drop a comment below!

Happy building on your no-code journey!

Get Bubble Crash Course for FREEGet Stripe Connect In Bubble Course