How to Add Stripe to Next.js 16 (2026 Guide)

Quick Start: Stripe + Next.js 16

Adding Stripe payments to a Next.js 16 application requires setting up the Stripe SDK, creating checkout sessions, handling webhooks, and building a customer portal.

Step 1: Install Stripe SDK

npm install stripe @stripe/stripe-js

Step 2: Create a Checkout Session (Route Handler)

// app/api/checkout/route.ts
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [{ price: 'price_xxx', quantity: 1 }],
    mode: 'subscription',
    success_url: 'https://yoursite.com/success',
    cancel_url: 'https://yoursite.com/cancel',
  });
  return Response.json({ url: session.url });
}

Step 3: Handle Webhooks

1
2
3
4
5
6
7
8
9
// app/api/webhooks/stripe/route.ts
export async function POST(req: Request) {
  const sig = req.headers.get('stripe-signature')!;
  const event = stripe.webhooks.constructEvent(
    await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET!
  );
  // Handle checkout.session.completed, customer.subscription.updated, etc.
  return Response.json({ received: true });
}

Step 4: Customer Portal

1
2
3
4
5
6
7
export async function POST(req: Request) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: 'https://yoursite.com/dashboard',
  });
  return Response.json({ url: session.url });
}

Want This Already Built?

ShipKit is a Next.js 16 SaaS boilerplate that includes complete Stripe integration: checkout sessions, webhook handlers, customer portal, subscription management, and a billing page. Plus NextAuth v5, Prisma 7, dark mode, landing page, and dashboard.

Price: 149 USD (one-time, unlimited projects)
Get it: rentry.co/devtools-store
Pay: ETH/USDC/USDT to 0xA18dC9fA96089d273421a57C18de0bf1FE9FaB52
Email: [email protected]

Edit

Pub: 13 May 2026 17:24 UTC

Views: 4