Does the Payment Button work in Lovable's preview environment?

Yes. Because it's a plain anchor tag, Lovable's preview renders it like any other styled link. Clicking opens your PayRequest checkout in a new tab — exactly the same behaviour you get on the deployed site.

Do I need a Stripe account to use the Payment Button in Lovable?

No. PayRequest connects to Stripe, Mollie, PayPal, or Ponto on your account once — then every Smart Link and every Payment Button you embed in Lovable settles to whichever provider you've connected.

Will Lovable strip the className when I paste the snippet?

Sometimes. If Lovable rewrites the class or replaces the with a custom Button component, prompt it explicitly to keep the exact className 'pr-btn pr-btn--default' and the tag — that keeps the stylesheet hooks intact.

Can I track conversions from my Lovable app?

Yes. Every click on the Payment Button feeds your Smart Link's view, conversion and revenue analytics — the same as if buyers came in via a direct payment URL.

Does this work on the free Lovable plan?

Yes. The Payment Button is a static anchor and a stylesheet load — no compute, no backend, no plan-restricted feature. Free, custom-domain and Pro Lovable projects all support it identically.

Lovable + PayRequest

Voeg een betaalknop toe aan je Lovable-app

Lovable bouwt prachtige front-ends in seconden — maar er zit geen betaalsysteem in. Dit is de snelste manier om echt geld te ontvangen vanuit elk Lovable-project: één CSS-link, één anchor-tag, geen SDK.

Betaallink aanmaken Bekijk de snippet

The wall

Het probleem: Lovable-apps accepteren geen geld

Lovable genereert mooie React-componenten — landingspagina's, dashboards, mini-SaaS, interne tools — maar zodra je iets wilt verkopen, loopt de AI vast. Echte betalingen vereisen een Stripe-account, een API-key, een webhook-listener, een backend-route, en code die refunds en chargebacks afhandelt. Niets daarvan past in een AI-gegenereerd component, en het handmatig herbouwen ervan haalt het hele voordeel van Lovable onderuit.

Stripe Checkout vereist een server. Lovable-apps zijn vooral client-side React.
Stripe.js heeft een API-key in code nodig. AI-gegenereerde componenten lekken keys in je repo.
PayPal SDK laadt zware iframes die botsen met Lovable's preview-omgeving.
Een echte backend bouwen haalt het AI-builder voordeel weg — dan ben je weer aan het programmeren.

The fix

De oplossing: een betaalknop die gewoon een link is

PayRequest's Betaalknop is geen iframe, geen popup, en heeft geen JavaScript nodig. Het is een gewone HTML-anchor met één CSS-bestand. Plak hem ergens in een Lovable-component — in een card, hero, prijsplan of zelfs een chat-reply — en je klant landt op een volledig eigen, mobiel-geoptimaliseerde checkout die jij beheert vanuit het PayRequest-dashboard.

Geen API-keys in je code

De knop is een link naar je PayRequest-betaalpagina. Niets gevoeligs komt in je Lovable-repo terecht.

Geen backend nodig

Webhooks, fulfilment-emails, refund-logica en herinneringen draaien op PayRequest. Je Lovable-app blijft puur front-end.

Werkt in elk component

Het is gewoon een <a> met een className. Vraag Lovable hem in een card of hero te plaatsen en het werkt — geen edit-loops met de AI.

Klanten blijven in jouw merk

Klik op de knop → land op payrequest.me/jouwhandle/iets, in jouw kleuren. Card, Apple Pay, Google Pay, iDEAL, SEPA, PayPal — allemaal op één pagina.

The snippet

De hele integratie, in twee regels HTML

Plak de <link> in de <head> van je Lovable-project (of bovenin een component). Plaats de <a> waar je een knop wilt. Klaar.

payment-button.html

<!-- 1. Include the PayRequest button stylesheet (one-time per page) -->
<link rel="stylesheet"
      href="https://payrequest.app/embed/button.css">

<!-- 2. The button -->
<a href="https://payrequest.me/yourhandle/lovable-app"
   class="pr-btn pr-btn--default"
   target="_blank"
   rel="noopener">Pay €19</a>

De stylesheet bevat drie knopstijlen — kies er één die past bij je Lovable-ontwerp.

Walkthrough

Stap voor stap: van Lovable-prompt naar live betaling

Maak de Smart Link in PayRequest

Log in op PayRequest → Betaalpagina → Smart Links → Nieuw. Stel het bedrag in (of laat open voor fooien en donaties) en kies de betaalmethodes — kaart, Apple Pay, iDEAL, PayPal, enz. Kopieer de URL.

30 sec

Open Delen → Embed Knop

Bij het delen-menu van de Smart Link zie je een Betaalknop-optie. Kies een stijl: blauw voor primaire CTA's, donker voor lichte achtergronden, outline om in te passen. Kopieer de snippet.

10 sec

Vertel Lovable waar de knop moet komen

Open je Lovable-project en geef de prompt: "Voeg deze HTML-betaalknop toe aan de prijskaart" — plak vervolgens de snippet. Lovable plaatst de <a> in de JSX en voegt de <link>-stylesheet toe aan de <head>. Als de className wordt gestript, vraag Lovable expliciet om de class exact zo te houden.

20 sec

Vervang de voorbeeld-URL

De snippet bevat een demo-URL. Vervang die door je eigen Smart Link-URL (uit stap 1). De knop wordt direct bijgewerkt in Lovable's preview.

5 sec

Publiceer je Lovable-app

Klik op Publiceren in Lovable. De live-app laadt de PayRequest-stylesheet vanaf onze CDN en de knop werkt op de productie-URL. Test de klik en ontvang je eerste betaling.

Live

Comparison

Lovable + Betaalknop vs. de alternatieven

Methode	Setuptijd	Backend?	API-key in repo?	Eigen checkout	Betaalmethodes
Stripe Checkout (handmatig)	2–4 uur	Verplicht	Ja	Beperkt	Card + Apple/Google Pay
Stripe Payment Element	Halve dag	Verplicht	Ja	Handmatig stylen	Configureerbaar
PayPal SDK	1–2 uur	Soms	Ja	PayPal-merk	PayPal + cards
PayRequest BetaalknopBest	1 minuut	Geen	Geen	Jouw merk	20+ inclusief iDEAL, SEPA, Klarna

What to ship

Wat Lovable-makers met de Betaalknop bouwen

AI-gegenereerde SaaS-landingspagina's

Vraag geld voor early access, lifetime deals of one-time licenties direct vanuit de hero CTA — geen authenticatiesysteem nodig vóór de launch.

Mini-producten en prompt packs

Verkoop de AI-promptbibliotheek, het Notion-template of component-pack dat je met Lovable hebt gebouwd. De knop verzorgt de verkoop, jij stuurt het bestand per e-mail.

Cursus- en workshop-aanmeldingen

Prijskaart → knop → eigen checkout → bevestiging. Toegang regel je handmatig of via je favoriete tool.

Fooi-potten en donaties

Lovable-portfolio's en indie-projecten kunnen fooien innen met één anchor. Variabele bedragen, eigen bedankpagina, geen externe widget.

Under the hood

Waarom dit sneller is dan Lovable Stripe laten toevoegen

Iedereen die ooit "voeg Stripe-betalingen toe" aan een AI-builder heeft gevraagd, kent het verhaal: de AI genereert client-side code die niet client-side hoort, lekt een API-key, vergeet de webhook, en levert een checkout die in productie 404't. De Betaalknop slaat dat allemaal over omdat er niets is om aan te sluiten — geen SDK, geen key, geen callback. De link is de integratie.

Geen client-secret gepuzzel. De Betaalknop is server-rendered HTML.
Geen webhook-listeners. PayRequest verstuurt fulfilment, bonnen en herinneringen.
Geen CSP- of CORS-fouten. De knop is een same-origin <a>-tag zonder cross-frame messaging.
Geen vendor lock-in. Wissel van betaalprovider (Stripe, Mollie, PayPal, Ponto) zonder je Lovable-code aan te raken.

FAQ

Veelgestelde vragen

Werkt de Betaalknop in Lovable's preview?+

Ja. Omdat het een gewone anchor-tag is, rendert Lovable's preview hem net als elke andere gestylde link. Klikken opent je PayRequest-checkout in een nieuw tabblad — precies zoals op de live site.

Heb ik een Stripe-account nodig om de Betaalknop in Lovable te gebruiken?+

Nee. PayRequest verbindt eenmalig met Stripe, Mollie, PayPal of Ponto — daarna gaat elke Smart Link en Betaalknop die je in Lovable plakt naar de provider die jij hebt gekoppeld. Je kunt ook starten met alleen PayPal of bankoverschrijvingen via Ponto.

Strip Lovable de className als ik de snippet plak?+

Soms. Als Lovable de class herschrijft of de <a> vervangt door een eigen Button-component, geef dan expliciet de prompt: 'Houd de className `pr-btn pr-btn--default` exact en behoud de <a>-tag — refactor hem niet.' Dan blijven de stylesheet-hooks werken.

Kan ik conversies vanuit mijn Lovable-app meten?+

Ja. Elke klik op de Betaalknop telt mee in de views, conversies en omzet van je Smart Link — net alsof bezoekers via de directe betaal-URL kwamen. Je ziet welke Lovable-pagina verkoop oplevert, zonder analytics-scripts toe te voegen.

Werkt dit op het gratis Lovable-plan?+

Ja. De Betaalknop is een statische anchor en een stylesheet-load — geen compute, geen backend, geen plan-restrictie. Gratis Lovable-projecten, custom-domain projecten en Lovable Pro-projecten ondersteunen het allemaal hetzelfde.

Wat als ik een eigen knopstijl wil in plaats van de drie standaardvarianten?+

Override de styles in je eigen CSS. De knop gebruikt standaard CSS-classes (pr-btn, pr-btn--default, pr-btn--dark, pr-btn--outline), dus een paar regels eigen CSS in Lovable rebrandt hem — zonder de klikgedrag of analytics te verliezen.