How to Add Stripe Checkout to Next.js
in 15 Minutes (2026 Guide)

npm install stripe

STRIPE_SECRET_KEY=sk_test_your_key_here
NEXT_PUBLIC_BASE_URL=http://localhost:3000

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

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

export async function POST(request: Request) {
  try {
    const session = await stripe.checkout.sessions.create({
      mode: "payment",
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: "Your Product Name",
              description: "A short description of what the customer is buying",
            },
            unit_amount: 2999, // $29.99 in cents
          },
          quantity: 1,
        },
      ],
      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/`,
    });

    return NextResponse.json({ url: session.url });
  } catch (err) {
    console.error("Stripe checkout error:", err);
    return NextResponse.json(
      { error: "Failed to create checkout session" },
      { status: 500 }
    );
  }
}

"use client";

import { useState } from "react";

export default function CheckoutButton() {
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);

    try {
      const res = await fetch("/api/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });

      const data = await res.json();

      if (data.url) {
        window.location.href = data.url;
      } else {
        console.error("No checkout URL returned");
        setLoading(false);
      }
    } catch (err) {
      console.error("Checkout error:", err);
      setLoading(false);
    }
  };

  return (
    <button
      onClick={handleCheckout}
      disabled={loading}
      className="px-6 py-3 bg-indigo-600 text-white font-semibold
        rounded-lg hover:bg-indigo-500 disabled:opacity-50
        disabled:cursor-not-allowed transition-colors"
    >
      {loading ? "Redirecting..." : "Buy Now — $29.99"}
    </button>
  );
}

import CheckoutButton from "./components/CheckoutButton";

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <div className="text-center space-y-6">
        <h1 className="text-4xl font-bold">My Awesome Product</h1>
        <p className="text-gray-600">One-time purchase, instant access.</p>
        <CheckoutButton />
      </div>
    </main>
  );
}

import Stripe from "stripe";

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

export default async function SuccessPage({
  searchParams,
}: {
  searchParams: Promise<{ session_id?: string }>;
}) {
  const { session_id } = await searchParams;
  let customerEmail = null;

  if (session_id) {
    try {
      const session = await stripe.checkout.sessions.retrieve(session_id);
      customerEmail = session.customer_details?.email;
    } catch {
      // Invalid session ID — just show generic message
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-6">
      <div className="text-center space-y-4 max-w-md">
        <div className="text-5xl mb-2">&#10003;</div>
        <h1 className="text-3xl font-bold">Payment successful!</h1>
        <p className="text-gray-600">
          {customerEmail
            ? `A receipt has been sent to ${customerEmail}.`
            : "Check your email for the receipt."}
        </p>
        <a
          href="/"
          className="inline-block mt-4 text-indigo-600 hover:underline"
        >
          &larr; Back to home
        </a>
      </div>
    </div>
  );
}

npm run dev

your-nextjs-app/
├── app/
│   ├── api/
│   │   └── checkout/
│   │       └── route.ts        ← Creates Stripe Checkout sessions
│   ├── components/
│   │   └── CheckoutButton.tsx  ← Client-side "Buy" button
│   ├── success/
│   │   └── page.tsx            ← Post-payment confirmation page
│   ├── layout.tsx
│   └── page.tsx                ← Your homepage (import CheckoutButton here)
├── .env.local                  ← STRIPE_SECRET_KEY + NEXT_PUBLIC_BASE_URL
└── package.json