Connect Whop
Create a Whop app and fill in your credentials.
To move past mock mode, create a Whop app and a product to gate, then fill in the environment variables.
Create a Whop app
In the Whop dashboard, open the Developer section and create an app. Note two things:
- The App ID (
app_…) — your OAuth client id. - An App API key (
apik_…) — used by the server to verify access and webhooks.
Enable the oauth:token_exchange permission on the app. The extension is a public OAuth client, so it never ships a client secret.
Create the product and plan
Create the product you want to gate. Its id (prod_…) is WHOP_ACCESS_RESOURCE_ID. Create a plan for it (plan_…) and set it as WHOP_PLAN_ID — that's what the checkout opens.
Set the environment variables
Copy the example file and fill it in:
cp .env.example .env.local| Variable | Value |
|---|---|
NEXT_PUBLIC_WHOP_APP_ID | your app_… id |
WHOP_API_KEY | your apik_… key (server only) |
WHOP_ACCESS_RESOURCE_ID | the prod_… you gate |
WHOP_PLAN_ID | the plan_… the checkout opens |
WHOP_WEBHOOK_SECRET | the webhook signing secret |
WHOP_MOCK_MODE | false |
WHOP_API_KEY and WHOP_WEBHOOK_SECRET are the only server secrets. Never put them in the extension's env — Vite compiles those values into the shipped bundle.
Add the OAuth redirect URI
Load the unpacked extension, copy its id, and add https://<extension-id>.chromiumapp.org/whop as an OAuth redirect URI in your Whop app.