Next.js+Stripe
Stack IntegrationNext.js + Stripe Integration Guide
Stripe in a Next.js App Router project requires server-side handling for webhooks, checkout sessions, and the customer portal. Never expose secret keys to client components.
Use Cases
- Stripe Checkout for one-time and subscription payments
- Webhook handler in Next.js Route Handler
- Customer portal for billing management
- Stripe secret key isolated to server components and API routes
Implementation
Create a `app/api/webhooks/stripe/route.ts` handler. Verify the webhook signature with `stripe.webhooks.constructEvent`. Checkout sessions created server-side — the client only receives a redirect URL. Use environment variables for all Stripe keys, never import in client components.