Building a SaaS Billing Page with Stripe and Next.js (React Server Components)

Every SaaS app needs a billing page. It's where users manage their subscription, upgrade their plan, or cancel. Get it wrong and you lose trust. Get it right and it quietly handles customer success at scale. In this guide, I'll show you how to build a production-ready billing page using Next.js 16 React Server Components and Stripe . We'll cover: Fetching and displaying active subscription data Embedding the Stripe Customer Portal Handling plan upgrade redirects Protecting the route by subscription status This is the exact pattern used in LaunchKit — the Next.js 16 SaaS starter kit I built and sell. Prerequisites Next.js 16 app with App Router Stripe account + secret key stripe npm package installed Auth.js v5 session (or any session that gives you userId ) 1. Install Stripe npm install stripe Set your env vars: STRIPE_SECRET_KEY=sk_live_... STRIPE_WEBHOOK_SECRET=whsec_... NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_... 2. Create a Stripe Utility // lib/stripe.ts import Stripe from ' st