npm install @whop/checkoutimport { WhopCheckoutEmbed } from "@whop/checkout/react";
export default function Page() {
return (
<WhopCheckoutEmbed
planId="plan_XXXXXXXXX"
returnUrl="https://yoursite.com/checkout/complete"
/>
);
}import { config } from "dotenv";
import Whop from "@whop/sdk";
config({ path: ".env.local" });
config();
const apiKey = process.env.WHOP_COMPANY_API_KEY;
const sandbox = process.env.WHOP_SANDBOX === "true";
const explicitCompanyId = process.env.WHOP_COMPANY_ID;
if (!apiKey) {
console.error("Set WHOP_COMPANY_API_KEY in .env.local before running this script.");
process.exit(1);
}
const whop = new Whop({
apiKey,
...(sandbox && { baseURL: "https://sandbox-api.whop.com/api/v1" }),
});
async function resolveCompanyId(): Promise<string> {
if (explicitCompanyId) return explicitCompanyId;
try {
const iterator = await whop.companies.list();
for await (const company of iterator) {
return (company as { id: string }).id;
}
} catch (err) {
const error = err as { error?: { error?: { message?: string } } };
const msg = error?.error?.error?.message ?? "";
if (msg.includes("company:basic:read")) {
throw new Error(
"Your Company API Key cannot list companies (missing company:basic:read scope). " +
"Set WHOP_COMPANY_ID=biz_... (find it in the Whop dashboard URL) and run this again.",
);
}
throw err;
}
throw new Error(
"No company found. Create one in the Whop dashboard before running setup.",
);
}
async function main() {
const companyId = await resolveCompanyId();
console.log(`Using company: ${companyId}\n`);
const product = await whop.products.create({
company_id: companyId,
title: "Pro",
visibility: "hidden",
});
const productId = (product as { id: string }).id;
console.log(`Created product: ${productId}`);
const subscription = await whop.plans.create({
company_id: companyId,
product_id: productId,
plan_type: "renewal",
initial_price: 0,
renewal_price: 29,
billing_period: 30,
currency: "usd",
visibility: "hidden",
release_method: "buy_now",
});
const subscriptionId = (subscription as { id: string }).id;
const lifetime = await whop.plans.create({
company_id: companyId,
product_id: productId,
plan_type: "one_time",
initial_price: 199,
currency: "usd",
visibility: "hidden",
release_method: "buy_now",
});
const lifetimeId = (lifetime as { id: string }).id;
console.log("\nAdd these to your .env.local:");
console.log(`NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID=${subscriptionId}`);
console.log(`NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID=${lifetimeId}`);
}
main().catch((err) => {
console.error(err);
process.exit(1);
});WHOP_COMPANY_API_KEY="apik_..." WHOP_SANDBOX="true" npx tsx scripts/setup-whop.tsnpm install @whop/sdk @whop/checkout @vercel/functions zod| Variable | Example | How to get it |
|---|---|---|
WHOP_COMPANY_API_KEY |
apik_... |
Whop dashboard → Business Settings → API Keys → create. |
WHOP_WEBHOOK_SECRET |
... |
Shown when we created the webhook in the previous step. |
WHOP_SANDBOX |
true |
Set manually. true during development; remove or set to false in production. |
NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID |
plan_... |
The subscription plan ID (First option: dashboard - Second option: printed by the setup script). |
NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID |
plan_... |
The one-time plan ID (same source as above). |
NEXT_PUBLIC_APP_URL |
http://localhost:3000 |
Our app's origin. http://localhost:3000 locally; the Vercel production URL once deployed. |
import { z } from "zod";
const envSchema = z.object({
WHOP_COMPANY_API_KEY: z.string().min(1),
WHOP_WEBHOOK_SECRET: z.string().min(1),
WHOP_SANDBOX: z
.string()
.optional()
.transform((v) => v === "true"),
NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID: z.string().startsWith("plan_"),
NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID: z.string().startsWith("plan_"),
NEXT_PUBLIC_APP_URL: z.string().url(),
});
type Env = z.infer<typeof envSchema>;
let cached: Env | null = null;
function parseAll(): Env {
if (cached) return cached;
cached = envSchema.parse({
WHOP_COMPANY_API_KEY: process.env.WHOP_COMPANY_API_KEY,
WHOP_WEBHOOK_SECRET: process.env.WHOP_WEBHOOK_SECRET,
WHOP_SANDBOX: process.env.WHOP_SANDBOX,
NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID:
process.env.NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID,
NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID:
process.env.NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID,
NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
});
return cached;
}
export const env = new Proxy({} as Env, {
get(_target, prop: string) {
return parseAll()[prop as keyof Env];
},
});import Whop from "@whop/sdk";
import { env } from "@/lib/env";
let _whop: Whop | null = null;
export function getWhop(): Whop {
if (!_whop) {
_whop = new Whop({
apiKey: env.WHOP_COMPANY_API_KEY,
webhookKey: Buffer.from(env.WHOP_WEBHOOK_SECRET).toString("base64"),
...(env.WHOP_SANDBOX && {
baseURL: "https://sandbox-api.whop.com/api/v1",
}),
});
}
return _whop;
}export type PlanKey = "subscription" | "lifetime";
export interface PlanDefinition {
planKey: PlanKey;
name: string;
price: number;
priceSuffix: string;
description: string;
features: readonly string[];
envVar:
| "NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID"
| "NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID";
}
export const PRO_FEATURES = [
"Unlimited projects",
"Advanced analytics",
"Priority support",
"Team access (up to 5 seats)",
] as const;
export const PLANS = {
subscription: {
planKey: "subscription",
name: "Pro Monthly",
price: 29,
priceSuffix: "/mo",
description: "Month-to-month billing. Cancel anytime.",
features: PRO_FEATURES,
envVar: "NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID",
},
lifetime: {
planKey: "lifetime",
name: "Pro Lifetime",
price: 199,
priceSuffix: "one-time",
description: "Pay once. Keep Pro forever.",
features: PRO_FEATURES,
envVar: "NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID",
},
} as const satisfies Record<PlanKey, PlanDefinition>;
export function planIdFor(key: PlanKey): string {
const plan = PLANS[key];
const value = process.env[plan.envVar];
if (!value) {
throw new Error(`Missing env var: ${plan.envVar}`);
}
return value;
}import { NextResponse, type NextRequest } from "next/server";
import { requireUser } from "@/lib/auth";
import { getWhop } from "@/lib/whop";
import { PLANS, planIdFor, type PlanKey } from "@/lib/plans";
import { env } from "@/lib/env";
function isPlanKey(value: FormDataEntryValue | null): value is PlanKey {
return value === "subscription" || value === "lifetime";
}
export async function POST(request: NextRequest): Promise<NextResponse> {
const user = await requireUser();
const form = await request.formData();
const plan = form.get("plan");
if (!isPlanKey(plan)) {
return NextResponse.json({ error: "Invalid plan" }, { status: 400 });
}
const planId = planIdFor(plan);
const whop = getWhop();
const config = await whop.checkoutConfigurations.create({
plan_id: planId,
mode: "payment",
redirect_url: `${env.NEXT_PUBLIC_APP_URL}/checkout/complete`,
metadata: { userId: user.id },
});
const sessionId = (config as { id: string }).id;
const url = new URL("/checkout", env.NEXT_PUBLIC_APP_URL);
url.searchParams.set("session", sessionId);
url.searchParams.set("plan", PLANS[plan].planKey);
return NextResponse.redirect(url, { status: 303 });
}<form action="/api/checkout" method="POST">
<input type="hidden" name="plan" value="subscription" />
<button type="submit">Upgrade to Pro Monthly</button>
</form>import { redirect } from "next/navigation";
import { PlanSummaryCard } from "@/components/plan-summary-card";
import { WhopCheckout } from "./WhopCheckout";
import { PLANS, type PlanKey } from "@/lib/plans";
import { requireUser } from "@/lib/auth";
import { env } from "@/lib/env";
interface SearchParams {
session?: string;
plan?: string;
}
function isPlanKey(value: string | undefined): value is PlanKey {
return value === "subscription" || value === "lifetime";
}
export default async function CheckoutPage({
searchParams,
}: {
searchParams: Promise<SearchParams>;
}) {
await requireUser();
const { session, plan } = await searchParams;
if (!session || !isPlanKey(plan)) redirect("/");
const planDef = PLANS[plan];
return (
<div>
<PlanSummaryCard
name={planDef.name}
price={planDef.price}
priceSuffix={planDef.priceSuffix}
features={[...planDef.features]}
/>
<WhopCheckout
sessionId={session}
returnUrl={`${env.NEXT_PUBLIC_APP_URL}/checkout/complete`}
sandbox={env.WHOP_SANDBOX}
/>
</div>
);
}"use client";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
interface WhopCheckoutProps {
sessionId: string;
returnUrl: string;
sandbox: boolean;
}
export function WhopCheckout({
sessionId,
returnUrl,
sandbox,
}: WhopCheckoutProps) {
return (
<WhopCheckoutEmbed
sessionId={sessionId}
returnUrl={returnUrl}
environment={sandbox ? "sandbox" : "production"}
theme="light"
themeOptions={{ accentColor: "pink" }}
fallback={<CheckoutSkeleton />}
/>
);
}
function CheckoutSkeleton() {
return <div className="h-[560px] w-full animate-pulse rounded bg-neutral-100" />;
}import Link from "next/link";
import { requireUser } from "@/lib/auth";
import { PRO_FEATURES } from "@/lib/plans";
interface SearchParams {
status?: string;
}
export default async function CompletePage({
searchParams,
}: {
searchParams: Promise<SearchParams>;
}) {
await requireUser();
const { status } = await searchParams;
if (status === "error") {
return (
<div>
<h1>Payment didn’t go through</h1>
<Link href="/">Back to plans</Link>
</div>
);
}
return (
<div>
<h1>Thanks, payment received</h1>
<p>Your access will be active shortly. Check your email for a receipt.</p>
<ul>
{PRO_FEATURES.map((f) => (
<li key={f}>{f}</li>
))}
</ul>
</div>
);
}import { z } from "zod";
import { prisma } from "@/lib/db";
// Whop's payment webhook payload only guarantees a small set of fields —
// `data.plan.plan_type` is NOT returned on webhooks, only when you
// retrieve the plan separately. We parse defensively and derive the
// plan type from the plan id instead.
const paymentSchema = z.object({
id: z.string(),
metadata: z.record(z.string(), z.unknown()).nullish(),
plan: z.object({ id: z.string() }).optional(),
billing_reason: z.string().nullish(),
});
const membershipSchema = z.object({
id: z.string(),
metadata: z.record(z.string(), z.unknown()).nullish(),
plan: z.object({ id: z.string() }).optional(),
});
function readUserId(metadata: unknown): string | null {
if (!metadata || typeof metadata !== "object") return null;
const value = (metadata as Record<string, unknown>).userId;
return typeof value === "string" ? value : null;
}
function planTypeFromPlanId(
planId: string | undefined,
): "subscription" | "lifetime" | null {
if (!planId) return null;
if (planId === process.env.NEXT_PUBLIC_WHOP_SUBSCRIPTION_PLAN_ID) {
return "subscription";
}
if (planId === process.env.NEXT_PUBLIC_WHOP_LIFETIME_PLAN_ID) {
return "lifetime";
}
return null;
}
async function alreadyProcessed(eventId: string): Promise<boolean> {
const existing = await prisma.webhookEvent.findUnique({
where: { id: eventId },
});
return existing !== null;
}
async function markProcessed(eventId: string, type: string): Promise<void> {
try {
await prisma.webhookEvent.create({ data: { id: eventId, type } });
} catch {
}
}
export async function handlePaymentSucceeded(eventId: string, data: unknown) {
if (await alreadyProcessed(eventId)) return;
let payment: z.infer<typeof paymentSchema>;
try {
payment = paymentSchema.parse(data);
} catch (err) {
console.error("[webhook] payment.succeeded parse failed:", err, "payload:", data);
return;
}
const userId = readUserId(payment.metadata);
if (!userId) {
console.error(
"[webhook] payment.succeeded with no userId metadata",
payment.id,
);
return;
}
const planType = planTypeFromPlanId(payment.plan?.id);
if (!planType) {
console.error(
"[webhook] payment.succeeded with unrecognized plan id:",
payment.plan?.id,
);
return;
}
try {
await prisma.user.update({
where: { id: userId },
data: { plan: "pro", planType, planSince: new Date() },
});
} catch (err) {
console.error("[webhook] payment.succeeded DB update failed:", err);
return;
}
await markProcessed(eventId, "payment.succeeded");
}
export async function handleMembershipDeactivated(eventId: string, data: unknown) {
if (await alreadyProcessed(eventId)) return;
let membership: z.infer<typeof membershipSchema>;
try {
membership = membershipSchema.parse(data);
} catch (err) {
console.error("[webhook] membership.deactivated parse failed:", err);
return;
}
const userId = readUserId(membership.metadata);
if (!userId) return;
try {
await prisma.user.update({
where: { id: userId },
data: { plan: "free", planType: null, planSince: null },
});
} catch (err) {
console.error("[webhook] membership.deactivated DB update failed:", err);
return;
}
await markProcessed(eventId, "membership.deactivated");
}import { waitUntil } from "@vercel/functions";
import { NextResponse, type NextRequest } from "next/server";
import { getWhop } from "@/lib/whop";
import {
handlePaymentSucceeded,
handleMembershipDeactivated,
} from "@/lib/webhooks";
interface WhopEvent {
type: string;
id: string;
data: Record<string, unknown>;
}
export async function POST(request: NextRequest): Promise<NextResponse> {
const bodyText = await request.text();
const headers = Object.fromEntries(request.headers);
let event: WhopEvent;
try {
event = getWhop().webhooks.unwrap(bodyText, {
headers,
}) as unknown as WhopEvent;
} catch (err) {
console.error("[webhook] signature verification failed:", err);
return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
}
switch (event.type) {
case "payment.succeeded":
case "membership.activated":
waitUntil(handlePaymentSucceeded(event.id, event.data));
break;
case "membership.deactivated":
waitUntil(handleMembershipDeactivated(event.id, event.data));
break;
case "payment.failed":
console.error("[webhook] payment.failed:", event.id);
break;
default:
break;
}
return NextResponse.json({ ok: true });
}import { redirect } from "next/navigation";
import { requireUser } from "@/lib/auth";
export async function requirePro() {
const user = await requireUser();
if (user.plan !== "pro") redirect("/?upgrade=1");
return user;
}import { requirePro } from "@/lib/access";
export default async function ProDashboard() {
const user = await requirePro();
return <div>Welcome back, {user.email}</div>;
}| Hosted | Embedded | |
|---|---|---|
| Where the owner manages it | Whop dashboard | Inside our own admin UI |
| Setup | None | Install @whop/embedded-components-react-js |
| KYC + bank linking | Handled by Whop | Handled by Whop (rendered in our UI) |
| Best for | Single-owner project | Teams keeping everything in their own app |
| Embedded | Hosted | |
|---|---|---|
| Where it renders | Inside your own project | whop.com/checkout/... |
| User leaves your domain | No | Yes |
| Setup | Server route + iframe component | One redirect or anchor tag |
| Metadata support | Yes | Yes, via checkoutConfigurations.create |
| Brand look | Theme + accent color | Whop-branded |
| Best for | Primary upgrade flow | Email links, experiments, static sites |