How to build a subscription billing app with Next.js and Whop

npm install -g @whop/cli
export WHOP_API_BASE_URL=https://sandbox-api.whop.com/api/v1
export WHOP_API_KEY=apik_XXXXXXXX

whop products create --title "Pro membership" --visibility visible
whop plans create --product_id prod_XXXXXXXX --plan_type renewal --initial_price 0 --renewal_price 29 --billing_period 30

npx create-next-app@latest subscription-billing --typescript --tailwind --app
cd subscription-billing
npm install @whop/sdk @whop/elements @whop/elements-react iron-session zod

import { z } from "zod";

const envSchema = z.object({
  WHOP_COMPANY_API_KEY: z.string().min(1),
  WHOP_PLAN_ID: z.string().startsWith("plan_"),
  WHOP_CLIENT_ID: z.string().startsWith("app_"),
  WHOP_CLIENT_SECRET: z.string().min(1),
  WHOP_WEBHOOK_SECRET: z.string().startsWith("ws_").optional(),
  WHOP_SANDBOX: z
    .string()
    .optional()
    .transform((value) => value === "true"),
  SESSION_SECRET: z.string().min(32),
  APP_URL: z.url(),
});

export type Env = z.infer<typeof envSchema>;

let cached: Env | null = null;

export function getEnv(): Env {
  cached ??= envSchema.parse(process.env);
  return cached;
}

import { WhopClient, WhopEnvironment } from "@whop/sdk";
import { getEnv } from "@/lib/env";

let cached: WhopClient | null = null;

export function getWhop(): WhopClient {
  if (cached) return cached;
  const env = getEnv();
  cached = new WhopClient({
    token: env.WHOP_COMPANY_API_KEY,
    environment: env.WHOP_SANDBOX ? WhopEnvironment.Sandbox : WhopEnvironment.Production,
  });
  return cached;
}

import { getIronSession, type IronSession } from "iron-session";
import { cookies } from "next/headers";
import { getEnv } from "@/lib/env";

export interface SessionData {
  whopUserId?: string;
  email?: string;
}

export async function getSession(): Promise<IronSession<SessionData>> {
  return getIronSession<SessionData>(await cookies(), {
    password: getEnv().SESSION_SECRET,
    cookieName: "billing_session",
    cookieOptions: {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "lax",
      path: "/",
    },
  });
}

import { cookies } from "next/headers";
import { z } from "zod";
import { getEnv } from "@/lib/env";

const PKCE_COOKIE = "whop_pkce";

const pkceSchema = z.object({
  codeVerifier: z.string(),
  state: z.string(),
  nonce: z.string(),
});

const tokenSchema = z.object({
  access_token: z.string(),
  id_token: z.string().optional(),
});

const userInfoSchema = z.object({
  sub: z.string(),
  email: z.string().nullish(),
});

export type WhopUser = z.infer<typeof userInfoSchema>;

function oauthHost(): string {
  return getEnv().WHOP_SANDBOX ? "https://sandbox-api.whop.com" : "https://api.whop.com";
}

function redirectUri(): string {
  return `${getEnv().APP_URL}/api/auth/callback`;
}

function randomString(bytes: number): string {
  return Buffer.from(crypto.getRandomValues(new Uint8Array(bytes))).toString("base64url");
}

function nonceFromIdToken(idToken: string): unknown {
  const payload: unknown = JSON.parse(Buffer.from(idToken.split(".")[1] ?? "", "base64url").toString());
  return payload && typeof payload === "object" && "nonce" in payload ? payload.nonce : undefined;
}

export async function startSignIn(): Promise<string> {
  const pkce = { codeVerifier: randomString(32), state: randomString(16), nonce: randomString(16) };
  const store = await cookies();
  store.set(PKCE_COOKIE, JSON.stringify(pkce), {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
    maxAge: 600,
  });

  const challenge = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(pkce.codeVerifier));
  const params = new URLSearchParams({
    response_type: "code",
    client_id: getEnv().WHOP_CLIENT_ID,
    redirect_uri: redirectUri(),
    scope: "openid profile email",
    state: pkce.state,
    nonce: pkce.nonce,
    code_challenge: Buffer.from(challenge).toString("base64url"),
    code_challenge_method: "S256",
  });
  return `${oauthHost()}/oauth/authorize?${params.toString()}`;
}

export async function finishSignIn(code: string, state: string): Promise<WhopUser> {
  const store = await cookies();
  const saved = store.get(PKCE_COOKIE)?.value;
  store.delete(PKCE_COOKIE);
  const pkce = pkceSchema.parse(JSON.parse(saved ?? "null"));
  if (pkce.state !== state) throw new Error("OAuth state mismatch");

  const env = getEnv();
  const tokenResponse = await fetch(`${oauthHost()}/oauth/token`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      grant_type: "authorization_code",
      code,
      redirect_uri: redirectUri(),
      client_id: env.WHOP_CLIENT_ID,
      client_secret: env.WHOP_CLIENT_SECRET,
      code_verifier: pkce.codeVerifier,
    }),
  });
  if (!tokenResponse.ok) throw new Error(`Token exchange failed with ${tokenResponse.status}`);
  const tokens = tokenSchema.parse(await tokenResponse.json());
  if (tokens.id_token && nonceFromIdToken(tokens.id_token) !== pkce.nonce) {
    throw new Error("OAuth nonce mismatch");
  }

  const userResponse = await fetch(`${oauthHost()}/oauth/userinfo`, {
    headers: { Authorization: `Bearer ${tokens.access_token}` },
  });
  if (!userResponse.ok) throw new Error(`Userinfo failed with ${userResponse.status}`);
  return userInfoSchema.parse(await userResponse.json());
}

import { NextResponse } from "next/server";
import { startSignIn } from "@/lib/whop-oauth";

export async function GET(): Promise<NextResponse> {
  return NextResponse.redirect(await startSignIn());
}

import { NextResponse, type NextRequest } from "next/server";
import { finishSignIn } from "@/lib/whop-oauth";
import { getSession } from "@/lib/session";
import { getEnv } from "@/lib/env";

export async function GET(request: NextRequest): Promise<NextResponse> {
  const appUrl = getEnv().APP_URL;
  const code = request.nextUrl.searchParams.get("code");
  const state = request.nextUrl.searchParams.get("state");
  if (!code || !state) return NextResponse.redirect(`${appUrl}/?error=signin_cancelled`);

  try {
    const user = await finishSignIn(code, state);
    if (!user.email) return NextResponse.redirect(`${appUrl}/?error=email_required`);

    const session = await getSession();
    session.whopUserId = user.sub;
    session.email = user.email;
    await session.save();

    return NextResponse.redirect(`${appUrl}/`);
  } catch (error: unknown) {
    console.error("Sign in failed", error);
    return NextResponse.redirect(`${appUrl}/?error=signin_failed`);
  }
}

import { getWhop } from "@/lib/whop";
import { getEnv } from "@/lib/env";

export interface Subscription {
  id: string;
  status: string;
  paused: boolean;
  cancelAtPeriodEnd: boolean;
  renewsAt: string | null;
  manageUrl: string | null;
}

export const ACTIONS = ["cancel_at_period_end", "keep", "pause", "resume"] as const;
export type SubscriptionAction = (typeof ACTIONS)[number];

const ACCESS_STATUSES = new Set(["active", "trialing", "past_due"]);
const ENDED_STATUSES = new Set(["completed", "canceled", "expired"]);

export async function getMonthlyPrice(): Promise<number> {
  const plan = await getWhop().variants.retrieve({ id: getEnv().WHOP_PLAN_ID });
  return plan.renewal_price;
}

let checkoutId: Promise<string> | null = null;

export function getCheckoutId(): Promise<string> {
  checkoutId ??= findOrCreateCheckout().catch((error: unknown) => {
    checkoutId = null;
    throw error;
  });
  return checkoutId;
}

async function findOrCreateCheckout(): Promise<string> {
  const { WHOP_PLAN_ID, APP_URL } = getEnv();
  const whop = getWhop();
  const redirectUrl = APP_URL.startsWith("https://") ? `${APP_URL}/pro` : null;

  const plan = await whop.variants.retrieve({ id: WHOP_PLAN_ID });
  if (!plan.account) throw new Error("The plan has no account");
  for await (const checkout of await whop.checkoutConfigurations.list({ account_id: plan.account.id, plan_id: WHOP_PLAN_ID })) {
    if (checkout.redirect_url === redirectUrl) return checkout.id;
  }
  const created = await whop.checkoutConfigurations.create({ plan_id: WHOP_PLAN_ID, redirect_url: redirectUrl });
  return created.id;
}

export async function findSubscription(whopUserId: string): Promise<Subscription | null> {
  const whop = getWhop();
  const filter = { user_id: whopUserId, plan_id: getEnv().WHOP_PLAN_ID };

  const paused = new Set<string>();
  for await (const membership of await whop.memberships.list({ ...filter, status: "paused" })) {
    paused.add(membership.id);
  }

  for await (const listed of await whop.memberships.list({ ...filter, order: "created_at", direction: "desc", first: 1 })) {
    const membership = await whop.memberships.retrieve({ id: listed.id });
    return {
      id: membership.id,
      status: membership.status,
      paused: paused.has(membership.id),
      cancelAtPeriodEnd: membership.cancel_at_period_end,
      renewsAt: membership.current_period_end,
      manageUrl: membership.manage_url,
    };
  }
  return null;
}

export function isOngoing(subscription: Subscription | null): boolean {
  return Boolean(subscription && !ENDED_STATUSES.has(subscription.status));
}

export function hasAccess(subscription: Subscription | null): boolean {
  if (!subscription || !ACCESS_STATUSES.has(subscription.status)) return false;
  if (!subscription.paused) return true;
  return subscription.renewsAt !== null && new Date(subscription.renewsAt) > new Date();
}

export async function changeSubscription(whopUserId: string, action: SubscriptionAction): Promise<void> {
  const subscription = await findSubscription(whopUserId);
  if (!subscription) throw new Error("No subscription to change");

  const whop = getWhop();
  const id = subscription.id;
  switch (action) {
    case "cancel_at_period_end":
      await whop.memberships.cancel({ id, cancel_at_period_end: true });
      return;
    case "keep":
      await whop.memberships.update({ id, cancel_at_period_end: false });
      return;
    case "pause":
      await whop.memberships.pause({ id });
      return;
    case "resume":
      await whop.memberships.resume({ id });
      return;
  }
}

"use client";

import { WhopElements, Checkout, CheckoutElement } from "@whop/elements-react";
import { loadWhop, type Appearance } from "@whop/elements";

const appearance: Appearance = { theme: { appearance: "light", accentColor: "orange" } };

export function SubscribeCheckout({
  checkoutId,
  email,
  sandbox,
}: {
  checkoutId: string;
  email: string;
  sandbox: boolean;
}) {
  return (
    <WhopElements elements={loadWhop()} environment={sandbox ? "sandbox" : "production"} appearance={appearance}>
      <Checkout checkoutConfiguration={checkoutId}>
        <CheckoutElement buyerEmail={email} lockBuyerEmail />
      </Checkout>
    </WhopElements>
  );
}

import Link from "next/link";
import { getEnv } from "@/lib/env";
import { getSession } from "@/lib/session";
import { findSubscription, getCheckoutId, getMonthlyPrice, hasAccess, isOngoing } from "@/lib/subscription";
import { SubscribeCheckout } from "@/components/SubscribeCheckout";

export default async function Home() {
  const env = getEnv();
  const session = await getSession();
  const price = await getMonthlyPrice();
  const subscription = session.whopUserId ? await findSubscription(session.whopUserId) : null;

  return (
    <main className="mx-auto flex max-w-xl flex-col gap-6 px-4 py-12">
      <div>
        <h1 className="text-3xl font-semibold">Pro membership</h1>
        <p className="text-gray-600">${price.toFixed(2)} a month. Cancel or pause any time.</p>
      </div>

      {!session.whopUserId || !session.email ? (
        <a className="w-fit rounded bg-black px-4 py-2 text-white" href="/api/auth/login">
          Sign in with Whop to subscribe
        </a>
      ) : isOngoing(subscription) ? (
        <p>
          {hasAccess(subscription) ? (
            <>
              You are subscribed. Go to <Link className="underline" href="/pro">Pro</Link>, or manage it on your{" "}
            </>
          ) : subscription?.paused ? (
            "Your subscription is paused. Resume it on your "
          ) : (
            "Your subscription needs attention. Check it on your "
          )}
          <Link className="underline" href="/account">account</Link> page.
        </p>
      ) : (
        <SubscribeCheckout checkoutId={await getCheckoutId()} email={session.email} sandbox={env.WHOP_SANDBOX} />
      )}
    </main>
  );
}

import { redirect } from "next/navigation";
import { getSession } from "@/lib/session";
import { findSubscription, hasAccess } from "@/lib/subscription";

export default async function ProPage({ searchParams }: { searchParams: Promise<{ status?: string }> }) {
  const session = await getSession();
  if (!session.whopUserId) redirect("/api/auth/login");

  const subscription = await findSubscription(session.whopUserId);
  if (!hasAccess(subscription)) {
    const { status } = await searchParams;
    if (status === "success") {
      return <p className="p-12">Payment received. Your membership is being activated. Refresh in a moment.</p>;
    }
    redirect("/");
  }

  return (
    <main className="mx-auto max-w-xl px-4 py-12">
      <h1 className="text-3xl font-semibold">Welcome to Pro</h1>
      <p className="text-gray-600">Everything your subscribers pay for lives here.</p>
    </main>
  );
}

import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import { getSession } from "@/lib/session";
import { ACTIONS, changeSubscription, findSubscription, type SubscriptionAction } from "@/lib/subscription";

const actionSchema = z.object({ action: z.enum(ACTIONS) });

async function requireUserId(): Promise<string> {
  const session = await getSession();
  if (!session.whopUserId) redirect("/api/auth/login");
  return session.whopUserId;
}

async function updateSubscription(formData: FormData): Promise<void> {
  "use server";
  const userId = await requireUserId();
  const { action } = actionSchema.parse(Object.fromEntries(formData));
  await changeSubscription(userId, action);
  revalidatePath("/account");
}

function ActionButton({ action, label }: { action: SubscriptionAction; label: string }) {
  return (
    <form action={updateSubscription}>
      <input type="hidden" name="action" value={action} />
      <button className="rounded border px-3 py-1">{label}</button>
    </form>
  );
}

export default async function AccountPage() {
  const userId = await requireUserId();
  const subscription = await findSubscription(userId);
  if (!subscription) redirect("/");

  const renews = subscription.renewsAt ? new Date(subscription.renewsAt).toLocaleDateString() : "-";

  return (
    <main className="mx-auto flex max-w-xl flex-col gap-4 px-4 py-12">
      <h1 className="text-3xl font-semibold">Your subscription</h1>
      <p className="text-gray-600">
        {subscription.paused ? `Paused. Access until ${renews}.` : subscription.cancelAtPeriodEnd ? `Ends on ${renews}.` : `Renews on ${renews}.`} Status: {subscription.status}.
      </p>

      <div className="flex gap-2">
        {subscription.paused ? (
          <ActionButton action="resume" label="Resume" />
        ) : (
          <ActionButton action="pause" label="Pause" />
        )}
        {subscription.cancelAtPeriodEnd ? (
          <ActionButton action="keep" label="Keep my subscription" />
        ) : (
          <ActionButton action="cancel_at_period_end" label="Cancel at period end" />
        )}
      </div>

      {subscription.manageUrl && (
        <a className="underline" href={subscription.manageUrl}>
          Manage it on Whop instead
        </a>
      )}
    </main>
  );
}

import { getWhop } from "@/lib/whop";

export interface Receipt {
  paymentId: string;
  billingReason: string;
  total: number;
  whopFees: number;
  youKeep: number;
}

export async function readReceipt(paymentId: string): Promise<Receipt> {
  const whop = getWhop();
  const payment = await whop.payments.retrieve({ id: paymentId });
  const { data: fees } = await whop.payments.listFees({ id: paymentId });

  return {
    paymentId,
    billingReason: payment.billing_reason ?? "unknown",
    total: Number(payment.total?.amount ?? "0"),
    whopFees: fees.reduce((sum, fee) => sum + Number(fee.settlement_amount.amount), 0),
    youKeep: Number(payment.amount_after_fees.amount),
  };
}

import { after, type NextRequest } from "next/server";
import { unwrapWebhook } from "@whop/sdk/helpers";
import { z } from "zod";
import { getEnv } from "@/lib/env";
import { readReceipt } from "@/lib/payments";

const eventSchema = z.object({
  type: z.string(),
  data: z.looseObject({
    id: z.string(),
    billing_reason: z.string().nullish(),
  }),
});

export async function POST(request: NextRequest): Promise<Response> {
  const body = await request.text();

  let event: unknown;
  try {
    event = unwrapWebhook(body, {
      headers: Object.fromEntries(request.headers),
      key: getEnv().WHOP_WEBHOOK_SECRET,
    });
  } catch {
    return new Response("Invalid signature", { status: 401 });
  }

  const parsed = eventSchema.safeParse(event);
  if (!parsed.success) return new Response("Ignored", { status: 200 });
  const { type, data } = parsed.data;
  const deliveryId = request.headers.get("webhook-id");

  if (type === "payment.succeeded") {
    after(async () => {
      const receipt = await readReceipt(data.id);
      console.log(JSON.stringify({ deliveryId, type, receipt }));
    });
  }

  if (type === "payment.failed" && data.billing_reason === "subscription_cycle") {
    console.log(JSON.stringify({ deliveryId, type, paymentId: data.id, note: "renewal failed, Whop will retry" }));
  }

  return new Response("OK", { status: 200 });
}