Integrating Stripe Subscription with Bubble App

Overview

• Establish paywall sections in Bubble app using Stripe for subscriptions.
• Once users subscribe, they gain access to members-only sections.
• Options for monthly and annual plans.
• Methods to cancel subscriptions using Stripe Customer Portal.

Steps to Set Up Stripe Subscription

Creating Stripe Products and Plans

1. Stripe Dashboard: Ensure Stripe account is set up.
2. Product Catalog: Navigate to product catalog via search bar.
   • Create a new product for the basic plan (€29/month).
   • Set recurring billing period to monthly.

Configuring Bubble App

1. Install Stripe Plugin:

   • Navigate to the plugin section in Bubble editor.
   • Install the Stripe plugin and enter API keys for development mode.

2. API Keys Configuration:

   • Obtain Secret Key Development and Publishable Key from the Stripe Developer section.

3. Bubble App Interface:

   • Create a subscription button on the user's account page.
   • Setup workflow for the subscription button to subscribe users to the plan.

Workflow Setup

1. Subscribe Action: Use Bubble Stripe plugin workflow actions to subscribe user to a plan.
   • Retrieve the price ID from Stripe dashboard.
   • Example: Price ID ending in “aDH” for the €29 per month plan.

Recording Subscription Data in Bubble

1. Add Data Fields:
   • Add fields like stripe customer ID, subscription ID, subscription start, subscription end, frequency, and subscription status to the user data type.
2. Workflow Update:
   • After subscription, update user data with the retrieved values from Stripe.

Paywall Implementation

1. Conditional Visibility: Set visibility conditions for content groups based on the user's subscription status.
   • Example: Show content if subscription status is active.

Offering Annual Plans

1. Product Catalog: Add another price for annual billing (e.g., €290/year).

   • Allow users to toggle between monthly and yearly plans.

2. Stripe Upsells: Set upsells for annual plans in Stripe dashboard.

Using Stripe Pricing Table

1. Pricing Table Creation: Create and customize Stripe pricing tables.
2. Embedding in Bubble: Use HTML element to embed the pricing table snippet.
3. Offering Multiple Tiers: Allow users to select different pricing tiers.

Handling Subscription Updates with Webhooks

Webhook Setup

1. Stripe Dashboard: Enable Workflow API and Backend Workflows.
2. Create Workflow in Bubble: Setup backend workflow for checkout session completed event.
3. Endpoint URL: Copy and paste into Stripe webhook configuration.
4. API Token Security: Add API token to endpoint URL for security.
5. Event Listening: Listen to checkout.session.completed event.
6. Save Data: Save the webhook's request data in Bubble fields like stripe customer ID.
7. Subscription Status Update: Use additional step to retrieve detailed subscription status, start, end dates, and frequency.

Cancel Subscription

1. Stripe Customer Portal:

   • Embed a cancel subscription button and manage subscriptions via the portal.
   • Update user data upon cancellation.

2. Subscription Updated Webhook

   • Setup an additional webhook to handle subscription updates and cancellations.
   • Sync Bubble database with subscription status changes.

Considerations for Live Mode

1. Webhook Adjustments: Modify webhook setup for live deployment.
2. Security: Maintain secure API token usage for webhooks.

Conclusion

• Comprehensive guide to integrating Stripe subscription with a Bubble app.
• Ensure subscriptions, cancellations, and paywall management are seamlessly integrated.
• Methods to troubleshoot and refine setups for live deployment.

Resources

• Video tutorials for additional instructions.

Contact

• For questions, use the comment section of the referenced video.