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

Your billing page is where free users become paying customers. Here's how to build one that actually converts — using React Server Components and Stripe. What the billing page needs Current plan display with status badge Plan comparison with feature lists Upgrade/downgrade buttons that trigger Stripe Checkout Payment history The plan config Keep plan data centralized: // src/lib/stripe.ts export const PLANS = { free : { name : " Free " , price : { monthly : 0 }, features : [ " Up to 3 projects " , " Basic analytics " , " Community support " ], }, pro : { name : " Pro " , price : { monthly : 29 }, stripePriceId : process . env . STRIPE_PRO_PRICE_ID , features : [ " Unlimited projects " , " Advanced analytics " , " Priority support " , " AI assistant (1000 msgs/mo) " ], }, enterprise : { name : " Enterprise " , price : { monthly : 99 }, stripePriceId : process . env . STRIPE_ENTERPRISE_PRICE_ID , features : [ " Everything in Pro " , " Unlimited team members " , " SSO/SAML " , " Unlimited