How to connect Stripe webhooks to Bubble
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
In Bubble, go to your application's Setting -> API and check "This app exposes a Workflow API"
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
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
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
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:
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
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/api/1.1/wf/{WORKFLOW-NAME} (remove version-test)
