Integrate Stripe Checkout into your Next.js application — create a checkout session, handle webhooks, verify payments, and implement a post-payment success page.
In this guide
Install: npm install stripe @stripe/stripe-js. Add to your .env.local: STRIPE_SECRET_KEY=sk_test_... and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_.... Get these from your Stripe Dashboard → Developers → API keys. Never expose your secret key client-side — it must only be used in API routes or server components.
Create src/app/api/checkout/route.ts: import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(req) { const { priceId } = await req.json(); const session = await stripe.checkout.sessions.create({ mode: "payment", line_items: [{ price: priceId, quantity: 1 }], success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`, cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel` }); return Response.json({ url: session.url }); }
In your component: async function handleCheckout() { const res = await fetch("/api/checkout", { method: "POST", body: JSON.stringify({ priceId: "price_xxx" }) }); const { url } = await res.json(); window.location.href = url; }. Stripe handles the entire payment UI — you redirect to their hosted page and they redirect back to your success_url when payment completes.
Never trust the success URL alone — users can manipulate query parameters. Create a webhook endpoint at /api/stripe/webhook. In your Stripe Dashboard, add the webhook URL and select the checkout.session.completed event. Stripe sends a signed POST request when payment succeeds. Verify the signature: const event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET). Then fulfill the order inside that handler.
Use Stripe test card 4242 4242 4242 4242 with any future expiry and any 3-digit CVC to simulate successful payments. Use 4000 0000 0000 0002 to simulate a declined card. Use 4000 0025 0000 3155 to test 3D Secure. Run the Stripe CLI to forward webhooks to localhost: stripe listen --forward-to localhost:3000/api/stripe/webhook.
Need Help?
Our engineering team handles implementations like this every week. Get a free scoping call — we will tell you exactly what it takes and what it costs.
Book a free callCompetitive Intelligence
Efficiency Modeling
© 2026 NexWorldTech — Built for Global Dominance.