How to Integrate Stripe with Next.js (In 5 Minutes or Less)

If you're building a project with Next.js and want to collect payments using Stripe, there's never been a better time. Whether you're launching a side project or spinning up a SaaS product, integrating Stripe with your Next.js app is now fast, low-friction, and stable.

In this post, we’ll walk through a simple way to set up subscriptions using Stripe and Next.js — with full support for login, checkout, and entitlements — using a toolkit that handles the hard stuff for you.

Why Stripe + Next.js?

Next.js is ideal for building modern, full-stack React apps. Stripe is the best tool available for payments. But getting them to talk to each other cleanly still requires:

• Subscription and customer management
• Checkout flows
• Webhooks
• User entitlement logic
• Role-gated UI

You can wire this up manually… or use a pre-built boilerplate and infrastructure that does 90% of the work for you.

Step 1 — Clone the Stripe + Next.js Template

The Next.js SaaS Starter Template includes:

• Next.js + Stripe + Supabase
• Auth and billing entitlements via Update.dev
• Webhook integration
• Clean UI for pricing, account, and settings

To get started:

git clone https://github.com/wyattm14/saas-template.git
cd saas-template
pnpm install

Step 2 — Connect Supabase & Stripe with Update

Update handles authentication and billing for you. Once you connect Stripe and Supabase in the Update dashboard, you’ll get all the env vars you need to drop into a .env file:

NEXT_PUBLIC_UPDATE_PUBLIC_KEY=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Step 3 — Start the Dev Server

pnpm dev

Visit http://localhost:3000 and sign in. You’ll see a cat photo generator app with features locked behind a paywall.

Step 4 — Add Plans and Entitlements

In your Update dashboard:

1. Go to Entitlements and create a new entitlement (e.g. pro)
2. Go to Products, create a product, and link it to the entitlement

Done — your app now supports Stripe subscriptions and recognizes paid users.

You can test the billing flow with Stripe’s test card:

• Card Number: 4242 4242 4242 4242
• Expiry: any future date
• CVC: any 3-digit number

Using the Update JS Client (for Custom Integrations)

If you’re building a custom Next.js + Stripe setup (instead of using the full starter), Update provides a flexible JavaScript client that connects your auth and billing logic.

Install it:

npm install @updatedev/js @updatedev/ssr

Set up the client:

// utils/update/client.ts
import { createBrowserClient } from "@updatedev/ssr/supabase";
 
export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_UPDATE_PUBLIC_KEY!,
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

Examples from the Update client:

• Create a Stripe checkout session

await client.billing.createCheckoutSession(priceId, {
  redirect_url: "http://localhost:3000/account",
});

• Get products and prices

const { data } = await client.billing.getProducts();

• Get current user’s subscriptions

const { data } = await client.billing.getSubscriptions();

• Cancel or reactivate a subscription

await client.billing.updateSubscription(subscriptionId, {
  cancel_at_period_end: true,
});

• Use Update’s hosted sign-in pages

const { data } = await client.auth.createConnectLink();
window.location.href = data.url;

The client supports full integration with Supabase auth and has built-in methods for billing, entitlements, and session verification.

To go deeper, check the full Update.js Documentation or browse examples at update.dev/docs.

Conclusion

Integrating Stripe with Next.js doesn’t have to be painful. Whether you’re starting from a boilerplate or setting things up yourself, tools like Stripe, Supabase, and Update make it easy to go from zero to billing in minutes.

And if you want something that just works out of the box, the Next.js SaaS Starter Template is built exactly for that.