Bubble.io Stripe Integration: The Step-by-Step Guide to Accepting Payments
One-time payments, recurring subscriptions, the Customer Portal, and webhooks — every Stripe scenario in Bubble with every API call shown. The most complete Bubble + Stripe guide available.
Stripe + Bubble: The Most Searched Integration in No-Code
Integrating Stripe with Bubble.io is the most-searched technical topic in the no-code world — because charging money is the moment an app becomes a business. This guide covers every Stripe integration scenario in Bubble: one-time payments, recurring subscriptions, Stripe Connect for marketplaces, and the Customer Portal for self-serve billing management. Step by step, with every API call shown.
Setting Up the Stripe API Connector
Authentication: Private key in header
Key: Authorization
Value: Bearer sk_live_XXXXX (mark as private)
// Use sk_test_XXXXX during development
// Switch to sk_live_XXXXX before going live
// Never expose your secret key to the browser
mode = “payment”
line_items[0].price = “price_XXXXX” (your Stripe Price ID)
line_items[0].quantity = 1
success_url = “https://yourapp.com/success?session={CHECKOUT_SESSION_ID}”
cancel_url = “https://yourapp.com/pricing”
customer_email = Current User’s email
// Response: url → navigate user to response’s url
mode = “subscription”
customer = Workspace’s stripe_customer_id
line_items[0].price = Plan’s stripe_price_id
subscription_data.metadata[workspace_id] = Workspace’s Unique ID
subscription_data.trial_period_days = Plan’s trial_days
success_url = “https://yourapp.com/billing/success”
// NEVER trust success_url to activate subscription
// Only webhooks are authoritative for billing state
customer = Workspace’s stripe_customer_id
return_url = “https://yourapp.com/billing”
// Navigate user to response’s url
// Customer can: update card, view invoices, change plan, cancel
// No custom UI to build — Stripe hosts the portal
Handling Stripe Webhooks in Bubble
// URL will be: https://yourapp.bubbleapps.io/api/1.1/wf/stripe_webhook
// 2. In Stripe Dashboard → Developers → Webhooks → Add endpoint
// Paste your Bubble workflow URL
// Select events: checkout.session.completed, customer.subscription.updated,
// customer.subscription.deleted, invoice.payment_failed,
// invoice.payment_succeeded, customer.subscription.trial_will_end
// 3. Webhook handler workflow (Step 1)
Extract workspace_id:
Trigger data’s object’s metadata’s workspace_id
Find Workspace:
Search for Workspaces [Unique ID = workspace_id] :first item
Update Workspace based on event type:
checkout.session.completed → subscription_status = Active
invoice.payment_failed → subscription_status = Past Due
subscription.deleted → subscription_status = Cancelled
Test Webhooks With Stripe CLI Before Going Live
Install the Stripe CLI and run stripe listen –forward-to [your Bubble webhook URL] to forward test events to your development app. Then trigger events with stripe trigger checkout.session.completed. Testing webhooks locally prevents billing bugs from reaching production customers.
Ready to Build Your App on Bubble?
Architecture review, data model design, Stripe billing, and full builds — done right from day one by Pakistan’s leading Bubble.io team.
