How to integrate an online payment gateway in Bubble

The simplest and most reliable way to integrate an online payment gateway in Bubble is to use a gateway that already has a Bubble Plugin (like Stripe). You install the plugin, set your API keys, drop the payment element on your page, and run a workflow action such as “Stripe → Charge the current user”. For gateways without a Bubble plugin, you use the API Connector to call their payment API and handle confirmations through their webhook system.

Two Ways to Integrate a Payment Gateway

In Bubble, a “payment gateway” is just an external service that charges money on your behalf. Bubble cannot store credit cards itself, so everything goes through the gateway’s API or plugin.

• Use a pre‑built plugin (preferred): Stripe, Braintree, PayPal often have Bubble plugins. These handle tokenization, secure card collection, and common actions (creating a checkout session, making a charge).
• Use the API Connector: For gateways with a REST API but no plugin. You’ll build calls yourself and usually need to set up a backend workflow to receive webhook confirmations.

Example: Integrating Stripe with the Official Plugin

• Install the Stripe plugin from the Plugins tab.
• Enter your Stripe Publishable key and Secret key (from Stripe Dashboard → Developers → API Keys).
• Add a Stripe Checkout workflow action like “Redirect to Stripe Checkout”.
• Pass the amount, currency, and product info.

When the user pays, Stripe redirects them back to your return URL, and you can update the user’s subscription or order.

Using API Connector for Non‑Plugin Gateway

If the gateway only provides API docs, create your own calls:

• Open Plugins → Add plugin → API Connector.
• Create a new API call using their endpoint (usually POST /payments or similar).
• Set authentication (often API key in header).
• Run the call from a workflow when the user clicks “Pay”.

{
  "amount": 2500,
  "currency": "USD",
  "description": "Order #123",
  "source": "<token-from-gateway>"
}

Handling Payment Confirmation via Webhooks

Most gateways send a server‑to‑server message (a webhook) to confirm the payment is truly completed.

• Create a Backend workflow with “Expose this endpoint”.
• Copy the auto‑generated URL and paste it into the gateway’s webhook settings.
• Capture fields like payment_status or transaction_id.
• Update your Order in Bubble from that webhook workflow.

This gives you a stable and secure payment integration without storing sensitive data inside Bubble.