​
Create a webhook

1

Go to your app's webhook settings

  1. Go to the developer dashboard
  2. Create a new app or select an existing one
  3. Click on Webhooks
Webhook Settings
2

Create a webhook

  1. Click on Create webhook
  2. Set your endpoint URL
Webhook URL
When testing locally, you’ll need to tunnel your requests to your localhost endpoint. You can use ngrok to do this.
  1. Select the events you want to receive and click on Save
Webhook Events
3

Copy your webhook secret

Copy the webhook secret by clicking on it and safely store it in your environment variables.
Webhook Secret

​
Handle webhook events

Set up a webhook route to handle the selected events:
app/api/webhook/whop/route.ts
import { makeWebhookValidator, type PaymentWebhookData } from "@whop/api";
import { after } from "next/server";

const validateWebhook = makeWebhookValidator({
  webhookSecret: process.env.WHOP_WEBHOOK_SECRET,
});

export async function POST(request: Request) {
  // Validate the webhook to ensure it's from Whop
  const webhook = await validateWebhook(request);

  // Handle the webhook event
  if (webhook.action === "payment.succeeded") {
    after(handlePaymentSucceededWebhook(webhook.data));
  }

  // Make sure to return a 2xx status code quickly. Otherwise the webhook will be retried.
  return new Response("OK", { status: 200 });
}

async function handlePaymentSucceededWebhook(data: PaymentWebhookData) {
  const { id, user_id, subtotal, amount_after_fees, metadata, ... } = data;

  // ...
}

​
Test webhook events

You can send dummy webhook events to your endpoint for testing purposes.
1

Open the test webhook popup

Test Webhook Popup
2

Select and send the event you want to test

Test Webhook