How to Add Payments to v0 Apps — Stripe, Paddle Kit, Then Clink

TL;DR

• On v0/Vercel, Stripe reached general availability in March 2026 with automated cryptographic key exchange from the Marketplace—no copy-paste of STRIPE_SECRET_KEY into chat or .env by hand (Vercel changelog).
• Paddle is available via the official Paddle Billing Next.js Starter Kit, not a one-click Marketplace toggle—strong MoR stack, manual env and Dashboard setup.
• v0 generates pricing UI; you own Next.js API routes for Checkout and webhooks—the security win is the key handshake, not chat-driven fulfillment.
• The platform-unique failure mode is Next.js middleware consuming or altering the raw body before Stripe signature verification; exclude webhook paths from the matcher.
• For product framing and routing economics see What Is Clink?, MoR vs PSP, and smart payment routing; full Clink integrate steps live in How to Add Payments to a Lovable App.

---

Why v0 Payments Start With Key Hygiene

Every other major vibe-coding path still treats Stripe secrets as something a human moves: paste into Bolt Settings, store in Replit env, or abstract through Lovable chat. That pattern works until a key lands in the wrong environment, a chat log, or a committed file. v0’s Stripe story is different because Vercel and Stripe co-built Marketplace key management APIs for this exact surface.

When you install Stripe from the Vercel Marketplace, the integration performs a cryptographic key exchange between Stripe and Vercel. No raw key string needs to cross a browser clipboard as the primary provisioning path. STRIPE_SECRET_KEY and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY are generated, exchanged, and stored as Vercel environment variables, scoped to Development, Preview, and Production so sandbox and live keys do not cross-contaminate. Promoting from sandbox to live is a reconnect of the live account into Production scope—not a second manual paste ritual.

That is a genuine architectural difference, not a preference for nicer buttons. A v0 app’s payment security posture starts at the handshake. Stripe’s strength here is exactly what teams hire Stripe for: processor-grade APIs, Checkout, Customer Portal, and a verification model that assumes you can prove request integrity. v0’s contribution is removing the sloppiest step in how AI-built Next.js apps usually receive those credentials.

If you are choosing economic models rather than install UX, keep MoR vs PSP open beside this guide. v0 can run Stripe as PSP or Paddle as MoR via a template; it will not auto-recommend the way Lovable sometimes does.

---

Mechanism: Marketplace Stripe vs Paddle Starter Kit

Stripe via Vercel Marketplace

Install Stripe from the Vercel Marketplace, connect your Stripe account, and land on integration settings where keys are already present as environment variables. Connect the project that hosts your v0 app. Describe pricing pages, buy buttons, and success/cancel screens to v0 so it generates React UI. Those components call your API routes; they should never hold the secret key.

The division of labor is the mechanism, not a side note. v0 is strong at composing React surfaces quickly—pricing tables, plan cards, success states, cancel states. Stripe is strong at money movement, Customer Portal, tax configuration where you enable it, and signed webhooks. Vercel is strong at scoping secrets to Deployment environments so Preview never accidentally spends live keys. When teams blur those roles—putting secret usage in client components, or expecting v0 chat to invent a durable entitlement schema—the integration looks finished in the browser and fails the first renewal.

You write the server path. A typical Checkout route creates a subscription session with process.env.STRIPE_SECRET_KEY, line items keyed by Stripe price ids, success and cancel URLs, and metadata that ties the session to your user id. v0 does not fully generate and manage that server logic the way Lovable manages Cloud payments. The trade is intentional: when something breaks, you debug your own route, not a platform black box. For developers already fluent in Next.js App Router, that is ideal. For founders who have never written a server route, the learning curve is real but bounded—the Stripe Node SDK is well documented, and a Checkout route is often under fifty lines.

Webhook routes deserve the same ownership mindset. Read raw bytes, verify signatures, update durable tables, return 2xx only when side effects are safe to acknowledge. Marketplace convenience ends at credentials; fulfillment correctness is still application code. That is why this guide spends its Moat section on middleware rather than on another Marketplace screenshot.

import Stripe from "stripe"
import { NextRequest, NextResponse } from "next/server"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(request: NextRequest) {
  const { priceId, userId } = await request.json()
  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
    cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/pricing`,
    metadata: { userId },
  })
  return NextResponse.json({ sessionUrl: session.url })
}

When you go live, connect the live Stripe account through the same Marketplace integration so Production receives live-scoped keys, then redeploy. Marketplace provisions keys; it does not create webhook endpoints for you. Endpoint registration and signing secrets remain your responsibility in the Stripe Dashboard per environment story you actually ship.

Paddle via official Starter Kit

v0 does not ship a native one-click Paddle integration. The supported path is the official Paddle Billing Next.js Starter Kit: a deployable Next.js SaaS stack with Supabase auth, localized pricing, Paddle Checkout, and webhook syncing.

You configure environment variables yourself—typically PADDLE_API_KEY, NEXT_PUBLIC_PADDLE_CLIENT_TOKEN, PADDLE_NOTIFICATION_WEBHOOK_SECRET, and NEXT_PUBLIC_PADDLE_ENV—approve the deployment URL in the Paddle Dashboard, and register notification destinations. That is more work than Stripe’s automated key exchange and more work than Lovable’s chat-driven Paddle path. In return you get Paddle’s MoR strengths: global tax handling posture, broad market localization, and checkout optimized for digital conversion on a Next.js codebase you own. Ownership is the hidden advantage versus a fully abstracted builder: pricing logic, checkout UX, and webhook handling are ordinary repository code.

Choose Paddle on v0 when MoR tax semantics matter and your team can tolerate manual Dashboard setup. Choose Stripe when you want the strongest key-provisioning story and classic PSP control. If you need both processors under one subscription contract later, that is infrastructure territory—see What Is Clink?—not a second Marketplace tile.

---

Decision Framework: Secure Single-Provider vs Portable Layer

If the team already deploys to Vercel and writes API routes, Marketplace Stripe is the most natural payment path available on v0. If the team expects a chat that “does everything,” Lovable’s built-in flow will feel closer—see How to Add Payments to a Lovable App. That contrast is a feature of v0 (control), not a defect of Stripe.

---

Step-by-Step: v0 UI, Vercel Env, Stripe Routes

Start with catalog clarity in Stripe (or Paddle) before you ask v0 for a prettier pricing page. Price ids that exist only as copy in a prompt become drift the moment someone edits the Dashboard. Generate checkout UI in v0—pricing page, buttons, success and cancel states—and deploy the app to Vercel so Development, Preview, and Production environment scopes exist as real containers for secrets.

Install Stripe from the Vercel Marketplace, connect the Stripe account, and link the project so secrets appear in the correct scopes. Confirm in the Vercel project settings that Preview still carries sandbox-oriented values and that Production is empty or intentionally unset until you are ready for live keys. Write app/api/stripe/checkout/route.ts to create Checkout sessions from price ids and user metadata. Write app/api/stripe/webhook/route.ts to read the raw body with await request.text(), verify stripe-signature, and update your database. Exclude the webhook route from auth middleware matchers before you test anything that depends on signatures—otherwise you will debug “bad secrets” for an afternoon that was actually a matcher regression.

Test in sandbox with Stripe test cards, including at least one failure path and one subscription cancellation path if those states gate features. Create the live webhook endpoint in the Stripe Dashboard when you promote, store the live signing secret in Production, connect the live Stripe account via Marketplace, redeploy, and verify payment → webhook → entitlement on the production host. If you chose Paddle instead, deploy the Starter Kit, fill the four environment variables across Vercel scopes, approve the domain in Paddle, register notifications, and verify the same lifecycle against Paddle’s webhook contract. Keep a short internal note of which events each provider emits for “paid” versus “refunded,” because v0 will not reconcile those semantics for you.

---

Moat: The Next.js Middleware Signature Trap

Other platforms lose webhooks to JSON parsing, missing secrets, or dead preview URLs. v0’s distinctive trap sits one layer above the route handler: Next.js middleware.

A common SaaS pattern applies authentication middleware to all /api/* routes. If that middleware runs on the Stripe webhook path, it may read the body, wrap the request, or otherwise change what the route handler eventually sees. Stripe’s signature is computed over the exact bytes Stripe sent. Any modification—including “helpful” auth scaffolding—breaks verification.

The failure mode is cruel because it looks almost healthy. In development you POST a test event, the handler runs, and constructEvent throws a generic signatures error. You rotate STRIPE_WEBHOOK_SECRET, confirm the endpoint URL, and still fail. Stripe’s Dashboard may even show a delivery attempt that received a 200 if your code catches the error and returns success after logging—leaving entitlements untouched while the Dashboard looks green.

// middleware.ts — exclude webhook routes from the matcher
export const config = {
  matcher: [
    "/((?!api/stripe/webhook|api/clink/webhook|_next/static|_next/image|favicon.ico).*)",
  ],
}

This trap is v0-specific in the vibe-coding set because v0’s default deployment target—Vercel + Next.js—inserts middleware between the edge ingress and the App Router handler. Bolt’s Supabase Edge Functions and Lovable Cloud functions do not share that interception layer. When verification fails on v0, treat middleware as a first-class suspect equal to wrong secrets.

Operational habits that catch the trap early: log the first ~200 bytes of await request.text() on verification failure and compare length/prefix to Stripe CLI output; assert in tests that the webhook route is absent from the middleware matcher; never call request.json() before verification; keep separate signing secrets for Preview vs Production and refuse to share them. Marketplace key exchange does not create endpoints—so a “keys look fine” dashboard is not evidence that webhooks are configured.

Standard rules still apply after middleware is fixed: raw body, correct whsec_, and a live endpoint on the hostname customers use. Middleware is the reason those standard rules are not enough on v0 alone.

---

Beyond v0: Graduation Signals Unique to This Stack

Graduate when these v0-specific signals show up.

First, Marketplace Stripe and a separately maintained Paddle Starter Kit have become two entitlement systems with two webhook contracts, and you are manually reconciling “who is paid.” Second, middleware exclusions and edge auth keep regressing every time someone broadens the /api/* matcher, and billing reliability now depends on a negative lookahead you must defend in code review. Third, you need multi-PSP failover for soft declines that a single Marketplace-connected Stripe account cannot absorb—see smart payment routing. Fourth, preview/production secret scopes are correct but subscription state still lives only in app-specific tables that will not survive a move off Vercel cleanly. Fifth, non-technical stakeholders keep asking for Lovable-style chat fulfillment while your team is drowning in one-off route patches—signaling that the payment layer should be infrastructure, not more App Router glue.

For the full Clink skills, CLI, catalog, and webhook path, follow How to Add Payments to a Lovable App.

---

v0-Specific Pitfalls

Assuming Marketplace installation created webhook endpoints—it provisioned keys, not endpoints. Create endpoints in the Stripe Dashboard and store signing secrets per environment.

Using request.json() in the webhook route before verification—same class of bug as other platforms, still fatal here.

Letting a global auth middleware “temporarily” protect all APIs during a security pass, then forgetting the webhook exclusion—the most v0-native outage pattern.

Deploying Paddle Starter Kit env vars only to Development and wondering why Preview checkouts fail—Vercel scopes are part of the mechanism, not optional hygiene.

---

Conclusion

v0’s Stripe integration sets the security standard for vibe-coding payments: cryptographic key exchange, environment-scoped secrets, and sandbox-to-live promotion without casual key rewiring. Stripe’s processor strengths and Paddle’s MoR strengths are both reachable; neither removes the need to design entitlements and webhooks deliberately. For Next.js teams that want the most secure single-provider on-ramp, Marketplace Stripe is the right start.

When one processor, one Marketplace integration, and one middleware-shaped request path become a ceiling—entitlement systems fork, middleware keep regressing, or soft declines need multi-PSP recovery—graduate to portable billing infrastructure beginning at the Clink path on the Lovable hub, rather than another template you will fork forever. Contact Sales via clinkbill.com when you want that infrastructure conversation on your Vercel stack.

---