Add pay-per-view to a Next.js app

1. Create the link

Keep DROPFANS_API_KEY in your server environment. The items must already be in the creator's vault.

// app/api/drop/route.ts
export async function POST(req: Request) {
  const { name, price, vaultItemIds } = await req.json();
  const res = await fetch('https://www.dropfans.io/api/external/v1/drops', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + process.env.DROPFANS_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, price, vaultItemIds }),
  });
  if (!res.ok) return Response.json(await res.json(), { status: res.status });
  const { productId, buyUrl } = await res.json();
  return Response.json({ productId, buyUrl });
}

Send the buyer to buyUrl. Add ?m=<your reference> to tie the sale to your own chat or user.

2. Verify the webhook

Webhooks need an approved app. Read the raw body before parsing it.

// app/api/webhooks/2fans/route.ts
import crypto from 'node:crypto';

function verify(rawBody: string, header: string, secret: string) {
  const parts = Object.fromEntries(header.split(',').map((p) => p.split('=')));
  const t = Number(parts.t);
  if (!t || Math.abs(Date.now() / 1000 - t) > 300) return false;
  const expected = crypto.createHmac('sha256', secret).update(t + '.' + rawBody).digest('hex');
  const a = Buffer.from(expected);
  const b = Buffer.from(parts.v1 ?? '');
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}

export async function POST(req: Request) {
  const raw = await req.text();
  const signature = req.headers.get('DropFans-Signature') ?? '';
  if (!verify(raw, signature, process.env.TWOFANS_WEBHOOK_SECRET!)) {
    return new Response('Bad signature', { status: 400 });
  }
  const event = JSON.parse(raw);
  if (event.type === 'drop.paid') {
    // Queue the work and dedupe on event.data.orderId.
  }
  return new Response('ok');
}

Answer within 5 seconds and do the work afterwards. Without an approved app, poll POST /drops/check-status instead.

3. Let your agent do it

Give your coding agent Let your AI set it up. It opens each page, you handle the ID check, and it writes the rest.