Billflow
  • Quick Start
  • Setup
    • First Time Setup
      • Connect & Setup Stripe
      • Invite Team Members
      • Create Your First Billing Page
      • Embed The Billing Page
      • Activate Live Payments
  • Billing Pages
    • Plan Picker
    • Checkout Form
    • Customer Portal
    • Pricing Page
    • Invoice Portal
  • How-to's
    • Setup Pricing
      • Flat-rate Subscriptions
      • Free Trial
      • Unit-based
      • Meter-based
      • Setup Fees
      • One-Time Payment
      • Payment Plans (Subscription Schedules)
      • Complex Pricing
      • Add-ons
    • Connect to SaaS
      • Using Stripe Webhooks
    • Change Style
      • Plan Picker Style Templates
      • Customer Portal Style Templates
      • Pricing Page Style Templates
      • Checkout Form Style Templates
    • Update Pricing
    • Use Coupons
    • Enable Quantity Management
    • Enterprise Sales Flow
    • Cancellations/Payment Failures
      • Set up Cancellation Feedback
      • Configure Dunning Emails
    • Automated emails
    • Internationalization
      • Support multiple currencies
      • Support multiple languages
    • Upgrade to new Billing Pages
    • Record Usage
    • VAT & Taxes
    • Indian Recurring Payments
  • No-code Integrations
    • No-code App Builders
      • Bubble
        • How to connect Stripe webhooks to Bubble
      • Webflow
      • WordPress
        • Add Widgets
        • Advanced Usage
        • Useful Plugins
      • Notion
      • Drupal
    • Rewardful
    • ChurnKey
  • Developer Docs
    • Embed Configurations
      • Plan Picker Configs
      • Checkout Form Configs
      • Customer Portal Configs
      • Pricing Page Configs
      • Invoice Portal Configs
    • Handling Events
    • Languages & Frameworks
    • Customize Elements
    • Versions & Beta Testing
  • Help
    • Managing Account & Team
      • Reset Your Password
      • Manage Team Members
    • Frequently Asked Questions
    • Changelog
Powered by GitBook
On this page
  • Description
  • Video Guide
  • Steps
  • 1. Enable Workflow API in Bubble
  • 2. Create workflows in Bubble
  • 3. Create webhooks in Stripe and Detect data
  • 4. Configure Bubble Workflow to process Stripe webhooks
  • 5. Test the Stripe integration

Was this helpful?

  1. No-code Integrations
  2. No-code App Builders
  3. Bubble

How to connect Stripe webhooks to Bubble

PreviousBubbleNextWebflow

Last updated 4 years ago

Was this helpful?

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.

Video Guide

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

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

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:

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.

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 ()

When you define the Stripe webhook in Live mode Stripe () the URL will be different, the format it follows is:

(remove version-test)

https://dashboard.stripe.com/test/webhooks
https://dashboard.stripe.com/webhooks
https://{BUBBLE_APP_NAME}.bubbleapps.io/api/1.1/wf/{WORKFLOW-NAME}