To add Stripe Checkout to a Next.js app, create a Checkout Session in server-side code, send the customer to the session URL, and use a verified Stripe webhook to confirm the payment and fulfill the order. Keep the Stripe secret key out of browser code; treat the success page as a return experience, not proof that fulfillment happened.
Choose the Checkout experience and session mode
Stripe offers hosted Checkout, which sends customers to a Stripe-hosted page, and embedded components, which keep the payment experience on your site. Choose based on the experience and features your business needs; Stripe outlines the options in its Checkout quickstarts. This walkthrough focuses on hosted Checkout, where your app creates a session and redirects the customer to Stripe.
Set the Checkout Session mode according to the transaction:
| Mode | Use it for |
|---|---|
payment |
A one-time payment. |
subscription |
Recurring items or subscriptions. |
setup |
Saving payment details for later use. |
Include the appropriate line items and success and cancel handling for your selected experience. Stripe documents the fields in its Create a Checkout Session API reference.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
Keep Stripe credentials on the server
Your Stripe secret key belongs in server-side code, typically supplied through a server-only environment variable. Do not name it with the NEXT_PUBLIC_ prefix: Next.js inlines variables with that prefix into browser JavaScript at build time. See the Next.js environment-variable guide.
Use a publishable key only where a browser-side Stripe integration requires one. Never expose the secret key in a client component, browser bundle, or client-visible response.
Rank #2
Create a Checkout Session and redirect the customer
In the server-side action or endpoint handling the checkout request, initialize Stripe with the secret key, create a Checkout Session with the selected mode and line items, and return or redirect to the session’s URL. The session-creation step belongs on the server because it uses the secret key. See Stripe’s Checkout Sessions API.
- Start from a server entry point. In an App Router project, this might be a Server Action or a Route Handler. The exact location depends on your app and Next.js version; the Vercel Next.js and Stripe guide demonstrates an App Router pattern.
- Create the session. Set
mode, supply the relevant line items, and configure success and cancel destinations appropriate to the checkout experience. - Send the customer to Stripe. Redirect the browser to the URL returned by the session creation call. For a hosted flow, the customer completes payment on Stripe’s page.
- Choose what the return page displays. If it needs to retrieve the session, Stripe’s existing-customer guide shows a success URL using the
{CHECKOUT_SESSION_ID}template: Stripe’s hosted Checkout guidance.
Do not let the browser choose trusted prices or other order-critical values without server-side validation. Build the session from product and price information your server has verified; the available documentation does not prescribe how your catalog or tax rules should be structured.
Verify webhooks and fulfill from events
A customer can pay and then close the tab before returning to your success page. Stripe explicitly warns: “Triggering fulfillment only from your Checkout success page is unreliable.” Use a webhook as the server-to-server signal for fulfillment, rather than relying on the browser redirect. Stripe’s hosted Checkout guidance describes the return flow and fulfillment considerations.
In a Next.js Route Handler, read the incoming request body and Stripe signature header, then verify the signature using the webhook signing secret for that endpoint before acting on the event. Handle the event types relevant to your transaction; for example, checkout.session.completed can trigger order confirmation, database logging, or shipping workflows. See the Vercel integration guide for a Route Handler pattern.
- Reject requests whose Stripe signature does not validate; do not treat arbitrary incoming JSON as a Stripe event.
- Perform fulfillment on the server in response to the verified event, not merely because a visitor loaded a success URL.
- Keep the handler focused on the events and downstream actions your app actually needs.
Test webhooks locally and configure production delivery
Stripe needs to reach a webhook endpoint to deliver events. During local development, the official Next.js Stripe example uses the Stripe CLI to forward events to a local route. For deployment, configure the publicly reachable endpoint in Stripe and use that endpoint’s signing secret in the deployed environment. Do not substitute a local forwarding secret for the production endpoint’s secret.
The same example covers local forwarding and production endpoint setup. Its patterns are useful starting points, but adapt the Route Handler and checkout entry point to your app’s router and Next.js version rather than assuming every project uses the App Router.
Decisions your app still needs to make
The integration flow does not decide your business rules. Before treating a Checkout Session as a complete ordering system, determine which products and prices your server will offer, whether tax handling is needed, what fulfillment means for your product, and which payment methods are eligible. Those details depend on your catalog, region, Stripe configuration, and application; they are not established by the basic session-and-webhook pattern.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
