Skip to main content

Setting up the Stripe Integration

Introduction​

AI PM Pro comes with a complete Stripe integration including the Stripe customer portal for user plan management. The template also handles proration behavior for adding users to a Workspace, as well as updating the seat quantity for the next billing cycle when a user is removed.

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 secret keys for this step. If your Stripe account has been approved for payments, you will have one secret key for test mode and a different secret key for live mode. If you are not sure where to find your secret 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.

info

The provided demonstration illustrates how to create a single Stripe product in test mode. 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 plan 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-webhook endpoint​

The /stripe-webhook 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-webhook

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

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

Create a Stripe webhook for your app's /stripe-trial-ending endpoint​

The /stripe-trial-ending is triggered when a trial has less than 3 days remaining. It listens to the following Stripe event:

  • customer.subscription.trial_will_end

Example endpoint URL for test mode: https://yourdomain.bubbleapps.io/version-test/api/1.1/wf/stripe-trial-ending

Example endpoint URL for live mode: https://yourdomain.bubbleapps.io/api/1.1/wf/stripe-trial-ending

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

Create a Stripe webhook for your app's /stripe-checkout-complete endpoint​

The /stripe-checkout-complete endpoint is triggered when a checkout session is completed and the payment was successful. It listens to the following Stripe event:

  • checkout.session.completed

Example endpoint URL for test mode: https://yourdomain.bubbleapps.io/version-test/api/1.1/wf/stripe-checkout-complete

Example endpoint URL for live mode: https://yourdomain.bubbleapps.io/api/1.1/wf/stripe-checkout-complete

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 user subscription management easy for your users and provides a ton of configuration options. For this demo, we are going to be setting up a simple portal that allows users to upgrade, downgrade, and cancel their plan.

info

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

Next Steps​

After setting up Stripe integration, proceed to:

  1. Going Live
  2. Development data vs. Live data

Support​

For assistance with Stripe integration, please contact our support team.