How to respond to Stripe events in Bubble using Stripe webhooks

Description

When events happen outside of your app in Stripe, for example a customer's credit card failing, you may want to take action within your Bubble application. This can be accomplished by connecting Stripe webhooks to Bubble workflows so you can update your database whenever specific events occur within Stripe.

Steps

1. Enable Workflow API in Bubble

In Bubble, go to your application's Setting -> API and check "This app exposes a Workflow API"

2. Create workflows in Bubble

a. Go to "Backend workflows"

Now that the Workflow API is enabled, under your pages you should see a new page at the bottom called "Backend workflows" - this is where you can define new workflows to be triggered by Stripe webhooks

Backend workflows page exposed now that workflow API is enabled

b. Create a new workflow endpoint

Define a new Workflow, this will create an API endpoint that can be called by Stripe. Be sure to enable:

  • Expose as a public endpoint

  • This endpoint can be run without authentication

  • Ignore privacy rules when running the workflow

You will be creating a separate workflow endpoint for each Stripe event you are trying to monitor in Bubble

The endpoint name should follow URL patterns, so only use lowercase letters and avoid spaces and other special characters

3. Create webhooks in Stripe and Detect data

The webhook URL will be different depending on the version of the Bubble application, we recommend putting your test Bubble workflow endpoint URL in Stripe test mode and the live bubble URL in Stripe live mode

Next, we want to detect the data that Stripe is going to be sending, so click "Detect data" and copy the URL presented, then go to the Stripe webhook section (https://dashboard.stripe.com/test/webhooks)

Because the workflow we created in the previous step the goal is to monitor the subscription status, we have it send on update or delete of the subscription.

After that paste the URL that appeared when you clicked "Detect Data"

Next click "Send test webhook" and send an event to Bubble to detect the data. It should show as successful and your Bubble application should look like this

The request data Stripe sent over in it's webhook

After saving the request data in Bubble, modify the stripe webhook you just created to no longer have a "/initialize" at the end of it:

4. Configure Bubble Workflow to process Stripe webhooks

In this example we are assuming we have the Stripe subscription_id and subscription_status as fields on the User. We query users by the subscription_id and modify the subscription_status. This kind of flow can be adapted to any data model.

After this is done you are ready to test the webhook

5. Test the Stripe integration

Make sure you updated your Stripe webhook URL to not have the trailing /initialize that was used to detect the data type

Assuming you have a similar setup to the one above, you should have a User with a subscription in Stripe. To test, just cancel an active subscription and the user's subscription_status should be updated to a canceled state.

When you define the Stripe webhook in Live mode Stripe (https://dashboard.stripe.com/webhooks) the URL will be different, the format it follows is:

https://{BUBBLE_APP_NAME}.bubbleapps.io/version-{VERSION-NAME}/api/1.1/wf/{WORKFLOW-NAME}