Lovable + PayRequest

Add a payment button to your Lovable app

Lovable builds great front-ends in seconds — but it doesn't ship with a payment system. Here's the fastest way to start charging real customers from any Lovable project: one CSS link, one anchor tag, zero SDK.

Get my payment link See the snippet

The wall

The problem: Lovable apps don't accept money

Lovable generates beautiful React components — landing pages, dashboards, mini-SaaS, internal tools — but the moment you want to charge for any of it, the AI hits a wall. Real payments need a Stripe account, an API key, a webhook listener, a backend route, and code that handles refunds and chargebacks. None of that fits inside an AI-generated component, and rebuilding it manually defeats the entire purpose of using Lovable in the first place.

Stripe Checkout requires a server. Lovable apps are mostly client-side React.
Stripe.js needs an API key in code. AI-generated components leak keys into your repo.
PayPal SDK loads heavy iframes that conflict with Lovable's preview environment.
Building a real backend takes the AI-builder advantage away — you're back to writing code.

The fix

The fix: a payment button that's just a link

PayRequest's Payment Button isn't an iframe, isn't a popup, and doesn't require a single line of JavaScript. It's a plain HTML anchor styled by one CSS file. Drop it anywhere in a Lovable component — inside a card, a hero, a pricing tier, even a chat reply — and it lands customers on a fully branded, mobile-optimised checkout that you control from the PayRequest dashboard.

No API keys in your code

The button is a link to your PayRequest payment URL. Nothing sensitive ships in your Lovable repo.

No backend required

Webhooks, fulfilment emails, refund logic, and dunning all run on PayRequest. Your Lovable app stays a pure front-end.

Works inside any component

It's just an <a> with a className. Tell Lovable to add it to a card or hero and it just works — no edit-loop battles with the AI.

Customers stay in your brand

Click the button → land on payrequest.me/yourhandle/whatever, styled in your colours. Card, Apple Pay, Google Pay, iDEAL, SEPA, PayPal — all on one page.

The snippet

The whole integration, in two lines of HTML

Paste the <link> in your Lovable project's <head> (or the top of any component). Drop the <a> wherever you want a button. Done.

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>

Three button styles ship with the stylesheet — pick one to match your Lovable design.

Walkthrough

Step-by-step: from Lovable prompt to live payment

Create the Smart Link in PayRequest

Sign in to PayRequest → Payment Page → Smart Links → New. Set the amount (or leave it variable for tips and donations) and pick which methods you want — card, Apple Pay, iDEAL, PayPal, etc. Copy the URL.

30 sec

Open Share → Embed Button

On the Smart Link's share menu you'll see a Payment Button option. Pick a style: blue for primary CTAs, dark for light backgrounds, outline to blend in. Copy the snippet.

10 sec

Tell Lovable where you want the button

Open your Lovable project and prompt: "Add this HTML payment button to the pricing card" — then paste the snippet. Lovable will place the <a> inside the JSX and add the <link> stylesheet to the <head>. If it strips the className, prompt it to keep the class exactly as written.

20 sec

Replace the example URL

The snippet ships with a demo URL. Swap it for your real Smart Link URL (the one you copied in step 1). The button updates instantly in Lovable's preview.

5 sec

Publish your Lovable app

Hit publish in Lovable. The deployed app loads the PayRequest stylesheet from our CDN and the button works on the live URL. Test the click, take your first payment.

Live

Comparison

Lovable + Payment Button vs the alternatives

Method	Setup time	Backend?	API key in repo?	Branded checkout	Payment methods
Stripe Checkout (manual)	2–4 hours	Required	Yes	Limited	Card + Apple/Google Pay
Stripe Payment Element	Half a day	Required	Yes	Manual styling	Configurable
PayPal SDK	1–2 hours	Sometimes	Yes	PayPal-branded	PayPal + cards
PayRequest Payment ButtonBest	1 minute	None	None	Yours	20+ including iDEAL, SEPA, Klarna

What to ship

What Lovable creators ship with the Payment Button

AI-generated SaaS landing pages

Charge for early access, lifetime deals, or one-time licences from the hero CTA — no auth system needed before launch.

Mini-products and prompt packs

Sell the AI prompt library, Notion template, or component pack you built with Lovable. The button handles the sale, you deliver the file by email.

Course and workshop signups

Pricing tier card → button → branded checkout → confirmation. Membership access stays manual or hooks into your tool of choice.

Tip jars and donations

Lovable portfolios and indie projects can collect tips with a single anchor. Variable amounts, custom thank-you page, no third-party widget.

Under the hood

Why this is faster than asking Lovable to add Stripe

Every developer who's tried the AI prompt "add Stripe payments" knows what happens: the AI generates client-side code that shouldn't run client-side, leaks an API key, forgets the webhook, and produces a checkout that 404s in production. The Payment Button skips all of it because there's nothing to wire up — no SDK, no key, no callback. The link is the integration.

No client-secret juggling. The Payment Button is server-rendered HTML.
No webhook listeners. PayRequest sends fulfilment, receipts and reminders for you.
No CSP or CORS errors. The button is a same-origin <a> tag with no cross-frame messaging.
No vendor lock-in. Switch payment providers (Stripe, Mollie, PayPal, Ponto) without touching the Lovable code.

FAQ

Frequently asked questions

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. You can also start with PayPal-only or bank transfers via Ponto.

Will Lovable strip the className when I paste the snippet?+

Sometimes. If Lovable rewrites the class to look more 'React-y' or replaces the <a> with a custom Button component, prompt it explicitly: 'Keep the exact className `pr-btn pr-btn--default` and the <a> tag — do not refactor it into a component.' 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. You can see which Lovable page is driving sales without adding analytics scripts.

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 Lovable projects, custom-domain Lovable projects and Lovable Pro projects all support it identically.

What if I want a custom-styled button instead of the three default variants?+

Override the styles in your own CSS. The button uses standard CSS class names (pr-btn, pr-btn--default, pr-btn--dark, pr-btn--outline) so a few lines of your own CSS in Lovable will rebrand it — without losing the click-through behaviour or analytics.