Build a billing page in Next.js with Stripe

npx shadcn@latest add https://ui.minidev.pro/r/plan-card.json https://ui.minidev.pro/r/usage-meter.json https://ui.minidev.pro/r/invoice-list.json
npx shadcn@latest add https://ui.minidev.pro/r/payment-method-card.json https://ui.minidev.pro/r/credit-balance.json https://ui.minidev.pro/r/cancel-flow.json https://ui.minidev.pro/r/downgrade-warning.json
npm i stripe

import "server-only"
import Stripe from "stripe"

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function syncSubscription(customerId: string) {
  const { data } = await stripe.subscriptions.list({ customer: customerId, status: "all", limit: 1 })
  const sub = data[0]
  const item = sub?.items.data[0]
  await db.account.update({
    where: { stripeCustomerId: customerId },
    data: sub
      ? {
          subscriptionId: sub.id,
          status: sub.status,
          priceId: item?.price.id ?? null,
          periodEnd: item ? new Date(item.current_period_end * 1000) : null,
          cancelAtPeriodEnd: sub.cancel_at_period_end,
        }
      : { subscriptionId: null, status: "none", priceId: null, periodEnd: null, cancelAtPeriodEnd: false },
  })
}

import type Stripe from "stripe"
import { stripe, syncSubscription } from "@/lib/stripe"

const RELEVANT = new Set<string>([
  "checkout.session.completed",
  "customer.subscription.created",
  "customer.subscription.updated",
  "customer.subscription.deleted",
  "invoice.paid",
  "invoice.payment_failed",
])

export async function POST(req: Request) {
  const body = await req.text()
  const signature = req.headers.get("stripe-signature")
  if (!signature) return new Response("Missing signature", { status: 400 })

  let event: Stripe.Event
  try {
    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!)
  } catch {
    return new Response("Invalid signature", { status: 400 })
  }

  if (RELEVANT.has(event.type)) {
    const obj = event.data.object as { customer?: string | { id: string } | null }
    const customerId = typeof obj.customer === "string" ? obj.customer : obj.customer?.id
    if (customerId) await syncSubscription(customerId)
  }
  return new Response(null, { status: 200 })
}

import { stripe } from "@/lib/stripe"
import { UsageMeter } from "@/components/ui/usage-meter"
import { InvoiceList } from "@/components/ui/invoice-list"
import { PaymentMethodCard } from "@/components/ui/payment-method-card"
import { CreditBalance } from "@/components/ui/credit-balance"
import { PlanGrid } from "./plan-grid"

const date = (s: number) => new Date(s * 1000).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
const money = (cents: number, currency: string) =>
  new Intl.NumberFormat("en-US", { style: "currency", currency: currency.toUpperCase() }).format(cents / 100)

export default async function BillingRoute() {
  const account = await requireAccount()
  const customer = account.stripeCustomerId
  const [usage, invoices, cards, stripeCustomer] = await Promise.all([
    getUsage(account.id),
    stripe.invoices.list({ customer, limit: 12 }),
    stripe.paymentMethods.list({ customer, type: "card" }),
    stripe.customers.retrieve(customer),
  ])

  const rows = invoices.data
    .filter((i) => i.status !== "draft")
    .map((i) => ({
      id: i.number ?? i.id,
      date: date(i.created),
      amount: money(i.total, i.currency),
      status: i.status === "paid" ? ("paid" as const) : i.status === "void" ? ("void" as const) : ("open" as const),
    }))
  const card = cards.data[0]?.card
  const credit = stripeCustomer.deleted ? 0 : -stripeCustomer.balance
  const currency = stripeCustomer.deleted ? "usd" : stripeCustomer.currency ?? "usd"

  return (
    <div className="space-y-8">
      <PlanGrid currentPriceId={account.priceId} />
      <div className="grid gap-4 rounded-xl border border-border bg-surface p-4 sm:grid-cols-2">
        <UsageMeter label="Seats" used={usage.seats} limit={usage.seatLimit} />
        <UsageMeter label="Projects" used={usage.projects} limit={usage.projectLimit} />
      </div>
      {credit > 0 ? <CreditBalance label="Account credit" balance={money(credit, currency)} /> : null}
      {card ? (
        <PaymentMethodCard
          brand={card.brand.charAt(0).toUpperCase() + card.brand.slice(1)}
          last4={card.last4}
          exp={String(card.exp_month).padStart(2, "0") + "/" + String(card.exp_year).slice(-2)}
        />
      ) : null}
      <InvoiceList items={rows} />
    </div>
  )
}

"use server"
import { redirect } from "next/navigation"
import { revalidatePath } from "next/cache"
import { stripe, syncSubscription } from "@/lib/stripe"
import { PLANS } from "@/lib/plans"

export async function changePlan(priceId: string) {
  const account = await requireAccount()
  if (!PLANS.some((p) => p.priceId === priceId)) throw new Error("Unknown plan")

  if (!account.subscriptionId || account.status === "canceled") {
    const session = await stripe.checkout.sessions.create({
      mode: "subscription",
      customer: account.stripeCustomerId,
      line_items: [{ price: priceId, quantity: 1 }],
      success_url: process.env.APP_URL + "/billing?checkout=success",
      cancel_url: process.env.APP_URL + "/billing",
    })
    redirect(session.url!)
  }

  const sub = await stripe.subscriptions.retrieve(account.subscriptionId)
  await stripe.subscriptions.update(sub.id, {
    items: [{ id: sub.items.data[0].id, price: priceId }],
    proration_behavior: "create_prorations",
  })
  await syncSubscription(account.stripeCustomerId)
  revalidatePath("/billing")
}

"use client"
import { useTransition } from "react"
import { PlanCard } from "@/components/ui/plan-card"
import { PLANS } from "@/lib/plans"
import { changePlan } from "./actions"

export function PlanGrid({ currentPriceId }: { currentPriceId: string | null }) {
  const [pending, startTransition] = useTransition()
  return (
    <div className="grid gap-4 lg:grid-cols-3" aria-busy={pending}>
      {PLANS.map((p) => {
        const current = p.priceId === currentPriceId
        return (
          <PlanCard
            key={p.priceId}
            name={p.name}
            price={p.price}
            features={p.features}
            highlighted={current}
            cta={current ? "Current plan" : "Switch to " + p.name}
            onCta={() => {
              if (current || pending) return
              startTransition(() => changePlan(p.priceId))
            }}
          />
        )
      })}
    </div>
  )
}

export async function updateCard() {
  const account = await requireAccount()
  const session = await stripe.billingPortal.sessions.create({
    customer: account.stripeCustomerId,
    return_url: process.env.APP_URL + "/billing",
    flow_data: { type: "payment_method_update" },
  })
  redirect(session.url)
}

type Feedback = "too_expensive" | "unused" | "switched_service" | "missing_features" | "other"

export async function cancelSubscription(feedback: Feedback, comment?: string) {
  const account = await requireAccount()
  await stripe.subscriptions.update(account.subscriptionId!, {
    cancel_at_period_end: true,
    cancellation_details: { feedback, comment },
  })
  await syncSubscription(account.stripeCustomerId)
  revalidatePath("/billing")
}

export async function resumeSubscription() {
  const account = await requireAccount()
  await stripe.subscriptions.update(account.subscriptionId!, { cancel_at_period_end: false })
  await syncSubscription(account.stripeCustomerId)
  revalidatePath("/billing")
}

npx shadcn@latest add https://ui.minidev.pro/r/<name>.json