2.0 - Pricing Plans (Stripe Integration)

Introduction

Casper 2.0 comes with a complete Stripe integration, including the Stripe customer portal for user plan management.

This guide uses Stripe test mode to demo the integration setup steps. You will need to set up products, webhooks, and customer portal settings for both test mode and live mode.

Step 1: Add your Stripe API key to the API connector

You will need your Stripe API keys for this step. If your Stripe account has been approved for payments, you will have keys for test mode and different keys for live mode. If you are not sure where to find your keys, read this.

Step 2: Create Stripe Products for each plan

To use the Stripe integration, you must create one product in Stripe for each paid pricing tier in your app. To offer monthly and yearly options for the same plan, create one product with two prices: one with a yearly billing cycle and one with a monthly billing cycle.

Be sure to note the Price IDs of each product. You will need to add these to the Pricing Plans Option Set.

Remember that you will need to create products in live mode AND test mode for each plan, as the products from each mode have distinct price IDs.

Step 3: Create Webhooks in Stripe

To ensure seamless communication between Stripe and your app, you need to set up webhooks that will transmit data from Stripe to your app whenever a specific event is triggered.

Important: Test mode webhook endpoints should contain /version-test/ in the app base URL and live mode webhook endpoints should not. If you set this up incorrectly, Stripe will not send subscription data to the correct app version, and your user's subscriptions will not update correctly.

Find your Workflow API Root URL

From your Bubble app editor, copy your Workflow API root URL. This is the base URL for your webhook endpoints in Stripe.

Create a Stripe webhook for your app's /stripe-subscription-update endpoint

The /stripe-subscription-update endpoint is responsible for updating workspace subscriptions. It listens to the following 3 Stripe events:

• customer.subscription.created

• customer.subscription.deleted

• customer.subscription.updated

Endpoint URL for test mode: https://yourdomain.bubbleapps.io/version-test/api/1.1/wf/stripe-subscription-update

Endpoint URL for live mode: https://yourdomain.bubbleapps.io/api/1.1/wf/stripe-subscription-update

Don't forget to replace yourdomain with your actual bubbleapps.io domain.

Step 4: Set up your Stripe Customer Portal

The Stripe customer portal makes subscription management easy for your users and provides many configuration options. For this demo, we will set up a simple portal that allows users to upgrade, downgrade, and cancel their plans.

In this demo, we set up the test mode customer portal. You will need to to follow the same steps in live mode to enable the customer portal for live payments.