Server Integration — Payment Widget

<div
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-type="custom"
  data-amount="25.00"
  data-product-name="500 Tokens"
  data-customer-email="user@example.com"

  data-meta-host-tenant-id="lga_my_tenant_uuid"
  data-meta-clerk-user-id="user_abc123"
  data-meta-pack-amount="500"
  data-meta-nonce="optional-server-generated-uuid">
</div>
<script src="https://cdn.widgetfied.com/portal.js"></script>

// Example: Next.js App Router
// app/api/widgetfied/webhook/route.ts

import crypto from 'crypto';
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'nodejs'; // crypto.timingSafeEqual requires Node

function verifySignature(rawBody: string, sigHeader: string | null, secret: string): boolean {
  if (!sigHeader) return false;
  const match = sigHeader.match(/^t=(\d+),v1=([a-f0-9]+)$/);
  if (!match) return false;
  const [, , signatureHex] = match;

  const expectedHex = crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('hex');

  if (signatureHex.length !== expectedHex.length) return false;

  // Constant-time comparison to prevent timing attacks
  return crypto.timingSafeEqual(
    Buffer.from(signatureHex, 'hex'),
    Buffer.from(expectedHex, 'hex')
  );
}

export async function POST(req: NextRequest): Promise<NextResponse> {
  const secret = process.env.WIDGETFIED_WEBHOOK_SECRET;
  if (!secret) {
    return NextResponse.json({ error: 'server not configured' }, { status: 500 });
  }

  // CRITICAL: read raw body BEFORE parsing — HMAC must match the
  // exact bytes Widgetfied signed. Don't use req.json() first.
  const rawBody = await req.text();
  const sigHeader = req.headers.get('x-widgetfied-signature');

  if (!verifySignature(rawBody, sigHeader, secret)) {
    return NextResponse.json({ error: 'invalid signature' }, { status: 401 });
  }

  const event = JSON.parse(rawBody);

  // Acknowledge unknown event types fast — we may add more later
  if (event.type !== 'payment.completed' && event.type !== 'payment.failed') {
    return NextResponse.json({ received: true, ignored: true });
  }

  if (event.type === 'payment.completed') {
    const { sessionId, amount, currency, customerEmail, metadata } = event.data;
    const { hostTenantId, clerkUserId, packAmount } = metadata;

    // Validate required metadata
    if (!hostTenantId || !clerkUserId) {
      return NextResponse.json({ error: 'missing metadata' }, { status: 400 });
    }

    // Compute fulfillment value SERVER-SIDE — never trust client packAmount
    // as the credit amount. Use it only as a sanity check.
    const tokensCredited = computeTokensForUsd(amount / 100);

    // Idempotent insert — sessionId is your natural dedup key.
    // Use a UNIQUE constraint on session_id + INSERT … ON CONFLICT
    // DO NOTHING (Postgres) so duplicate deliveries are no-ops.
    try {
      await db.insert(tokenPurchases).values({
        sessionId,           // UNIQUE constraint here
        hostTenantId,
        clerkUserId,
        tokensCredited,
        amountCents: amount,
        receiptEmail: customerEmail,
      }).onConflictDoNothing();
    } catch (err) {
      // Return 5xx so Widgetfied retries (don't ack a real failure)
      return NextResponse.json({ error: 'credit failed' }, { status: 500 });
    }
  }

  if (event.type === 'payment.failed') {
    // Optional — surface the failure in your UI / send a notification
    const { sessionId, failureMessage } = event.data;
    await logPaymentFailure({ sessionId, failureMessage });
  }

  return NextResponse.json({ received: true });
}

# Set the values you need (use a leading space on the export
# line to keep them out of shell history on macOS/zsh)
 export WIDGETFIED_TENANT_API_KEY='sk_live_…'  # from dashboard
 export WIDGETFIED_WEBHOOK_SECRET='<your generated 64-char hex>'

curl -X POST https://widgetfied.com/api/tenants/YOUR_TENANT_ID/webhooks \
  -H "x-api-key: $WIDGETFIED_TENANT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{
    \"url\": \"https://yourapp.com/api/widgetfied/webhook\",
    \"events\": [\"payment.completed\", \"payment.failed\"],
    \"secret\": \"$WIDGETFIED_WEBHOOK_SECRET\"
  }"