npm install stripe @stripe/stripe-js @stripe/react-stripe-js

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_BASE_URL=http://localhost:3000

import Stripe from "stripe";

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2025-09-30.clover", // Pin to a known version, never auto-upgrade
  typescript: true,
});

"use server";

import { stripe } from "@/lib/stripe";
import { headers } from "next/headers";

export async function createCheckoutSession(priceId: string) {
  // Always look up price on the server — never trust the client
  const price = await stripe.prices.retrieve(priceId);
  if (!price.active) throw new Error("Price is not active");

  const origin = (await headers()).get("origin") || process.env.NEXT_PUBLIC_BASE_URL!;

  const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded", // 2026 default — keeps users on your domain
    line_items: [{ price: priceId, quantity: 1 }],
    mode: price.recurring ? "subscription" : "payment",
    return_url: `${origin}/return?session_id={CHECKOUT_SESSION_ID}`,
    automatic_tax: { enabled: true },
    allow_promotion_codes: true,
  });

  if (!session.client_secret) throw new Error("Could not create session");

  return { clientSecret: session.client_secret };
}

"use client";

import { useCallback } from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from "@stripe/react-stripe-js";
import { createCheckoutSession } from "@/actions/stripe";

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

export default function CheckoutPage({
  searchParams,
}: {
  searchParams: { priceId: string };
}) {
  const fetchClientSecret = useCallback(async () => {
    const { clientSecret } = await createCheckoutSession(searchParams.priceId);
    return clientSecret;
  }, [searchParams.priceId]);

  return (
    <div id="checkout" className="min-h-screen p-8">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={{ fetchClientSecret }}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
}

import { headers } from "next/headers";
import { NextResponse } from "next/server";
import type Stripe from "stripe";
import { stripe } from "@/lib/stripe";

export async function POST(req: Request) {
  const body = await req.text(); // raw body — do NOT use req.json()
  const signature = (await headers()).get("stripe-signature");

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature!,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err: any) {
    return NextResponse.json(
      { error: `Webhook Error: ${err.message}` },
      { status: 400 }
    );
  }

  // Idempotency check — Stripe may retry the same event
  const alreadyProcessed = await db.webhookEvent.findUnique({
    where: { stripeId: event.id },
  });
  if (alreadyProcessed) {
    return NextResponse.json({ received: true, duplicate: true });
  }

  // Handle the event
  switch (event.type) {
    case "checkout.session.completed":
      const session = event.data.object as Stripe.Checkout.Session;
      await fulfillOrder(session); // grant access, send email, etc.
      break;
    case "invoice.paid":
      await extendSubscription(event.data.object as Stripe.Invoice);
      break;
    case "customer.subscription.deleted":
      await revokeAccess(event.data.object as Stripe.Subscription);
      break;
    case "invoice.payment_failed":
      await notifyDunning(event.data.object as Stripe.Invoice);
      break;
    default:
      console.log(`Unhandled event type ${event.type}`);
  }

  // Mark as processed only AFTER fulfillment succeeds
  await db.webhookEvent.create({ data: { stripeId: event.id } });

  return NextResponse.json({ received: true });
}

"use server";

import { stripe } from "@/lib/stripe";
import { auth } from "@/lib/auth"; // your auth provider
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export async function openCustomerPortal() {
  const { userId } = await auth();
  if (!userId) throw new Error("Unauthorized");

  const user = await db.user.findUnique({ where: { id: userId } });
  if (!user?.stripeCustomerId) throw new Error("No Stripe customer");

  const origin = (await headers()).get("origin")!;

  const portalSession = await stripe.billingPortal.sessions.create({
    customer: user.stripeCustomerId,
    return_url: `${origin}/dashboard`,
  });

  redirect(portalSession.url);
}

<form action={openCustomerPortal}>
  <button className="px-4 py-2 bg-slate-900 text-white rounded-lg">
    Manage Subscription
  </button>
</form>