💻

Integrating Stripe Subscription with Bubble App

Jul 11, 2024

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.