How to integrate third-party payments in Bubble

To integrate third‑party payments in Bubble, you usually connect the payment provider through Bubble’s API Connector, send the user to a secure checkout page (or open a hosted payment form), and then receive the payment confirmation through a webhook into a Backend Workflow. This lets Bubble securely process payments without handling sensitive card data directly.

Core Concepts You Need

You never store raw card info in Bubble. Instead you use the provider’s hosted checkout or their payment link. A hosted checkout is a secure page the provider owns. A payment link is simply a URL that leads to their secure form. Both keep your Bubble app PCI‑compliant.

• API Connector: Lets Bubble talk to the payment provider’s API.
• Backend Workflow: A server‑side workflow that handles events like “payment succeeded”.
• Webhook: A message the payment provider sends to your backend to confirm a completed charge.

Step-by-Step Integration Pattern (Works for Stripe, PayPal, Lemon Squeezy, etc.)

You connect to the provider, create a checkout session, send users to it, then handle the webhook.

• Create an API call in API Connector that creates a checkout session or payment link. You usually send the price, currency, and success/cancel URLs.
• Trigger that API call when the user clicks a “Pay” button.
• Redirect the user to the checkout URL returned by the API.
• Set up a Backend Workflow with “Detect request data” to receive the webhook.
• Update your database inside that backend workflow (e.g. mark order as paid).

Example: Creating a Stripe Checkout Session

Below is a typical API Connector call. You add your Stripe Secret Key in the header.

POST https://api.stripe.com/v1/checkout/sessions
// Body should be "Form-data" in API Connector:
success_url=https://yourapp.com/success
cancel_url=https://yourapp.com/cancel
mode=payment
line_items[0][price]=price_12345
line_items[0][quantity]=1

Webhook Handling in Bubble

Inside Bubble, create a backend workflow endpoint like /payment-webhook, allow POST requests, click “Detect request data”, then send a test webhook from Stripe (or other provider). After Bubble learns the structure, use the incoming fields to update your order.

• Example: When event type = checkout.session.completed, set Order’s field “Paid” to yes.

This flow keeps payments secure, avoids handling card data in Bubble, and gives you reliable confirmations through webhooks.