npm install -g @whop/cli
export WHOP_API_BASE_URL=https://sandbox-api.whop.com/api/v1
whop auth login --method api-key --api-key apik_XXXXXXXX --profile sandbox
whop products create --title "Promo demo pass"
whop plans create --product_id prod_XXXXXXXXXXXXX --plan_type one_time --initial_price 40npm install @whop/sdk @whop/checkout zod| Variable | Example | How to get it |
|---|---|---|
WHOP_COMPANY_API_KEY | apik_... | Sandbox dashboard > Developer > Company API keys. |
WHOP_COMPANY_ID | biz_... | From the sandbox dashboard URL. |
WHOP_PRODUCT_ID | prod_... | The product the codes discount. |
WHOP_PLAN_ID | plan_... | The plan buyers check out with. |
WHOP_PLAN_PRICE | 40 | The plan's list price, used to preview the discounted price before checkout. |
WHOP_SANDBOX | true | Set manually. Remove it in production. |
ADMIN_API_KEY | a long random string | Set manually. Your admin tools send it to create and list codes. |
APP_URL | http://localhost:3000 | Your app origin, used for the embed's return URL. |
import { WhopClient, WhopEnvironment } from "@whop/sdk";
let cached: WhopClient | null = null;
export function getWhop(): WhopClient {
if (!cached) {
cached = new WhopClient({
token: process.env.WHOP_COMPANY_API_KEY as string,
environment:
process.env.WHOP_SANDBOX === "true"
? WhopEnvironment.Sandbox
: WhopEnvironment.Production,
});
}
return cached;
}export type PromoType = "percentage" | "flat_amount";
export type PromoStatus = "active" | "inactive" | "archived";
export interface PromoSummary {
id: string;
code: string;
promoType: PromoType;
displayAmount: number;
rawAmountOff: number;
label: string;
status: PromoStatus;
uses: number;
stock: number;
unlimitedStock: boolean;
expiresAt: string | null;
}
export interface RawPromoCode {
id: string;
code: string | null;
promo_type: string;
amount_off: number;
status: string;
uses: number;
stock: number;
unlimited_stock: boolean;
expires_at: string | null;
}
export function toDisplayAmount(promoType: PromoType, rawAmountOff: number) {
if (promoType !== "percentage") return rawAmountOff;
// Math.round because 0.15 * 100 is 15.000000000000002 in binary floating point.
return Math.round(rawAmountOff * 100);
}
export function describeDiscount(promoType: PromoType, displayAmount: number) {
return promoType === "percentage"
? `${displayAmount}% off`
: `$${displayAmount.toFixed(2)} off`;
}
export function previewPrice(
price: number,
promoType: PromoType,
displayAmount: number,
) {
const discounted =
promoType === "percentage"
? price * (1 - displayAmount / 100)
: price - displayAmount;
return Math.max(0, Math.round(discounted * 100) / 100);
}
export function toSummary(raw: RawPromoCode): PromoSummary {
const promoType: PromoType =
raw.promo_type === "flat_amount" ? "flat_amount" : "percentage";
const displayAmount = toDisplayAmount(promoType, raw.amount_off);
return {
id: raw.id,
code: raw.code ?? "",
promoType,
displayAmount,
rawAmountOff: raw.amount_off,
label: describeDiscount(promoType, displayAmount),
status: raw.status as PromoStatus,
uses: raw.uses,
stock: raw.stock,
unlimitedStock: raw.unlimited_stock,
expiresAt: raw.expires_at,
};
}import { timingSafeEqual } from "node:crypto";
import { z } from "zod";
import { WhopError } from "@whop/sdk";
import { getWhop } from "@/lib/whop";
import { toSummary, type PromoSummary, type RawPromoCode } from "@/lib/promo";
const createSchema = z.object({
code: z
.string()
.trim()
.min(3)
.max(40)
.regex(/^[A-Za-z0-9_-]+$/, "Letters, numbers, hyphen and underscore only"),
promoType: z.enum(["percentage", "flat_amount"]),
amount: z.number().positive(),
durationMonths: z.number().int().min(0).max(60),
stock: z.number().int().positive().nullable(),
onePerCustomer: z.boolean(),
newUsersOnly: z.boolean(),
expiresAt: z.iso.datetime().optional(),
});
function isAdmin(request: Request) {
const key = process.env.ADMIN_API_KEY;
if (!key) return false;
const expected = Buffer.from(`Bearer ${key}`);
const given = Buffer.from(request.headers.get("authorization") ?? "");
return given.length === expected.length && timingSafeEqual(given, expected);
}
export async function GET(request: Request) {
if (!isAdmin(request)) {
return Response.json({ error: "unauthorized" }, { status: 401 });
}
const codes: PromoSummary[] = [];
for await (const raw of await getWhop().promoCodes.list({
account_id: process.env.WHOP_COMPANY_ID as string,
})) {
codes.push(toSummary(raw as unknown as RawPromoCode));
}
return Response.json({ codes });
}
export async function POST(request: Request) {
if (!isAdmin(request)) {
return Response.json({ error: "unauthorized" }, { status: 401 });
}
const body: unknown = await request.json().catch(() => null);
const parsed = createSchema.safeParse(body);
if (!parsed.success) {
return Response.json({ error: "invalid_input" }, { status: 400 });
}
const input = parsed.data;
if (input.promoType === "percentage" && (input.amount < 1 || input.amount > 100)) {
return Response.json(
{ error: "A percentage must be between 1 and 100." },
{ status: 400 },
);
}
try {
const created = await getWhop().promoCodes.create({
account_id: process.env.WHOP_COMPANY_ID as string,
code: input.code,
promo_type: input.promoType,
amount_off: input.amount,
base_currency: "usd",
new_users_only: input.newUsersOnly,
promo_duration_months: input.durationMonths,
...(input.stock === null
? { unlimited_stock: true }
: { stock: input.stock, unlimited_stock: false }),
one_per_customer: input.onePerCustomer,
product_id: process.env.WHOP_PRODUCT_ID as string,
...(input.expiresAt ? { expires_at: input.expiresAt } : {}),
});
return Response.json({ code: toSummary(created as unknown as RawPromoCode) });
} catch (error: unknown) {
return Response.json({ error: whopMessage(error) }, { status: 400 });
}
}
function whopMessage(error: unknown) {
if (error instanceof WhopError) {
const body = error.body as { error?: { message?: string } } | undefined;
if (body?.error?.message) return body.error.message;
}
return "Whop turned this promo code down.";
}curl -X POST http://localhost:3000/api/promo-codes \
-H "Authorization: Bearer $ADMIN_API_KEY" \
-H "Content-Type: application/json" \
-d '{"code":"LAUNCH25","promoType":"percentage","amount":25,"durationMonths":1,"stock":100,"onePerCustomer":true,"newUsersOnly":false}'"use client";
import { useState } from "react";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
import type { WhopCheckoutPromoCode } from "@whop/checkout/react";
import { toDisplayAmount } from "@/lib/promo";
export function PromoCheckout({
planId,
environment,
returnUrl,
promoCode,
}: {
planId: string;
environment: "sandbox" | "production";
returnUrl: string;
promoCode?: string;
}) {
const [applied, setApplied] = useState<WhopCheckoutPromoCode | null>(null);
return (
<div>
<WhopCheckoutEmbed
key={`${planId}:${promoCode ?? ""}`}
planId={planId}
environment={environment}
returnUrl={returnUrl}
promoCode={promoCode}
onPromoCodeChanged={setApplied}
onComplete={async (_planId, receiptId) => {
if (!receiptId) return;
await fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId }),
});
}}
/>
{applied && (
<p>
{applied.code} is on, worth{" "}
{applied.type === "percentage"
? `${toDisplayAmount("percentage", applied.amount)}%`
: `$${applied.amount}`}
</p>
)}
</div>
);
}import { PromoCheckout } from "@/components/PromoCheckout";
export default async function Home({
searchParams,
}: {
searchParams: Promise<{ promo?: string }>;
}) {
const { promo } = await searchParams;
return (
<main>
<h1>Promo demo pass</h1>
<PromoCheckout
planId={process.env.WHOP_PLAN_ID as string}
environment={process.env.WHOP_SANDBOX === "true" ? "sandbox" : "production"}
returnUrl={`${process.env.APP_URL}/`}
promoCode={promo}
/>
</main>
);
}import { getWhop } from "@/lib/whop";
import { toSummary, previewPrice, type PromoSummary, type RawPromoCode } from "@/lib/promo";
export type CodeCheck =
| { usable: true; promo: PromoSummary; preview: number }
| { usable: false; reason: string };
export async function checkPromoCode(code: string): Promise<CodeCheck> {
const wanted = code.trim().toLowerCase();
if (!wanted) {
return { usable: false, reason: "No code given." };
}
for await (const raw of await getWhop().promoCodes.list({
account_id: process.env.WHOP_COMPANY_ID as string,
})) {
const promo = toSummary(raw as unknown as RawPromoCode);
if (promo.code !== wanted) continue;
if (promo.status === "archived") {
return { usable: false, reason: "That code was retired." };
}
if (promo.status !== "active") {
return { usable: false, reason: "That code is paused." };
}
if (!promo.unlimitedStock && promo.uses >= promo.stock) {
return { usable: false, reason: "That code is used up." };
}
if (promo.expiresAt && new Date(promo.expiresAt).getTime() < Date.now()) {
return { usable: false, reason: "That code has expired." };
}
return {
usable: true,
promo,
preview: previewPrice(
Number(process.env.WHOP_PLAN_PRICE),
promo.promoType,
promo.displayAmount,
),
};
}
return { usable: false, reason: "No code by that name." };
}import { checkPromoCode } from "@/lib/promo-lookup";
export async function GET(request: Request) {
const code = new URL(request.url).searchParams.get("code") ?? "";
return Response.json(await checkPromoCode(code));
}import { PromoCheckout } from "@/components/PromoCheckout";
import { checkPromoCode } from "@/lib/promo-lookup";
export default async function Home({
searchParams,
}: {
searchParams: Promise<{ promo?: string }>;
}) {
const { promo } = await searchParams;
const check = promo ? await checkPromoCode(promo) : null;
return (
<main>
<h1>Promo demo pass</h1>
{check && !check.usable && <p>{check.reason} The checkout opens at the full price.</p>}
{check?.usable && (
<p>
{check.promo.label} with {check.promo.code}, so you pay ${check.preview.toFixed(2)}
</p>
)}
<PromoCheckout
planId={process.env.WHOP_PLAN_ID as string}
environment={process.env.WHOP_SANDBOX === "true" ? "sandbox" : "production"}
returnUrl={`${process.env.APP_URL}/`}
promoCode={check?.usable ? check.promo.code : undefined}
/>
</main>
);
}import { z } from "zod";
import { Whop } from "@whop/sdk";
import { getWhop } from "@/lib/whop";
import { toDisplayAmount } from "@/lib/promo";
const bodySchema = z.object({
receiptId: z.string().regex(/^pay_[A-Za-z0-9]{4,60}$/),
});
export async function POST(request: Request) {
const body: unknown = await request.json().catch(() => null);
const parsed = bodySchema.safeParse(body);
if (!parsed.success) {
return Response.json({ error: "invalid_receipt" }, { status: 400 });
}
let payment;
try {
payment = await getWhop().payments.retrieve({ id: parsed.data.receiptId });
} catch (error: unknown) {
if (error instanceof Whop.NotFoundError) {
return Response.json({ error: "not_found" }, { status: 404 });
}
throw error;
}
if (payment.product_id !== process.env.WHOP_PRODUCT_ID) {
return Response.json({ error: "wrong_product" }, { status: 403 });
}
if (payment.status === "pending" || payment.status === "open") {
return Response.json({ status: "pending" }, { status: 202 });
}
if (payment.status !== "paid") {
return Response.json({ error: "not_paid" }, { status: 403 });
}
const before = Number(payment.subtotal?.amount ?? 0);
const paid = Number(payment.total?.amount ?? 0);
const promo = payment.promo_code_id
? await getWhop().promoCodes.retrieve({ id: payment.promo_code_id })
: null;
return Response.json({
ok: true,
before,
paid,
saved: Math.round((before - paid) * 100) / 100,
code: promo?.code ?? null,
discount:
promo && promo.promo_type === "percentage"
? `${toDisplayAmount("percentage", promo.amount_off)}%`
: promo
? `$${promo.amount_off.toFixed(2)}`
: null,
});
}"use client";
import { useState } from "react";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
import type { WhopCheckoutPromoCode } from "@whop/checkout/react";
import { toDisplayAmount } from "@/lib/promo";
interface Receipt {
paid: number;
saved: number;
code: string | null;
}
async function verifyReceipt(receiptId: string) {
for (let attempt = 1; attempt <= 5; attempt++) {
const response = await fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId }),
});
if (response.status === 202 || response.status === 404) {
await new Promise((resolve) => setTimeout(resolve, attempt * 1000));
continue;
}
return response.ok ? ((await response.json()) as Receipt) : null;
}
return null;
}
export function PromoCheckout({
planId,
environment,
returnUrl,
promoCode,
}: {
planId: string;
environment: "sandbox" | "production";
returnUrl: string;
promoCode?: string;
}) {
const [applied, setApplied] = useState<WhopCheckoutPromoCode | null>(null);
const [receipt, setReceipt] = useState<Receipt | null>(null);
return (
<div>
<WhopCheckoutEmbed
key={`${planId}:${promoCode ?? ""}`}
planId={planId}
environment={environment}
returnUrl={returnUrl}
promoCode={promoCode}
onPromoCodeChanged={setApplied}
onComplete={async (_planId, receiptId) => {
if (receiptId) setReceipt(await verifyReceipt(receiptId));
}}
/>
{applied && (
<p>
{applied.code} is on, worth{" "}
{applied.type === "percentage"
? `${toDisplayAmount("percentage", applied.amount)}%`
: `$${applied.amount}`}
</p>
)}
{receipt && (
<p>
Paid ${receipt.paid.toFixed(2)} and saved ${receipt.saved.toFixed(2)}
{receipt.code ? ` with ${receipt.code}` : ""}
</p>
)}
</div>
);
}import { getWhop } from "@/lib/whop";
import { toSummary, type RawPromoCode } from "@/lib/promo";
export async function pausePromoCode(id: string) {
const paused = await getWhop().promoCodes.deactivate({ id });
return toSummary(paused as unknown as RawPromoCode);
}
export async function resumePromoCode(id: string) {
const resumed = await getWhop().promoCodes.activate({ id });
return toSummary(resumed as unknown as RawPromoCode);
}
export async function archivePromoCode(id: string) {
const { deleted } = await getWhop().promoCodes.delete({ id });
return deleted;
}