npm 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 subscription product's ID. |
WHOP_PRO_PLAN_ID | plan_... | The recurring plan on that product. |
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;
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());
}export interface Post {
slug: string;
title: string;
teaser: string;
premium: boolean;
productId: string | null;
planId: string | null;
body: string[];
}
export const posts: Post[] = [
{
slug: "getting-started",
title: "Getting started with Pulse",
teaser: "What this product does and who it is for.",
premium: false,
productId: null,
planId: null,
body: ["Free content renders for everyone and never touches the gate."],
},
{
slug: "saas-pricing-teardown",
title: "Pricing teardown: what 50 top SaaS apps actually charge",
teaser: "We normalized the public pricing of 50 category leaders.",
premium: true,
productId: "prod_REPLACE_WITH_POST_PRODUCT",
planId: "plan_REPLACE_WITH_ONE_TIME_PLAN",
body: ["The premium analysis lives here."],
},
{
slug: "the-churn-report",
title: "The churn report: why customers actually leave",
teaser: "Twelve months of cancellation reasons, categorized.",
premium: true,
productId: null,
planId: null,
body: ["This post is for subscribers only."],
},
];
export function getPost(slug: string): Post | undefined {
return posts.find((post) => post.slug === slug);
}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> => {
try {
const result = await getWhop().users.checkAccess(productId, {
id: whopUserId,
});
return result.has_access;
} catch {
return false;
}
},
);
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";
export interface TierOption {
key: string;
label: string;
description: string;
planId: string;
}
interface PaywallCardProps {
options: TierOption[];
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 PaywallCard({
options,
environment,
returnUrl,
}: PaywallCardProps) {
const router = useRouter();
const [selected, setSelected] = useState(options[0]?.key ?? "");
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 payment. If you were charged, keep your receipt id and contact support.",
receiptId,
});
return;
}
setPhase({
name: "error",
message: "The payment is taking longer than expected. Try again.",
receiptId,
});
},
[router],
);
const active =
options.find((option) => option.key === selected) ?? options[0];
if (phase.name === "verifying") {
return <p>Verifying your purchase...</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 (
<div>
{options.length > 1 && (
<div>
{options.map((option) => (
<button
key={option.key}
type="button"
onClick={() => setSelected(option.key)}
>
{option.label}: {option.description}
</button>
))}
</div>
)}
{active && (
<WhopCheckoutEmbed
key={active.planId}
planId={active.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);
}}
/>
)}
</div>
);
}import { notFound } from "next/navigation";
import { PaywallCard, type TierOption } from "@/components/PaywallCard";
import { getPost } from "@/constants/posts";
import { getEnv } from "@/lib/env";
import { hasAccess } from "@/lib/paywall";
export default async function PostPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const post = getPost(slug);
if (!post) notFound();
const env = getEnv();
const unlocked =
!post.premium ||
(await hasAccess([env.WHOP_PRO_PRODUCT_ID, post.productId]));
return (
<main>
<h1>{post.title}</h1>
{unlocked ? (
<article>
{post.body.map((paragraph, i) => (
<p key={i}>{paragraph}</p>
))}
</article>
) : (
<div>
<p>{post.teaser}</p>
<PaywallCard
options={
[
post.planId && {
key: "post",
label: "Unlock this post",
description: "$5 one time. Yours forever.",
planId: post.planId,
},
{
key: "pro",
label: "Pulse Pro",
description: "$10 a month. Every premium post.",
planId: env.WHOP_PRO_PLAN_ID,
},
].filter(Boolean) as TierOption[]
}
environment={env.WHOP_SANDBOX ? "sandbox" : "production"}
returnUrl={`${env.APP_URL}/posts/${post.slug}`}
/>
</div>
)}
</main>
);
}npm run devimport { z } from "zod";
import { NotFoundError } from "@whop/sdk";
import { posts } from "@/constants/posts";
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;
}
const env = getEnv();
const knownProductIds = new Set(
[env.WHOP_PRO_PRODUCT_ID, ...posts.map((post) => post.productId)].filter(
(id): id is string => Boolean(id),
),
);
if (!payment.product?.id || !knownProductIds.has(payment.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.unlockedAt = Date.now();
await session.save();
return Response.json({ ok: true, username: payment.user.username });
}