import Whop from "@whop/sdk";
const whop = new Whop({
apiKey: process.env.WHOP_COMPANY_API_KEY,
baseURL: "https://sandbox-api.whop.com/api/v1",
});
// Your company id, from the dashboard URL: whop.com/dashboard/biz_...
const COMPANY_ID = "biz_...";
const product = await whop.products.create({
company_id: COMPANY_ID,
title: "Pro",
visibility: "visible",
});
const plan = await whop.plans.create({
product_id: product.id,
plan_type: "renewal",
billing_period: 30,
initial_price: 0,
renewal_price: 10,
trial_period_days: 3,
currency: "usd",
release_method: "buy_now",
visibility: "visible",
});
console.log("WHOP_PRO_PRODUCT_ID=" + product.id);
console.log("WHOP_PRO_PLAN_ID=" + plan.id);node --env-file=.env.local scripts/setup.mjsnpm install @whop/sdk @whop/checkout iron-session zod| Variable | Example | How to get it |
|---|---|---|
WHOP_COMPANY_API_KEY | apik_... | Whop company > Dashboard > Developer > API keys. |
WHOP_PRO_PRODUCT_ID | prod_... | The product your trial unlocks. |
WHOP_PRO_PLAN_ID | plan_... | The recurring plan with the free trial days. |
WHOP_SANDBOX | true | Set manually. true in development; remove or set 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 | Our app origin, used for the embed's return URL. |
import { z } from "zod";
const envSchema = z.object({
WHOP_COMPANY_API_KEY: z.string().startsWith("apik_"),
WHOP_PRO_PRODUCT_ID: z.string().startsWith("prod_"),
WHOP_PRO_PLAN_ID: z.string().startsWith("plan_"),
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_PRO_PRODUCT_ID: process.env.WHOP_PRO_PRODUCT_ID?.trim(),
WHOP_PRO_PLAN_ID: process.env.WHOP_PRO_PLAN_ID?.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;
}import {
getIronSession,
type IronSession,
type SessionOptions,
} from "iron-session";
import { cookies } from "next/headers";
import { getEnv } from "@/lib/env";
export interface SessionData {
whopUserId?: string;
username?: string;
membershipId?: string;
unlockedAt?: number;
}
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 { cache } from "react";
import { getSession } from "@/lib/session";
import { getWhop } from "@/lib/whop";
export const checkProductAccess = cache(
async (productId: string, whopUserId: string): Promise<boolean> => {
const result = await getWhop().users.checkAccess(productId, {
id: whopUserId,
});
return result.has_access;
},
);
export async function hasAccess(
productIds: Array<string | null | undefined>,
): Promise<boolean> {
const session = await getSession();
const whopUserId = session.whopUserId;
if (!whopUserId) return false;
const ids = productIds.filter((id): id is string => Boolean(id));
const results = await Promise.all(
ids.map((id) => checkProductAccess(id, whopUserId)),
);
return results.some(Boolean);
}"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
interface TrialCheckoutCardProps {
planId: string;
environment: "production" | "sandbox";
returnUrl: string;
}
type Phase =
| { name: "checkout" }
| { name: "verifying" }
| { name: "error"; message: string; receiptId?: string };
const POLL_MS = 2000;
const MAX_ATTEMPTS = 10;
export function TrialCheckoutCard({
planId,
environment,
returnUrl,
}: TrialCheckoutCardProps) {
const router = useRouter();
const [phase, setPhase] = useState<Phase>({ name: "checkout" });
const cancelled = useRef(false);
useEffect(() => {
cancelled.current = false;
return () => {
cancelled.current = true;
};
}, []);
const verify = useCallback(
async (receiptId: string) => {
setPhase({ name: "verifying" });
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
let res: Response;
try {
res = await fetch("/api/unlock", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ receiptId }),
});
} catch {
setPhase({
name: "error",
message: "We couldn't reach the server. Try again.",
receiptId,
});
return;
}
if (cancelled.current) return;
if (res.ok) {
router.refresh();
return;
}
if (res.status === 202 || res.status === 404) {
await new Promise((resolve) => setTimeout(resolve, POLL_MS));
continue;
}
setPhase({
name: "error",
message:
"We couldn't verify the checkout. Keep your receipt id and contact support if the trial doesn't appear.",
receiptId,
});
return;
}
setPhase({
name: "error",
message: "The trial is taking longer than expected to confirm. Try again.",
receiptId,
});
},
[router],
);
if (phase.name === "verifying") {
return <p>Starting your trial...</p>;
}
if (phase.name === "error") {
return (
<div>
<p>{phase.message}</p>
{phase.receiptId && (
<button
type="button"
onClick={() => void verify(phase.receiptId as string)}
>
Retry verification
</button>
)}
</div>
);
}
return (
<WhopCheckoutEmbed
planId={planId}
environment={environment}
returnUrl={returnUrl}
onComplete={(_planId, receiptId) => {
if (!receiptId) {
setPhase({
name: "error",
message:
"The checkout didn't hand back a receipt. Check your email for it.",
});
return;
}
void verify(receiptId);
}}
/>
);
}import { TrialCheckoutCard } from "@/components/TrialCheckoutCard";
import { getEnv } from "@/lib/env";
import { hasAccess } from "@/lib/paywall";
export default async function PremiumPage() {
const env = getEnv();
const unlocked = await hasAccess([env.WHOP_PRO_PRODUCT_ID]);
return (
<main>
<h1>Pro workspace</h1>
{unlocked ? (
<section>
<p>Everything you sell renders here, for members and trialers alike.</p>
</section>
) : (
<div>
<p>Try everything free for 3 days. $10 a month after that.</p>
<TrialCheckoutCard
planId={env.WHOP_PRO_PLAN_ID}
environment={env.WHOP_SANDBOX ? "sandbox" : "production"}
returnUrl={`${env.APP_URL}/premium`}
/>
</div>
)}
</main>
);
}import { z } from "zod";
import { NotFoundError } from "@whop/sdk";
import { getEnv } from "@/lib/env";
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}$/),
});
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 !== getEnv().WHOP_PRO_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" || payment.substatus?.includes("refund")) {
return Response.json({ error: "not_paid" }, { status: 403 });
}
if (!payment.user?.id) {
return Response.json({ error: "no_user" }, { status: 502 });
}
const session = await getSession();
session.whopUserId = payment.user.id;
session.username = payment.user.username;
session.membershipId = payment.membership?.id;
session.unlockedAt = Date.now();
await session.save();
return Response.json({ ok: true, username: payment.user.username });
}import { getSession } from "@/lib/session";
import { getWhop } from "@/lib/whop";
export async function POST() {
const session = await getSession();
if (!session.membershipId) {
return Response.json({ error: "no_membership" }, { status: 400 });
}
const membership = await getWhop().memberships.addFreeDays(
session.membershipId,
{ free_days: 3 },
);
return Response.json({
ok: true,
renewalPeriodEnd: membership.renewal_period_end,
});
}import { getSession } from "@/lib/session";
import { getWhop } from "@/lib/whop";
export async function POST() {
const session = await getSession();
if (!session.membershipId) {
return Response.json({ error: "no_membership" }, { status: 400 });
}
await getWhop().memberships.cancel(session.membershipId, {
cancellation_mode: "immediate",
});
return Response.json({ ok: true });
}