A Stripe Checkout success page in Next.js

Put {CHECKOUT_SESSION_ID} in success_url, look the session up on the server, check it's paid, then show the order. Fulfil from a webhook as well, because Stripe says the success page alone isn't enough.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/checkout/success/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { fulfillCheckout } from "@/lib/fulfill";

// Amounts come in the currency's smallest unit (cents for USD). Intl knows how many decimals each currency has.
function money(amount: number | null, currency: string | null) {
  if (amount == null || !currency) return "";
  const fmt = new Intl.NumberFormat("en", { style: "currency", currency });
  return fmt.format(amount / 10 ** (fmt.resolvedOptions().maximumFractionDigits ?? 2));
}

export default async function CheckoutSuccess({
  searchParams,
}: {
  searchParams: Promise<{ session_id?: string }>;
}) {
  const { session_id } = await searchParams;
  if (!session_id?.startsWith("cs_")) redirect("/");

  // Same function the webhook calls. Whichever runs first records the order; the other finds it done.
  const { session, fulfilled } = await fulfillCheckout(session_id);

  if (session.status === "open") redirect("/checkout"); // they never finished paying
  if (session.status === "expired") redirect("/checkout?expired=1");

  const items = session.line_items?.data ?? [];

  return (
    <main className="mx-auto max-w-md px-6 py-16">
      <p className="text-sm text-neutral-500">Order {session.id.slice(-8)}</p>
      <h1 className="mt-1 text-2xl font-semibold">
        {fulfilled ? "Thanks, you're all set" : "Payment received, it's still processing"}
      </h1>
      {!fulfilled && (
        <p className="mt-2 text-neutral-500">Your bank is confirming the payment. We'll email you when it clears.</p>
      )}
      <ul className="mt-8 divide-y divide-neutral-200 border-y border-neutral-200">
        {items.map((li) => (
          <li key={li.id} className="flex justify-between py-3">
            <span>
              {li.description} <span className="text-neutral-500">x {li.quantity}</span>
            </span>
            <span className="tabular-nums">{money(li.amount_total, li.currency)}</span>
          </li>
        ))}
      </ul>
      <p className="mt-4 flex justify-between font-medium">
        <span>Total</span>
        <span className="tabular-nums">{money(session.amount_total, session.currency)}</span>
      </p>
      {session.customer_details?.email && (
        <p className="mt-6 text-sm text-neutral-500">A receipt is on its way to {session.customer_details.email}.</p>
      )}
      <Link href="/" className="mt-8 inline-block underline">
        Back to the store
      </Link>
    </main>
  );
}

app/api/checkout/route.ts (creates the session)

import { NextResponse } from "next/server";
import Stripe from "stripe";

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

// POST from your Buy button's form. Stripe swaps {CHECKOUT_SESSION_ID} for the real id when it redirects.
export async function POST(req: Request) {
  const origin = new URL(req.url).origin;
  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [{ price: process.env.STRIPE_PRICE_ID!, quantity: 1 }],
    success_url: `${origin}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${origin}/checkout?canceled=1`,
  });
  return NextResponse.redirect(session.url!, 303);
}

lib/fulfill.ts (safe to run twice)

import "server-only";
import Stripe from "stripe";
import { saveOrderOnce } from "@/lib/orders";

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

// Called by the webhook AND the success page, so it must be safe to run twice for the same session.
export async function fulfillCheckout(sessionId: string) {
  const session = await stripe.checkout.sessions.retrieve(sessionId, { expand: ["line_items"] });

  // "unpaid" after a completed Checkout means a delayed method (a bank debit, say) is still processing.
  if (session.payment_status === "unpaid") return { session, fulfilled: false };

  // saveOrderOnce writes one row per session id (a unique column) and returns false if it was already there.
  await saveOrderOnce({
    sessionId: session.id,
    email: session.customer_details?.email ?? null,
    items: (session.line_items?.data ?? []).map((li) => ({ name: li.description ?? "", quantity: li.quantity ?? 1 })),
  });
  return { session, fulfilled: true };
}

app/api/stripe/webhook/route.ts

import Stripe from "stripe";
import { fulfillCheckout } from "@/lib/fulfill";

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

export async function POST(req: Request) {
  const body = await req.text(); // the raw body: the signature is checked against these exact bytes
  const signature = req.headers.get("stripe-signature") ?? "";

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch {
    return new Response("Bad signature", { status: 400 });
  }

  if (event.type === "checkout.session.completed" || event.type === "checkout.session.async_payment_succeeded") {
    await fulfillCheckout(event.data.object.id);
  }
  return new Response(null, { status: 200 });
}

Good to know

The placeholder is literal: write {CHECKOUT_SESSION_ID} in success_url exactly like that and Stripe replaces it with the session id (cs_...) when it sends the buyer back.
Stripe's docs are direct about it: "You can't rely on triggering fulfillment only from your checkout landing page, because it's not guaranteed customers visit that page." That's why the webhook calls the same fulfillCheckout. Their docs also recommend running it from the landing page, so a buyer who is present gets the order right away when the webhook is late.
Per the same page, when a webhook endpoint listens for checkout.session.completed and you set a success_url, Checkout waits up to 10 seconds for your server to answer that event before redirecting. With the Stripe CLI in local testing it redirects at once, so test the success page without counting on the webhook having run.
status "complete" with payment_status "unpaid" is a delayed payment method still processing (ACH and other bank transfers, per Stripe). It turns into checkout.session.async_payment_succeeded later, which the webhook above also handles.
Anyone with the URL can open the page, so show the order and a masked id, not account details. Amounts arrive in the currency's smallest unit; the money() helper reads the decimals from Intl, which follows ISO 4217. Check your currency against Stripe's list of zero-decimal currencies if it isn't a common one.
Embedding Checkout in your own page instead of redirecting uses return_url, not success_url. Both fields are in stripe-node 23.0.1's types.

Skip the redirect: make the receipt the success state

Hosted Checkout always ends with a redirect, so the success page is where the buyer lands. If you take card details on your own page with Stripe Elements instead, there's no redirect, and the moment the payment confirms is yours to design.
Receipt Morph Checkout is built for that moment. Stripe's card Elements go in the renderCardFields slot, so card digits never reach your code or the component. Your onConfirm runs stripe.confirmCardPayment. When it resolves ok, the card splits, unrolls into a paper receipt and gets stamped PAID. onComplete then hands you the receipt (orderId, total, last4, paidAt).
The webhook rule doesn't change. With Elements you still record the order from Stripe's payment events on your server, not from the animation finishing. The Elements wiring for this piece (Stripe's CardElement inside the slot) is on its own guide, linked below. Its stylesheet is written for a full page, so in a shadcn app scope it first; the same guide has that edit.

Receipt Morph Checkout with Stripe Elements

components/pay.tsx (Receipt Morph Checkout)

"use client";
import { useRouter } from "next/navigation";
import { CheckoutReceiptMorph, type CardFieldsSlot, type PayResult } from "@/components/CheckoutReceiptMorph";

// The receipt is the success state: no redirect, the card unrolls into it on this page.
// stripeFields renders Stripe's card Elements in the slot; confirmWithStripe runs stripe.confirmCardPayment.
export default function Pay({
  stripeFields,
  confirmWithStripe,
}: {
  stripeFields: (slot: CardFieldsSlot) => React.ReactNode;
  confirmWithStripe: (info: { name: string }) => Promise<PayResult & { last4?: string }>;
}) {
  const router = useRouter();
  return (
    <CheckoutReceiptMorph
      autoplayDemo={false}
      renderCardFields={stripeFields}
      onConfirm={confirmWithStripe}
      onComplete={(receipt) => setTimeout(() => router.push(`/orders/${receipt.orderId}`), 2500)}
    />
  );
}

What we checked

Read on October 26, 2026: stripe-node 23.0.1 (published October 22, 2026, API version 2026-09-30) types Session.status as open, complete or expired and payment_status as paid, unpaid or no_payment_required. The quotes and the 10 second wait come from Stripe's fulfillment and custom success page docs, read the same day.
All four files on this page, plus the Receipt Morph Checkout wrapper, type-check with TypeScript 5.9 strict and build with next build on Next.js 15.5.28 and React 19.1.1 against stripe 23.0.1. We didn't run them against a live Stripe account.

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion stripe.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

order: the order the receipt shows (items, total)
renderCardFields: slot for Stripe's card Elements; card digits never reach the component
onConfirm: confirm the payment with Stripe, return ok and last4
onComplete: gets the receipt: orderId, total, last4, paidAt
autoplayDemo: false in a real app
accent / secondary: brand colours

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Stripe Elements With a Custom Card Design in React and Next.js

Questions

Why is session_id missing on my success page?

The success_url has to contain the text {CHECKOUT_SESSION_ID} with the braces. Stripe only fills in that exact placeholder.

Should I fulfil the order on the success page?

Not only there. Stripe recommends a webhook for checkout.session.completed, because a buyer can pay and never load the page. Running the same idempotent function from both is what Stripe's docs suggest.

What if payment_status is unpaid?

The session is complete but a delayed method is still processing. Show a pending message and fulfil on checkout.session.async_payment_succeeded.

Does Receipt Morph Checkout work with hosted Stripe Checkout?

No. Hosted Checkout takes payment on Stripe's page. Receipt Morph Checkout is for taking the card on your own page with Stripe Elements.

Does Receipt Morph Checkout work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.