How to connect Bubble to Stripe

To connect Bubble to Stripe, the simplest and correct way is to install Bubble’s built‑in Stripe plugin, connect your Stripe keys, and then use Bubble’s Checkout Session actions (for one‑time payments) or Create a subscription actions (for recurring billing). Bubble handles the secure communication with Stripe for you, so you only need to configure the plugin and set up workflows.

What You Need (in simple terms)

You need a Stripe account and the Stripe keys from Stripe Dashboard → Developers → API keys. Bubble uses the test keys in development and live keys in production.

• Publishable key is safe for the browser.
• Secret key stays on the server and allows Bubble to create payment sessions.

Step-by-step: Connect Stripe to Bubble

• Open Plugins tab in Bubble and click Add plugin. Search for Stripe (Bubble’s official one) and install it.
• In the plugin settings, paste your Stripe Test Publishable Key and Test Secret Key.
• Switch your Bubble app to Live later and paste the Live keys.
• Stripe requires a redirect page for payment completion. Add a page like payment\_success and enter its URL in the plugin’s “Success URL” field.
• If you plan to use subscriptions, make sure you create Products and Prices in Stripe first.

Creating a Payment (Bubble workflow)

Use a workflow on a button like “Pay now”. Bubble provides a built-in action:

• Stripe → Charge the current user (older)
• Stripe → Checkout - Create a session (recommended, newer Stripe Checkout)

For Stripe Checkout, you set:

• Amount
• Currency
• Price ID (for subscriptions or predefined Stripe items)

Handling Stripe Webhooks

If your app must update subscription status or store payment info, set a webhook in Stripe:

• Create a backend workflow in Bubble (e.g., /stripe\_webhook).
• Expose it as a POST endpoint.
• In Stripe Dashboard → Webhooks, add the URL.

A simple Bubble backend workflow will automatically read the JSON Stripe sends. Example of what Stripe sends:

{
  "type": "checkout.session.completed",
  "data": { "object": { "id": "cs_test_123" } }
}

You can use the event’s fields to update the user or store payment results.