npm install @whop/sdk @whop/checkout zod| Variable | Example | Where it comes from |
|---|---|---|
WHOP_COMPANY_API_KEY |
apik_... |
The key we just made |
WHOP_WEBHOOK_SECRET |
whsec_... |
Shown when we create the webhook, later |
WHOP_SANDBOX |
true |
Typed by hand. Remove it or set to false for production |
APP_URL |
http://localhost:3000 |
Our app's own address |
import { z } from "zod";
const schema = z.object({
WHOP_COMPANY_API_KEY: z.string().min(1, "WHOP_COMPANY_API_KEY is missing"),
WHOP_WEBHOOK_SECRET: z
.string()
.optional()
.transform((value) => (value && value.length > 0 ? value : undefined)),
WHOP_SANDBOX: z
.string()
.optional()
.transform((value) => value === "true"),
APP_URL: z.string().url("APP_URL must be a full URL"),
});
export type Env = z.infer<typeof schema>;
let cached: Env | undefined;
export function getEnv(): Env {
if (cached) return cached;
const parsed = schema.safeParse(process.env);
if (!parsed.success) {
const problems = parsed.error.issues
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
.join("\n");
throw new Error(`Environment is not configured.\n${problems}`);
}
cached = parsed.data;
return cached;
}import { Whop } from "@whop/sdk";
import { getEnv } from "@/lib/env";
let cached: Whop | undefined;
export function whop(): Whop {
if (cached) return cached;
const env = getEnv();
cached = new Whop({
apiKey: env.WHOP_COMPANY_API_KEY,
baseURL: env.WHOP_SANDBOX
? "https://sandbox-api.whop.com/api/v1"
: "https://api.whop.com/api/v1",
...(env.WHOP_WEBHOOK_SECRET
? { webhookKey: Buffer.from(env.WHOP_WEBHOOK_SECRET).toString("base64") }
: {}),
});
return cached;
}npm install -g @whop/cli# macOS and Linux
export WHOP_API_BASE_URL="https://sandbox-api.whop.com/api/v1"
# Windows PowerShell
$env:WHOP_API_BASE_URL = "https://sandbox-api.whop.com/api/v1"
whop auth login --method api-key --api-key <your key>whop products create --title "Pro pass" --description "Sold through our own checkout." --visibility visiblewhop plans create --product_id prod_XXXXXXXXX --plan_type one_time --initial_price 49.99 --visibility visibleexport const WHOP_IDS = {
productId: "prod_XXXXXXXXX",
planId: "plan_XXXXXXXXX",
priceUsd: 49.99,
} as const;import { randomUUID } from "node:crypto";
export type OrderStatus = "pending" | "paid";
export interface Order {
id: string;
status: OrderStatus;
userId: string;
paymentId?: string;
createdAt: string;
paidAt?: string;
}
const orders = new Map<string, Order>();
export function createOrder(userId: string): Order {
const order: Order = {
id: randomUUID(),
status: "pending",
userId,
createdAt: new Date().toISOString(),
};
orders.set(order.id, order);
return order;
}
export function markPaid(id: string, paymentId: string): Order | undefined {
const order = orders.get(id);
if (!order) return undefined;
if (order.status === "paid") return order;
const paid: Order = {
...order,
status: "paid",
paymentId,
paidAt: new Date().toISOString(),
};
orders.set(id, paid);
return paid;
}// Replace this with however the app already knows who is browsing: a session
// cookie, a JWT, whatever is in place. It has to run on the server, and it must
// never read an identity out of the request body, because the browser can put
// anything there.
export async function currentUserId(): Promise<string | null> {
return "user_demo";
}import { NextResponse } from "next/server";
import { whop } from "@/lib/whop";
import { currentUserId } from "@/lib/auth";
import { createOrder } from "@/lib/orders";
import { WHOP_IDS } from "@/constants/whop-ids";
export async function POST() {
const userId = await currentUserId();
if (!userId) {
return NextResponse.json({ error: "Sign in first." }, { status: 401 });
}
const order = createOrder(userId);
const checkout = await whop().checkoutConfigurations.create(
{
plan_id: WHOP_IDS.planId,
mode: "payment",
metadata: { order_id: order.id },
},
{ headers: { "Idempotency-Key": `checkout-${order.id}` } },
);
return NextResponse.json({ orderId: order.id, sessionId: checkout.id });
}"use client";
import { useState } from "react";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
type Stage =
| { name: "idle" }
| { name: "paying"; sessionId: string }
| { name: "checking" }
| { name: "done" }
| { name: "failed"; message: string };
export function Checkout({
environment,
returnUrl,
}: {
environment: "production" | "sandbox";
returnUrl: string;
}) {
const [stage, setStage] = useState<Stage>({ name: "idle" });
async function start() {
const response = await fetch("/api/checkout", { method: "POST" });
if (!response.ok) {
setStage({ name: "failed", message: "We could not start the checkout." });
return;
}
const { sessionId } = (await response.json()) as { sessionId: string };
setStage({ name: "paying", sessionId });
}
async function confirm(receiptId: string) {
setStage({ name: "checking" });
for (let attempt = 0; attempt < 10; attempt++) {
const response = await fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId }),
});
if (response.ok) {
setStage({ name: "done" });
return;
}
if (response.status !== 202) {
setStage({ name: "failed", message: "We could not confirm that payment." });
return;
}
await new Promise((resolve) => setTimeout(resolve, 2000));
}
setStage({ name: "failed", message: "Whop is taking longer than usual to confirm this." });
}
if (stage.name === "done") {
return <p className="text-lg font-medium">Payment confirmed. Your Pro pass is active.</p>;
}
if (stage.name === "checking") {
return <p className="text-neutral-600">Checking the payment with Whop.</p>;
}
if (stage.name === "paying") {
return (
<WhopCheckoutEmbed
sessionId={stage.sessionId}
environment={environment}
returnUrl={returnUrl}
theme="light"
onComplete={(_planId, receiptId) => {
if (receiptId) void confirm(receiptId);
}}
fallback={<p className="text-neutral-600">Loading the checkout.</p>}
/>
);
}
return (
<div className="flex flex-col gap-2">
<button
type="button"
onClick={() => void start()}
className="rounded-lg bg-neutral-900 px-5 py-3 font-medium text-white"
>
Buy
</button>
{stage.name === "failed" ? (
<p className="text-sm text-red-600">{stage.message}</p>
) : null}
</div>
);
}import { Checkout } from "@/components/Checkout";
import { getEnv } from "@/lib/env";
import { WHOP_IDS } from "@/constants/whop-ids";
export default function PricingPage() {
const env = getEnv();
return (
<main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-6 px-6">
<div>
<h1 className="text-2xl font-semibold">Pro pass</h1>
<p className="mt-1 text-neutral-600">One payment, lifetime access.</p>
</div>
<p className="text-4xl font-semibold tabular-nums">
${WHOP_IDS.priceUsd.toFixed(2)}
</p>
<Checkout
environment={env.WHOP_SANDBOX ? "sandbox" : "production"}
returnUrl={`${env.APP_URL}/pricing`}
/>
</main>
);
}import { NextResponse } from "next/server";
import { z } from "zod";
import { whop } from "@/lib/whop";
import { WHOP_IDS } from "@/constants/whop-ids";
const bodySchema = z.object({
receiptId: z.string().min(3),
});
export async function POST(request: Request) {
const parsed = bodySchema.safeParse(await request.json());
if (!parsed.success) {
return NextResponse.json({ error: "missing_receipt" }, { status: 400 });
}
let payment;
try {
payment = await whop().payments.retrieve(parsed.data.receiptId);
} catch {
return NextResponse.json({ error: "not_readable_yet" }, { status: 202 });
}
if (payment.plan?.id && payment.plan.id !== WHOP_IDS.planId) {
return NextResponse.json({ error: "wrong_product" }, { status: 400 });
}
if (payment.substatus !== "succeeded") {
return NextResponse.json({ error: "not_paid" }, { status: 202 });
}
const orderId =
payment.metadata && typeof payment.metadata.order_id === "string"
? payment.metadata.order_id
: undefined;
return NextResponse.json({ orderId: orderId ?? null, paymentId: payment.id });
}const seen = new Set<string>();
export function recordDelivery(webhookId: string): { firstTime: boolean } {
if (seen.has(webhookId)) return { firstTime: false };
seen.add(webhookId);
return { firstTime: true };
}import { markPaid } from "@/lib/orders";
import { recordDelivery } from "@/lib/webhook-log";
export interface WhopWebhookEvent {
type: string;
id: string;
data: Record<string, unknown>;
}
export type FulfilResult =
| { outcome: "fulfilled"; orderId: string }
| { outcome: "already_done"; orderId?: string }
| { outcome: "ignored"; reason: string };
function readOrderId(data: Record<string, unknown>): string | undefined {
const metadata = data.metadata;
if (!metadata || typeof metadata !== "object") return undefined;
const orderId = (metadata as Record<string, unknown>).order_id;
return typeof orderId === "string" ? orderId : undefined;
}
// Replace this with what "they bought it" means in this app: flip a column,
// insert a row, send the licence key, add them to the group.
async function grantAccess(userId: string): Promise<void> {
console.log(`granting access to ${userId}`);
}
export async function fulfil(
event: WhopWebhookEvent,
deliveryId: string,
): Promise<FulfilResult> {
if (event.type !== "payment.succeeded") {
return { outcome: "ignored", reason: `nothing to do for ${event.type}` };
}
const orderId = readOrderId(event.data);
if (!orderId) {
return { outcome: "ignored", reason: "no order_id in metadata" };
}
const { firstTime } = recordDelivery(deliveryId);
if (!firstTime) {
return { outcome: "already_done", orderId };
}
const paid = markPaid(orderId, typeof event.data.id === "string" ? event.data.id : "unknown");
if (!paid) {
return { outcome: "ignored", reason: `no order matching ${orderId}` };
}
await grantAccess(paid.userId);
return { outcome: "fulfilled", orderId };
}import { NextResponse } from "next/server";
import { whop } from "@/lib/whop";
import { getEnv } from "@/lib/env";
import { fulfil, type WhopWebhookEvent } from "@/lib/fulfil";
export async function POST(request: Request) {
if (!getEnv().WHOP_WEBHOOK_SECRET) {
return NextResponse.json({ error: "webhook secret is not configured" }, { status: 500 });
}
const raw = await request.text();
const headers = Object.fromEntries(request.headers.entries());
let event: WhopWebhookEvent;
try {
event = whop().webhooks.unwrap(raw, { headers }) as unknown as WhopWebhookEvent;
} catch {
return NextResponse.json({ error: "bad signature" }, { status: 401 });
}
const deliveryId = headers["webhook-id"] ?? event.id;
const result = await fulfil(event, deliveryId);
return NextResponse.json({ received: true, outcome: result.outcome });
}