Add a payment button to your v0 components
v0 generates beautifully designed shadcn components from a prompt — but ships zero payment infrastructure. Drop a single anchor into the generated JSX and your v0 site starts charging customers without leaving Vercel's flow.
Why v0 + Stripe needs more than a prompt
v0 is fantastic at generating UI — pricing tables, hero sections, dashboards in shadcn/ui. The moment you ask the AI to wire those up to real payments, the answer becomes "go and build a Next.js API route, set environment variables on Vercel, configure a webhook secret, and write the success page." That's not a v0 task — that's a real engineering project. The button you wanted in five minutes turns into an afternoon.
- v0 generates client components by default — Stripe.js then forces use client and a hydration cost.
- API routes for payment intents have to be wired up after the chat ends.
- Webhook handlers need a stable Vercel URL, secret rotation, and signature verification.
- The shadcn Button component has to be replaced with a custom payment-aware version.
The fix: a button that lives in the generated component
PayRequest's Payment Button is a plain HTML anchor styled by one CSS file. v0 can keep its shadcn Button component — you just override the className with the PayRequest classes (or wrap an <a> in any container). The button renders inside the v0-generated JSX without an SDK, an API route, or a server action.
Sits inside the generated JSX
Drop the anchor directly into the v0 component v0 produced. No client wrapper, no SDK to install.
shadcn-friendly
Mix-and-match: keep the shadcn Button styling for everything else, use PayRequest classes only on the payment button. Or apply the .pr-btn class to a v0 Link element — both work.
No API routes, no webhooks
Payment intents, fulfilment, dunning, refunds — all on PayRequest. Your /app/api folder stays empty.
Vercel-native deployment
Push the v0-generated app to Vercel. The PayRequest stylesheet loads from our CDN, the button is static, edge runtime works fine.
The whole integration, in two lines of HTML
Paste the <link> in your app/layout.tsx <head>. Drop the <a> into the v0 component (replace any shadcn Button you need to upgrade to a Pay button).
// app/layout.tsx — once per project
<head>
<link rel="stylesheet"
href="https://payrequest.app/embed/button.css" />
</head>
// inside any v0-generated component
<a href="https://payrequest.me/yourhandle/pro-plan"
className="pr-btn pr-btn--default"
target="_blank"
rel="noopener">Pay €19</a>Three styles ship with the stylesheet — pick one to fit the v0 design tokens.
Step-by-step: from v0 prompt to live payment
Create the Smart Link in PayRequest
Sign in → Payment Page → Smart Links → New. Set the amount, pick methods (card, Apple Pay, iDEAL, PayPal). Copy the URL.
Generate or open the v0 component
Prompt v0 ("a SaaS pricing tier card with three plans") or open an existing chat. v0 outputs JSX you can copy straight into your Next.js app.
Add the stylesheet to app/layout.tsx
Inside <head>, paste a <link rel="stylesheet" href="https://payrequest.app/embed/button.css" />. Once per project — every page picks up the styles.
Replace the shadcn Button with the PayRequest anchor
Find the <Button>Get started</Button> in v0's output. Replace it with <a className="pr-btn pr-btn--default" href="..." target="_blank" rel="noopener">Pay €19</a>. Same visual weight, instant payment.
Deploy to Vercel
vercel --prod. The button is static HTML, Vercel caches it, the stylesheet loads from PayRequest's CDN. Test the click, you're live.
v0 + Payment Button vs the alternatives
| Method | Setup time | API routes | shadcn-friendly | Branded checkout | Payment methods |
|---|---|---|---|---|---|
Stripe Elements (manually wired) | Half a day | 2+ required | Manual styling | Manual styling | Configurable |
Stripe Checkout (redirect) | 1–2 hours | 1 + webhook | OK | Limited | Card + wallets |
Vercel + Stripe template | 30 min | Pre-built | Yes | Stripe-branded | Card + wallets |
PayRequest Payment ButtonBest | 1 minute | None | Yes (anchor or styled Button) | Yours | 20+ including iDEAL, SEPA, Klarna |
What v0 builders ship with the Payment Button
Pricing pages with three-tier shadcn cards
v0 generates the layout in seconds; PayRequest turns each tier's CTA into a real Pay button. Same prompt, full revenue stack.
AI tool landing pages
Hero with a Pay button in the v0-generated CTA. From idea to first sale without leaving Vercel's product loop.
Templates and prompt libraries
Sell the v0 prompts you used. Drop the anchor into the catalog component v0 generated.
Vercel-hosted SaaS demos
Demo apps benefit from a real CTA. Replace the placeholder Button with a Payment Button and convert browsers to buyers.
Why this fits Vercel's flow better than wiring up Stripe
The whole point of v0 + Vercel is that the path from prompt to deployed app is friction-free. The moment you stop to integrate Stripe, you break that flow: install the SDK, set environment variables in the Vercel dashboard, write an API route, configure a webhook, test locally with the Stripe CLI. The Payment Button is the only payment integration that respects v0's frictionless promise — it's literally just JSX.
- No 'use client' boundary inside v0 components.
- Zero JavaScript added to the Next.js bundle.
- Edge-runtime compatible — works on every Vercel deployment target.
- Provider-agnostic: switch between Stripe, Mollie, PayPal, Ponto on PayRequest without redeploying.
Frequently asked questions
Do I need to convert the v0 component to a client component to use the Payment Button?+
Can I keep using the shadcn Button component for non-payment buttons?+
Will v0 strip the className when I prompt for changes?+
Does the Payment Button work on Vercel's Edge runtime?+
What about subscriptions or usage-based billing?+
Will it match my v0 design tokens (border radius, font, colour)?+
Ship your v0 site with real payments today
Sign up, create a Smart Link, paste the snippet into the v0-generated component. Five minutes, zero SDK, real money.