Skip to main content

2.0 - Pricing Plans (Stripe Integration)

How to configure your Stripe integration​

Introduction​

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

info

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 Stripe support article.

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.

info

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.

danger

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.

Bubble Settings API Tab

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.

info

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.