npm install @whop/sdk @whop/checkout iron-session zod| Variable | Example | How to get it |
|---|---|---|
WHOP_COMPANY_API_KEY | apik_... | Whop dashboard > Developer > Company API keys. |
WHOP_SANDBOX | true | Set manually. true while you build. Remove it or set it to false in production. |
SESSION_SECRET | ... | Generate with openssl rand -base64 32. 32+ chars. iron-session uses it to encrypt the cookie. |
APP_URL | http://localhost:3000 | Your app origin. The button's returnUrl is built from it. |
import { z } from "zod";
const envSchema = z.object({
WHOP_COMPANY_API_KEY: z.string().startsWith("apik_"),
WHOP_SANDBOX: z
.string()
.optional()
.transform((v) => v === "true"),
SESSION_SECRET: z.string().min(32),
APP_URL: z.string().url(),
});
type Env = z.infer<typeof envSchema>;
let cached: Env | null = null;
export function getEnv(): Env {
if (cached) return cached;
cached = envSchema.parse({
WHOP_COMPANY_API_KEY: process.env.WHOP_COMPANY_API_KEY?.trim(),
WHOP_SANDBOX: process.env.WHOP_SANDBOX?.trim(),
SESSION_SECRET: process.env.SESSION_SECRET,
APP_URL: process.env.APP_URL?.trim(),
});
return cached;
}import Whop from "@whop/sdk";
import { getEnv } from "@/lib/env";
let cached: Whop | null = null;
export function getWhop(): 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",
});
return cached;
}| Browser | Shows | Where they pay |
|---|---|---|
| Safari on Mac or iPhone with Apple Pay set up | Apple Pay button | Right there, no window |
| Chrome or Android with Google Pay | Google Pay button | Right there, no window |
| Everything else | Whop Pay button | A checkout window over your page |
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 --apiKey apik_your_key_herewhop products create --title "Pro pass" --description "Unlocked with the express checkout button." --visibility visible
whop plans create --product_id prod_XXXXXXXXX --plan_type one_time --initial_price 19.99 --visibility visibleexport const WHOP_IDS = {
productId: "prod_XXXXXXXXX",
planId: "plan_XXXXXXXXX",
} as const;whop skills add"use client";
import { useCallback, useState } from "react";
import { WhopExpressCheckoutButton } from "@whop/checkout/react";
interface PricingCardProps {
planId: string;
environment: "production" | "sandbox";
returnUrl: string;
}
type Phase =
| { name: "idle" }
| { name: "verifying" }
| { name: "unlocked"; receiptId: string }
| { name: "error"; message: string };
const POLL_MS = 2000;
const MAX_ATTEMPTS = 10;
export function PricingCard({ planId, environment, returnUrl }: PricingCardProps) {
const [phase, setPhase] = useState<Phase>({ name: "idle" });
const [hidden, setHidden] = useState(false);
const verify = useCallback(async (receiptId: string) => {
setPhase({ name: "verifying" });
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
const res = await fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId, path: "callback" }),
});
if (res.status === 202 || res.status === 404) {
await new Promise((resolve) => setTimeout(resolve, POLL_MS));
continue;
}
if (res.ok) {
setPhase({ name: "unlocked", receiptId });
return;
}
setPhase({
name: "error",
message: `We couldn't verify the payment. Keep your receipt id (${receiptId}) and contact support.`,
});
return;
}
setPhase({
name: "error",
message: "Verification is taking longer than expected. Refresh and try again.",
});
}, []);
if (hidden) return null;
if (phase.name === "unlocked") return <p>Payment confirmed. You're in.</p>;
if (phase.name === "verifying") return <p>Confirming your payment...</p>;
return (
<div>
{phase.name === "error" && <p>{phase.message}</p>}
<WhopExpressCheckoutButton
planId={planId}
returnUrl={returnUrl}
environment={environment}
theme="light"
themeOptions={{ accentColor: "orange" }}
fallback={<div>Resolving payment method...</div>}
onComplete={(_planId, receiptId) => {
if (receiptId) void verify(receiptId);
}}
onPaymentError={(error) => setPhase({ name: "error", message: error.message })}
onExpressMethodResolved={({ rendered }) => {
if (rendered === "none") setHidden(true);
}}
/>
</div>
);
}import { PricingCard } from "@/components/PricingCard";
import { WHOP_IDS } from "@/constants/whop-ids";
import { getEnv } from "@/lib/env";
export default function PricingPage() {
const env = getEnv();
return (
<main>
<h1>Pro pass</h1>
<p>Everything we ship, one payment, $19.99.</p>
<PricingCard
planId={WHOP_IDS.planId}
environment={env.WHOP_SANDBOX ? "sandbox" : "production"}
returnUrl={`${env.APP_URL}/checkout/complete`}
/>
</main>
);
}npm run devimport { getIronSession, type IronSession, type SessionOptions } from "iron-session";
import { cookies } from "next/headers";
import { getEnv } from "@/lib/env";
export interface SessionData {
callbackPaymentId?: string;
redirectPaymentId?: string;
redirectStateId?: string;
}
export function sessionOptions(): SessionOptions {
return {
password: getEnv().SESSION_SECRET,
cookieName: "whop_session",
cookieOptions: {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
path: "/",
},
};
}
export async function getSession(): Promise<IronSession<SessionData>> {
const store = await cookies();
return getIronSession<SessionData>(store, sessionOptions());
}import { z } from "zod";
import { NotFoundError } from "@whop/sdk";
import { WHOP_IDS } from "@/constants/whop-ids";
import { getSession } from "@/lib/session";
import { getWhop } from "@/lib/whop";
const bodySchema = z.object({
receiptId: z.string().regex(/^pay_[A-Za-z0-9]{4,60}$/),
path: z.enum(["callback", "redirect"]),
stateId: z.string().max(80).optional(),
});
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(parsed.data.receiptId);
} catch (error: unknown) {
if (error instanceof NotFoundError) {
return Response.json({ error: "not_found" }, { status: 404 });
}
throw error;
}
if (payment.product?.id !== WHOP_IDS.productId) {
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 session = await getSession();
if (parsed.data.path === "callback") {
session.callbackPaymentId = payment.id;
} else {
session.redirectPaymentId = payment.id;
session.redirectStateId = parsed.data.stateId;
}
await session.save();
return Response.json({
ok: true,
receipt: {
id: payment.id,
status: payment.status,
substatus: payment.substatus,
total: payment.total,
currency: payment.currency,
paidAt: payment.paid_at,
cardBrand: payment.payment_method?.card?.brand ?? null,
cardLast4: payment.payment_method?.card?.last4 ?? null,
},
});
}import { NotFoundError } from "@whop/sdk";
import { WHOP_IDS } from "@/constants/whop-ids";
import { getWhop } from "@/lib/whop";
function first(value: string | string[] | undefined): string | undefined {
if (typeof value === "string") return value;
return Array.isArray(value) ? value[0] : undefined;
}
export default async function CheckoutCompletePage({
searchParams,
}: {
searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
const params = await searchParams;
const status = first(params.status);
const paymentId = first(params.payment_id);
const setupIntentId = first(params.setup_intent_id);
if (status !== "success") {
return (
<main>
<h1>Payment not completed</h1>
<p>The payment failed or was canceled, and nothing was charged.</p>
</main>
);
}
if (!paymentId) {
return (
<main>
<h1>All set</h1>
<p>Checkout finished without a charge{setupIntentId ? ", and your payment method was saved" : ""}.</p>
</main>
);
}
let payment = null;
try {
payment = await getWhop().payments.retrieve(paymentId);
} catch (error: unknown) {
if (!(error instanceof NotFoundError)) throw error;
}
if (!payment || payment.status === "pending" || payment.status === "open") {
return (
<main>
<h1>Almost there</h1>
<p>Your payment is still settling. Refresh this page in a few seconds.</p>
</main>
);
}
if (payment.product?.id !== WHOP_IDS.productId || payment.status !== "paid") {
return (
<main>
<h1>We couldn't confirm this payment</h1>
<p>Keep your receipt id ({paymentId}) and contact support.</p>
</main>
);
}
return (
<main>
<h1>Payment confirmed</h1>
<p>${payment.total} {payment.currency?.toUpperCase() ?? "USD"} paid. Receipt {payment.id}.</p>
</main>
);
}<script async defer src="https://js.whop.com/static/checkout/loader.js"></script>
<whop-express-checkout-button
id="buy-button"
plan-id="plan_XXXXXXXXX"
return-url="https://yoursite.com/checkout/complete"
environment="sandbox"
skip-redirect="true"
theme="light"
theme-accent-color="orange"
></whop-express-checkout-button>
<script>
const button = document.getElementById("buy-button");
button.addEventListener("express-method-resolved", (event) => {
if (event.detail.rendered === "none") button.style.display = "none";
});
button.addEventListener("complete", (event) => {
fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId: event.detail.receiptOrSetupIntentId, path: "callback" }),
});
});
button.addEventListener("payment-error", (event) => {
console.log("payment failed", event.detail.message, event.detail.code);
});
</script>