Bubble.io + PayRequest

Add a payment button to your Bubble.io app

Bubble's Stripe plugin needs workflows, server-side actions, and a paid plan to accept anything beyond cards. Skip it: drop one HTML element with two lines of code and your Bubble app accepts iDEAL, SEPA, Klarna, PayPal and cards from day one.

Payment button for Bubble.io apps
The wall

Bubble's payment story today

Bubble.io is a no-code dream — until you wire up payments. The official Stripe plugin requires workflows for every action, lives behind a paid Bubble plan to accept real money, and only ships card-based methods. PayPal needs a separate plugin. SEPA and iDEAL aren't surfaced. Subscriptions live in their own data type. By the time you've built the workflow chain, you've spent more time on the payment plumbing than on the rest of the app combined.

  • Bubble's Stripe plugin requires multiple workflows + server-side actions per checkout.
  • Live payments need a paid Bubble plan (Starter or above).
  • iDEAL, SEPA, Bancontact and Klarna aren't exposed by the native plugin.
  • PayPal lives in a separate plugin — two integrations to maintain.
  • Stripe's payment popup ignores your Bubble design tokens.
The fix

The fix: a Bubble HTML element with one anchor

PayRequest's Payment Button is a plain HTML link styled by one CSS file. Drop it into a Bubble HTML element and the button appears in your Bubble UI like any other element — same alignment, same responsive behaviour. Click → land on your branded checkout. No plugin, no workflows, no Stripe API key in your Bubble settings.

Lives in any HTML element

Bubble's HTML element accepts arbitrary markup. Paste the snippet, resize the element to button height, done.

Works on every Bubble plan

Free plan included. The button is plain HTML — Bubble doesn't gate which elements free apps can use.

No workflows, no API connector

Bubble's API Connector and workflow engine stay untouched. Payments, fulfilment and dunning all happen on PayRequest.

Reuse across pages and Repeating Groups

Wrap the HTML element in a reusable element or a Repeating Group cell, vary the href via Bubble dynamic data — sell different products from one design.

The snippet

The whole integration, in two lines of HTML

In the Bubble editor, drop an HTML element on the page and paste both lines into its content field. The button renders inside the element on preview and on live.

bubble-html-element
<!-- Paste both lines into a Bubble HTML element -->
<link rel="stylesheet"
      href="https://payrequest.app/embed/button.css">

<a href="https://payrequest.me/yourhandle/pro-plan"
   class="pr-btn pr-btn--default"
   target="_blank"
   rel="noopener">Subscribe — €19/mo</a>

Three styles ship with the stylesheet — pick one to fit your Bubble design.

Walkthrough

Step-by-step: from Bubble editor to live payment

01

Create the Smart Link in PayRequest

Sign in to PayRequest → Payment Page → Smart Links → New. Set the amount, pick methods (card, Apple Pay, iDEAL, PayPal). Copy the URL.

30 sec
02

Open the Bubble page or reusable element

In the Bubble editor, open the page where you want the button (Hero, Pricing, blog post, dashboard CTA).

5 sec
03

Insert an HTML element

Click the HTML icon in the left toolbar (or Ctrl+Shift+H). Drop the element onto the page where the button should appear.

10 sec
04

Paste the snippet into the element's content

Click the HTML element → in the inspector, paste both lines (the <link> and the <a>) into the content field. The button renders immediately in the editor.

20 sec
05

Resize and publish

Drag the HTML element handles so it hugs the button (around 48px tall). Click Deploy → Live. The button works on the published Bubble app.

Live
Comparison

Bubble.io + Payment Button vs the alternatives

MethodSetup timeBubble planWorkflows neededPayment methodsDynamic data
Bubble Stripe plugin
1–2 hoursStarter+3+ per checkoutCard + Apple/Google PayYes (with workflows)
Bubble PayPal plugin
1 hourStarter+2+ per checkoutPayPal onlyManual
API Connector + Stripe API
Half a dayStarter+Custom buildWhatever you buildIf you wire it
PayRequest Payment ButtonBest
1 minuteFree+None20+ including iDEAL, SEPA, KlarnaYes (dynamic href)
What to ship

What Bubble.io builders ship with the Payment Button

Indie SaaS pricing pages

Three-tier pricing card, three HTML elements, three Pay buttons. Each tier links to its own Smart Link in PayRequest with the right plan amount.

Marketplace and directory listings

Repeating Group of products, each cell with an HTML element where the href is bound to the product's Payment URL field. Customers buy directly from the listing.

Course platforms and memberships

Lock content behind a payment by combining the button with a Bubble privacy rule on the content data type. PayRequest handles the payment, Bubble handles the access.

Internal admin dashboards

Bubble apps used as internal tools can collect deposits, retainers, or top-ups from customers via the same anchor — no extra plugin needed.

Why this scales

Why this scales better than the native Bubble plugins

The native Bubble Stripe plugin is fine for one product on a paid plan with cards only. The moment you need iDEAL for Dutch customers, SEPA for European invoicing, multi-currency, recurring subscriptions, or a checkout that doesn't break out of your design, you hit Bubble's plugin wall. The Payment Button doesn't have a wall — it's just HTML, and PayRequest handles every payment method, currency, and recurrence type that exists.

  • 20+ payment methods, not 4. iDEAL, SEPA, Klarna, Bancontact, PayPal, cards, Apple/Google Pay.
  • No paid Bubble plan required to accept real money.
  • Variable amounts, multi-currency, recurring or one-time — all in one anchor.
  • Switch payment provider (Stripe, Mollie, PayPal, Ponto) on PayRequest without rebuilding workflows.
FAQ

Frequently asked questions

Do I need a paid Bubble plan to use the Payment Button?+
No. The HTML element is available on the free Bubble plan. The button is plain HTML and the stylesheet loads from PayRequest's CDN — Bubble's plan tier doesn't gate either of them. You can build and launch a paid product on Bubble's free tier.
Can I bind the button URL to dynamic data in a Repeating Group?+
Yes. In the HTML element's content, use Bubble's dynamic-data syntax to insert the URL field from the current cell's thing. Each row of the Repeating Group renders its own button with its own Smart Link URL.
Will the button look good without me styling it?+
Yes — the three default styles (Blue, Dark, Outline) drop into most Bubble layouts cleanly. To match a specific brand colour or border-radius, override the .pr-btn classes in Settings → SEO/metatags → Advanced HTML, then every page picks up your overrides.
Do I need to set up workflows or actions for the button to work?+
No. The button is a static link. Bubble's workflow engine and API Connector don't get involved — payment confirmation, fulfilment emails and dunning all happen on PayRequest, not in Bubble.
Can I track conversions back into Bubble for reporting?+
Yes. Append a query string to the Smart Link href (?bubble_user=Current User's unique id) and PayRequest stores it with the conversion. Pull the data into Bubble via the API Connector to attribute revenue to your users.
What about subscriptions and recurring payments?+
PayRequest Smart Links can be one-time or recurring. The Bubble HTML stays identical — pick recurring on the Smart Link, paste the same anchor, and the checkout sets up the subscription on PayRequest.
Bubble.io + PayRequest

Ship your Bubble.io app with real payments today

Sign up, create a Smart Link, paste the snippet into a Bubble HTML element. Five minutes, zero plugins, real money — on the free plan if you want.