Do I need to mark the component "use client" to use the Payment Button?

No. The Payment Button is a plain HTML anchor. It renders inside a Server Component without any client boundary. Your RSC tree stays clean and your bundle stays small.

Where do I put the stylesheet — in app/layout.tsx or every page?

Once in app/layout.tsx is enough. Drop the inside the and every page in the App Router picks up the styles automatically.

Will the button hurt my Lighthouse scores?

No. The stylesheet is a few KB gzipped, served from PayRequest's CDN, and there's no JavaScript to parse. Lighthouse Performance often goes up after replacing Stripe.js.

Can I use the Payment Button with Tailwind classes for layout?

Yes. The stylesheet only styles the .pr-btn classes. Wrap the button in any Tailwind container and the anchor inherits the layout while keeping its PayRequest visual styling.

Does this work on Vercel's Edge runtime?

Yes. The whole integration is static HTML — there's no runtime code to execute. The page renders identically on every Next.js deployment target.

Next.js + PayRequest

Voeg een betaalknop toe aan je Next.js-app

De Next.js-docs sturen je naar een 2.000-regel Stripe Elements walkthrough. Dat is niet nodig. Twee regels HTML, een anchor en een stylesheet — geen SDK, geen API-route, geen client component.

Betaallink aanmaken Bekijk de snippet

The wall

Waarom Stripe in Next.js moeilijker is dan zou moeten

Next.js App Router is gebouwd rond React Server Components, maar Stripe.js is een client-only SDK. Zodra je daarnaar grijpt moet je een component markeren als "use client", een zwaar script laden, een publishable key juggleren, een API-route opzetten om payment intents te maken, een webhook-handler bouwen om ze te bevestigen — en vervolgens een checkout stylen die bijna-maar-net-niet bij je merk past. Voor de 90% van Next.js-apps die alleen een Pay-knop op een marketingpagina willen, is dat lachwekkend overdreven.

Stripe.js dwingt een 'use client'-grens af en breekt je App Router server tree.
Client-SDK's leveren 90KB+ aan JavaScript — Lighthouse haat het.
API-route + webhook + secret-rotatie + retry-logica, allemaal voor één knop.
Stripe Checkout is hosted, maar de redirect-URL is ondoorzichtig en de styling zit in het dashboard, niet in je codebase.

The fix

De oplossing: een statische anchor naar een eigen checkout

PayRequest's Betaalknop is een gewone HTML-link met één CSS-bestand. Hij rendert in een Server Component (geen "use client" nodig), levert nul JavaScript naar de browser, en respecteert elke CSP-regel. Klanten klikken en landen op je eigen PayRequest-checkout — handle, kleuren, betaalmethodes allemaal vanuit je dashboard.

Rendert in een Server Component

Het is een <a>-tag en een <link>. Geen 'use client', geen useState, geen client-side hydration-cost.

Nul JavaScript in je bundle

De knop voegt 0 bytes toe aan je Next.js JS-bundle. De stylesheet komt van PayRequest's CDN — los van je build.

Geen API-routes, geen webhooks

Payment intents, bevestigingen, fulfilment-emails en herinneringen draaien op PayRequest. Je /api-map blijft leeg.

App Router, Pages Router, beide prima

Dezelfde snippet werkt in app/, pages/, route handlers, server actions — overal waar je HTML kunt renderen.

The snippet

De hele integratie, in twee regels HTML

Plak de <link> in je root layout.tsx (of app/layout.tsx) <head>. Plaats de <a> waar je de knop wilt — in elke RSC, MDX-bestand of layout-fragment.

app/layout.tsx

// app/layout.tsx — once per project
<head>
  <link rel="stylesheet"
        href="https://payrequest.app/embed/button.css" />
</head>

// any Server Component (app/page.tsx, MDX, etc.)
<a href="https://payrequest.me/yourhandle/pro-plan"
   className="pr-btn pr-btn--default"
   target="_blank"
   rel="noopener">Pay €19</a>

De stylesheet bevat drie knopstijlen — kies er één die past bij je Next.js-thema.

Walkthrough

Stap voor stap: van npm install naar live betaling

Maak een Smart Link in PayRequest

Log in → Betaalpagina → Smart Links → Nieuw. Stel het bedrag in, kies je methodes (kaart, Apple Pay, iDEAL, PayPal), kopieer de URL.

30 sec

Voeg de stylesheet toe aan app/layout.tsx

Plak in je root <head> een <link rel="stylesheet" href="https://payrequest.app/embed/button.css" />. Eén keer per project — elke pagina pikt de styles op.

10 sec

Plaats de anchor in elke pagina of component

Prijspagina, hero, blogpost — waar je CTA ook zit. De anchor is een server-renderable <a> met een className. Geen client wrapper nodig.

5 sec

Zet de href op je Smart Link

Gebruik een environment-variabele om test/live URLs te wisselen: process.env.NEXT_PUBLIC_PAYREQUEST_LINK. Behandel hem als elke andere publieke URL.

10 sec

Deploy naar Vercel

vercel --prod (of je gebruikelijke flow). De knop is statische HTML — Vercel cachet hem, de stylesheet komt van PayRequest's CDN, en de klik gaat naar je eigen checkout. Klaar.

Live

Comparison

Next.js + Betaalknop vs. de alternatieven

Methode	Setuptijd	Client JS	API-routes	Eigen checkout	Betaalmethodes
Stripe Elements	Halve dag	~90 KB	2+ vereist	Handmatig stylen	Configureerbaar
Stripe Checkout (redirect)	1–2 uur	Stripe.js (~90 KB)	1 + webhook	Beperkt	Card + wallets
PayPal Buttons SDK	1 uur	~150 KB	1 (capture)	PayPal-merk	PayPal + cards
PayRequest BetaalknopBest	1 minuut	0 KB	Geen	Jouw merk	20+ inclusief iDEAL, SEPA, Klarna

What to ship

Wat Next.js-teams met de Betaalknop bouwen

Prijspagina's op marketingsites

RSC-gerenderde prijskaart met een Pay-knop per plan. Geen client component, geen API-route, geen boilerplate.

MDX-blogposts en tutorials

Plaats de <a> direct in MDX-content. Verkoop prompt-packs, cursussen of fooien vanaf elke post zonder een custom layout.

Server actions + betalingsbevestigingen

Gebruik server actions om de Smart Link on-the-fly te maken, en render dan de knop server-side. Volle RSC-stream, geen hydration-penalty.

Statische blogs en documentatie

Next.js export-mode sites en docs.je-domein.nl krijgen een echte betaal-CTA zonder runtime terug te halen.

Under the hood

Waarom dit beter is dan elke Stripe-in-Next.js tutorial

Lees elke "Stripe met Next.js App Router"-tutorial en je vindt minimaal 12 bestanden: een server action, een pages route, een webhook-handler, een succespagina, een metadata-bestand, een client wrapper, een price-id constants-bestand, een Stripe utility, een webhook-signing helper, een customer-portal redirect... en een commentaar dat uitlegt wat brak toen Stripe naar Stripe.js v3 ging. De Betaalknop vervangt dat allemaal door één CSS-class.

Werkt in app/, pages/, MDX, route handlers, server actions, edge runtime — overal dezelfde snippet.
Geen publishable of secret keys in je repo. De link is de integratie.
CSP-vriendelijk: same-origin <a>, geen inline scripts, geen externe iframes.
Provider-agnostisch: wissel tussen Stripe, Mollie, PayPal of Ponto in PayRequest zonder Next.js opnieuw te deployen.

FAQ

Veelgestelde vragen

Moet ik een component "use client" maken om de Betaalknop te gebruiken?+

Nee. De Betaalknop is een gewone HTML-anchor. Hij rendert in een Server Component zonder client-grens. Je RSC-tree blijft schoon en je bundle blijft klein.

Waar plaats ik de stylesheet — in app/layout.tsx of op elke pagina?+

Eén keer in app/layout.tsx is genoeg. Plaats <link rel="stylesheet" href="https://payrequest.app/embed/button.css" /> in de <head> en elke pagina in de App Router pikt de styles automatisch op.

Heeft de knop invloed op mijn Lighthouse-scores?+

Nee. De stylesheet is een paar KB gzipped, vanaf PayRequest's CDN, en er is geen JavaScript te parsen. We zien Lighthouse Performance vaak omhoog gaan na het vervangen van Stripe.js, omdat er geen async-script meer is dat de main thread blokkeert.

Kan ik Tailwind-classes gebruiken voor layout maar de PayRequest-styles behouden?+

Ja. De stylesheet styled alleen de .pr-btn-classes. Wikkel de knop in elke Tailwind-container — flex, grid, hero — en de anchor erft de layout terwijl de PayRequest-look blijft.

Werkt dit op Vercel Edge runtime?+

Ja. De hele integratie is statische HTML — er is geen runtime-code om uit te voeren op edge of node. De pagina rendert identiek op elk Next.js deployment-target.

Hoe meet ik conversies vanaf een specifieke Next.js-pagina?+

Elke klik telt mee in de views, conversies en omzet van de Smart Link. Voor attributie per bron voeg je een query-string toe (?utm_source=prijspagina) en PayRequest groepeert conversies per parameter — zonder dat je een tracking-script toevoegt.