How to Integrate Stripe with V0

Start by prompting V0 to generate the front-end interface for your payment flow. You want a React component with a button that will trigger the checkout process. V0 is excellent at generating polished pricing pages, product cards, and checkout buttons with Tailwind CSS styling. The key is to tell V0 the exact API endpoint the button should call so it wires up the fetch request correctly. When you prompt V0, be specific about the UI structure you need. For a simple one-time purchase, a product description page with a single CTA button works well. For subscriptions, a pricing table with multiple tiers is the standard pattern. V0 will generate a React component that makes a POST request to /api/stripe/checkout with a JSON body containing the relevant parameters like priceId or productName. After V0 generates the component, review the fetch call in the generated code. It should look something like: fetch('/api/stripe/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ priceId: 'price_xxx' }) }). The component should then handle the JSON response from the API and redirect the user to the Stripe Checkout URL using window.location.href = data.url. Make sure this redirect logic is present in V0's generated code — if it is missing, ask V0 to add it.

Now create the server-side API route that the V0-generated button will call. In your V0 project's code editor (or after pushing to GitHub and editing locally), create the file app/api/stripe/route.ts. This file runs as a serverless function on Vercel — it has access to your environment variables but its code is never sent to the browser, making it safe to use your Stripe secret key here. The API route does three things: reads the priceId from the request body, creates a Stripe Checkout Session using the Stripe Node SDK, and returns the session URL to the client. You will also need to install the Stripe npm package if it is not already in your project. In your V0 project, you can add it to package.json manually or ask V0 to scaffold the route with the correct import. Important configuration for the Checkout Session: the success_url and cancel_url tell Stripe where to redirect the customer after payment succeeds or if they click Back. These should be full URLs including your domain. For local development, use http://localhost:3000/success and http://localhost:3000. For production on Vercel, use your actual domain. A good pattern is to use the NEXT_PUBLIC_BASE_URL environment variable for the domain so you do not have to hardcode it. The mode parameter determines payment type: 'payment' for one-time charges, 'subscription' for recurring billing. If you are selling subscriptions, the line_items must reference a Price object you created in the Stripe Dashboard, not a raw amount — this is because Stripe's subscription logic ties to recurring Price configurations.

1import Stripe from 'stripe';
2import { NextRequest, NextResponse } from 'next/server';
3
4const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
5  apiVersion: '2024-12-18.acacia',
6});
7
8export async function POST(request: NextRequest) {
9  try {
10    const { priceId } = await request.json();
11
12    if (!priceId) {
13      return NextResponse.json(
14        { error: 'priceId is required' },
15        { status: 400 }
16      );
17    }
18
19    const session = await stripe.checkout.sessions.create({
20      mode: 'subscription',
21      line_items: [
22        {
23          price: priceId,
24          quantity: 1,
25        },
26      ],
27      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
28      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/pricing`,
29    });
30
31    return NextResponse.json({ url: session.url });
32  } catch (error) {
33    console.error('Stripe checkout error:', error);
34    return NextResponse.json(
35      { error: 'Failed to create checkout session' },
36      { status: 500 }
37    );
38  }
39}

Your API route reads STRIPE_SECRET_KEY and NEXT_PUBLIC_BASE_URL from environment variables. You need to add these to Vercel's environment configuration so they are available when your serverless functions run in production. Go to your Vercel Dashboard and open your project. Click the Settings tab at the top, then click Environment Variables in the left sidebar. You will see a form to add key-value pairs. Add the following variables: First, STRIPE_SECRET_KEY with the value of your Stripe secret key from Stripe Dashboard → Developers → API keys. The test key starts with sk_test_ and the live key starts with sk_live_. Use the test key during development. Make sure to set the environment to Production, Preview, and Development so it is available everywhere. NEVER add the NEXT_PUBLIC_ prefix to this key — that would expose it in the browser. Second, NEXT_PUBLIC_BASE_URL set to your Vercel deployment URL, for example https://your-project.vercel.app. This is used in the checkout session's success and cancel URLs. For custom domains, use your actual domain here. The NEXT_PUBLIC_ prefix is correct for this one because it is just your domain name, not a secret. Optionally, add STRIPE_PUBLISHABLE_KEY (without NEXT_PUBLIC_ if you only use it server-side, or with it if your V0 components need it for Stripe.js or Elements). After adding all variables, click Save. You will need to redeploy your Vercel project for the new environment variables to take effect — trigger a new deployment by pushing any commit to your GitHub repository.

Stripe webhooks are how your server learns about events that happen asynchronously — like a payment completing, a subscription renewing, or a card being declined after initial signup. Without webhooks, your app has no reliable way to confirm a payment actually succeeded. The Checkout Session redirect to your success URL is not sufficient for confirmation because users can manually navigate to that URL without paying. Create a separate API route at app/api/stripe/webhook/route.ts to handle these events. There is one critical requirement that trips up many developers: to verify the webhook signature (which proves the event actually came from Stripe and not from a malicious actor), you must read the request body as raw text using await request.text(). If you call request.json() first, the body is consumed and the signature check will always fail. In the Stripe Dashboard → Developers → Webhooks, create a new webhook endpoint pointing to your Vercel deployment URL: https://your-project.vercel.app/api/stripe/webhook. Select the events you want to receive — at minimum, checkout.session.completed for one-time payments, and customer.subscription.updated plus invoice.paid for subscriptions. Stripe will give you a Webhook Signing Secret (whsec_...). Add this to Vercel's environment variables as STRIPE_WEBHOOK_SECRET. The webhook handler should be idempotent — safe to call multiple times for the same event. Stripe may send the same event more than once if your server does not respond with a 200 status quickly. Store the Stripe event ID in your database and check it before processing to avoid duplicate order fulfillment.

1import Stripe from 'stripe';
2import { NextRequest, NextResponse } from 'next/server';
3
4const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
5  apiVersion: '2024-12-18.acacia',
6});
7
8// CRITICAL: export the config to disable body parsing
9// Next.js App Router does not need this, but raw text reading is essential
10export async function POST(request: NextRequest) {
11  // Read raw body as TEXT — not JSON. Required for signature verification.
12  const body = await request.text();
13  const signature = request.headers.get('stripe-signature');
14
15  if (!signature) {
16    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
17  }
18
19  let event: Stripe.Event;
20
21  try {
22    event = stripe.webhooks.constructEvent(
23      body,
24      signature,
25      process.env.STRIPE_WEBHOOK_SECRET!
26    );
27  } catch (err) {
28    console.error('Webhook signature verification failed:', err);
29    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
30  }
31
32  // Handle specific events
33  switch (event.type) {
34    case 'checkout.session.completed': {
35      const session = event.data.object as Stripe.Checkout.Session;
36      console.log('Payment completed:', session.id);
37      // TODO: Fulfill the order — grant access, send email, update database
38      break;
39    }
40    case 'customer.subscription.updated': {
41      const subscription = event.data.object as Stripe.Subscription;
42      console.log('Subscription updated:', subscription.id, subscription.status);
43      break;
44    }
45    case 'invoice.paid': {
46      const invoice = event.data.object as Stripe.Invoice;
47      console.log('Invoice paid:', invoice.id);
48      break;
49    }
50    default:
51      console.log('Unhandled event type:', event.type);
52  }
53
54  return NextResponse.json({ received: true });
55}

Before going live, thoroughly test the complete payment flow using Stripe's test mode. Stripe provides special test card numbers that simulate every payment scenario without charging real money. The most important test card is 4242 4242 4242 4242 with any future expiration date, any 3-digit CVC, and any 5-digit ZIP — this card always succeeds. Stripe also provides cards that simulate declines (4000 0000 0000 0002 for a generic decline), cards that require 3D Secure authentication (4000 0025 0000 3155), and cards that simulate insufficient funds (4000 0000 0000 9995). Test the happy path first: click the checkout button on your V0-generated page, complete the Stripe Checkout form with test card 4242..., verify you land on your success page, and check the Stripe Dashboard → Payments to confirm the test payment appears. Then check your Vercel logs (Vercel Dashboard → your project → Functions → View Logs) to see if the webhook was received and processed. For complex Stripe integrations with subscription management, customer portals, and metered billing, the configuration can get involved. RapidDev's team specializes in helping non-technical founders set up production-ready Stripe integrations with V0 — from webhook handling to subscription lifecycle management. When you are ready to go live, switch your environment variables in Vercel from test keys (sk_test_, pk_test_, whsec_test_) to live keys (sk_live_, pk_live_, whsec_). Update your Stripe webhook endpoint in the Dashboard to use your live Vercel URL if it is different from your preview URL. Run one real transaction with a real card for a small amount to confirm end-to-end before promoting your app widely.