Storefront

A branded online store on the Whop API: products, cart and Whop Pay checkout.

Preview

Code

$npm install @whop/sdk

app/api/products/route.ts

const WHOP = "https://api.whop.com/api/v1";
const auth = { Authorization: `Bearer ${process.env.WHOP_API_KEY}` };

export async function GET() {
  const products = await fetch(`${WHOP}/products`, { headers: auth }).then((r) => r.json());

  return Response.json({
    products: products.data,
    cursor: products.page_info.end_cursor,
  });
}

app/checkout/actions.ts

"use server";

const WHOP = "https://api.whop.com/api/v1";
const auth = {
  Authorization: `Bearer ${process.env.WHOP_API_KEY}`,
  "Content-Type": "application/json",
};

export async function checkout(planId: string) {
  const session = await fetch(`${WHOP}/checkout_sessions`, {
    method: "POST",
    headers: auth,
    body: JSON.stringify({ plan_id: planId }),
  }).then((r) => r.json());

  return session.purchase_url;
}