Voeg een betaalknop toe aan je Bubble.io-app
Bubble's Stripe-plugin vraagt workflows, server-side actions en een betaald plan voor alles wat verder gaat dan kaarten. Sla het over: plaats één HTML-element met twee regels code en je Bubble-app accepteert iDEAL, SEPA, Klarna, PayPal en kaarten vanaf dag één.
Het betalingsverhaal van Bubble vandaag
Bubble.io is een no-code droom — totdat je betalingen aansluit. De officiële Stripe-plugin vereist workflows voor elke actie, leeft achter een betaald Bubble-plan om echt geld te ontvangen, en levert alleen kaartmethodes. PayPal vraagt een aparte plugin. SEPA en iDEAL worden niet ontsloten. Abonnementen leven in hun eigen data-type. Tegen de tijd dat je de workflow-keten hebt gebouwd, ben je meer tijd kwijt aan het payment-loodgieterswerk dan aan de rest van de app samen.
- Bubble's Stripe-plugin vraagt meerdere workflows + server-side actions per checkout.
- Live betalingen vereisen een betaald Bubble-plan (Starter of hoger).
- iDEAL, SEPA, Bancontact en Klarna worden niet ontsloten door de native plugin.
- PayPal leeft in een aparte plugin — twee integraties om bij te houden.
- Stripe's payment-popup negeert je Bubble design tokens.
De oplossing: een Bubble HTML-element met één anchor
PayRequest's Betaalknop is een gewone HTML-link met één CSS-bestand. Plaats hem in een Bubble HTML-element en de knop verschijnt in je Bubble-UI als elk ander element — zelfde uitlijning, zelfde responsive-gedrag. Klik → land op je eigen checkout. Geen plugin, geen workflows, geen Stripe API-key in je Bubble-instellingen.
Leeft in elk HTML-element
Bubble's HTML-element accepteert willekeurige markup. Plak de snippet, maak het element even hoog als de knop, klaar.
Werkt op elk Bubble-plan
Gratis plan inbegrepen. De knop is gewone HTML — Bubble blokkeert niet welke elementen gratis-apps mogen gebruiken.
Geen workflows, geen API connector
Bubble's API Connector en workflow-engine blijven onaangeroerd. Betalingen, fulfilment en herinneringen gebeuren allemaal op PayRequest.
Hergebruik in pagina's en Repeating Groups
Wikkel het HTML-element in een reusable element of Repeating Group-cel, varieer de href via Bubble dynamic data — verkoop verschillende producten vanuit één design.
De hele integratie, in twee regels HTML
Plaats in de Bubble-editor een HTML-element op de pagina en plak beide regels in het content-veld. De knop rendert in het element op preview én op live.
<!-- 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>Drie stijlen in de stylesheet — kies er één die past bij je Bubble-design.
Stap voor stap: van Bubble-editor naar live betaling
Maak de Smart Link in PayRequest
Log in op PayRequest → Betaalpagina → Smart Links → Nieuw. Stel het bedrag in, kies methodes (kaart, Apple Pay, iDEAL, PayPal). Kopieer de URL.
Open de Bubble-pagina of reusable element
Open in de Bubble-editor de pagina waar de knop moet komen (Hero, Prijs, blogpost, dashboard-CTA).
Voeg een HTML-element toe
Klik op het HTML-icoon in de linker-toolbar (of Ctrl+Shift+H). Plaats het element op de pagina waar de knop moet verschijnen.
Plak de snippet in het content-veld
Klik op het HTML-element → in de inspector, plak beide regels (de <link> en de <a>) in het content-veld. De knop rendert direct in de editor.
Resize en publiceer
Sleep de handvatten van het HTML-element zodat het strak om de knop zit (zo'n 48px hoog). Klik Deploy → Live. De knop werkt op de gepubliceerde Bubble-app.
Bubble.io + Betaalknop vs. de alternatieven
| Methode | Setuptijd | Bubble-plan | Workflows nodig | Betaalmethodes | Dynamic data |
|---|---|---|---|---|---|
Bubble Stripe-plugin | 1–2 uur | Starter+ | 3+ per checkout | Card + Apple/Google Pay | Ja (met workflows) |
Bubble PayPal-plugin | 1 uur | Starter+ | 2+ per checkout | Alleen PayPal | Handmatig |
API Connector + Stripe API | Halve dag | Starter+ | Eigen build | Wat je bouwt | Als je het koppelt |
PayRequest BetaalknopBest | 1 minuut | Gratis+ | Geen | 20+ inclusief iDEAL, SEPA, Klarna | Ja (dynamische href) |
Wat Bubble.io-bouwers met de Betaalknop maken
Indie SaaS-prijspagina's
Drie-tier prijskaart, drie HTML-elementen, drie Pay-knoppen. Elke tier linkt naar zijn eigen Smart Link in PayRequest met het juiste plan-bedrag.
Marketplace- en directory-listings
Repeating Group van producten, elke cel met een HTML-element waarin de href is gekoppeld aan het Payment URL-veld van het product. Klanten kopen direct vanuit de listing.
Cursusplatformen en lidmaatschappen
Sluit content af achter een betaling door de knop te combineren met een Bubble privacy rule op het content data-type. PayRequest verzorgt de betaling, Bubble de toegang.
Interne admin-dashboards
Bubble-apps die als interne tools dienen, kunnen via dezelfde anchor borgsommen, retainers of top-ups innen — zonder extra plugin.
Waarom dit beter schaalt dan de native Bubble-plugins
De native Bubble Stripe-plugin is prima voor één product op een betaald plan met alleen kaarten. Op het moment dat je iDEAL voor Nederlandse klanten, SEPA voor Europese facturatie, multi-currency, recurring subscriptions, of een checkout zonder design-bruch nodig hebt, loop je tegen Bubble's plugin-muur. De Betaalknop heeft geen muur — het is gewoon HTML, en PayRequest handelt elke betaalmethode, valuta en herhaling af die bestaat.
- 20+ betaalmethodes in plaats van 4. iDEAL, SEPA, Klarna, Bancontact, PayPal, kaarten, Apple/Google Pay.
- Geen betaald Bubble-plan vereist om echt geld te ontvangen.
- Variabele bedragen, multi-currency, recurring of one-time — allemaal in één anchor.
- Wissel van betaalprovider (Stripe, Mollie, PayPal, Ponto) in PayRequest zonder workflows opnieuw te bouwen.
Veelgestelde vragen
Heb ik een betaald Bubble-plan nodig om de Betaalknop te gebruiken?+
Kan ik de URL van de knop koppelen aan dynamic data in een Repeating Group?+
Ziet de knop er goed uit zonder zelf te stylen?+
Moet ik workflows of actions opzetten om de knop te laten werken?+
Kan ik conversies terug in Bubble meten voor rapportage?+
Hoe zit het met abonnementen en recurring payments?+
Lanceer je Bubble.io-app vandaag met echte betalingen
Maak een account, maak een Smart Link, plak de snippet in een Bubble HTML-element. Vijf minuten, geen plugins, echt geld — op het gratis plan als je wilt.