Cómo integrar Polar en Next.js paso a paso

bun add @polar-sh/sdk

POLAR_ACCESS_TOKEN=polar_oat_...
POLAR_WEBHOOK_SECRET=whsec_...
POLAR_SERVER=production

import { Polar } from '@polar-sh/sdk';

export const polar = new Polar({
  accessToken: process.env.POLAR_ACCESS_TOKEN!,
  server: process.env.POLAR_SERVER as 'production' | 'sandbox',
});

import { polar } from '@/lib/polar/client';
import { auth } from '@/lib/auth/server';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { productId } = await req.json();

  const checkout = await polar.checkouts.create({
    productId,
    customerEmail: session.user.email,
    successUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/checkout/success`,
  });

  return NextResponse.json({ url: checkout.url });
}

import { polar } from '@/lib/polar/client';
import { db } from '@/lib/db/client';
import { headers } from 'next/headers';

export async function POST(req: Request) {
  const body = await req.text();
  const headersList = await headers();
  const signature = headersList.get('webhook-signature');

  // Validar firma
  const event = polar.webhooks.verify({
    body,
    signature: signature!,
    secret: process.env.POLAR_WEBHOOK_SECRET!,
  });

  switch (event.type) {
    case 'subscription.created':
      await db.subscription.create({
        data: {
          userId: event.data.metadata.userId,
          polarSubscriptionId: event.data.id,
          status: 'active',
        },
      });
      break;

    case 'subscription.canceled':
      await db.subscription.update({
        where: { polarSubscriptionId: event.data.id },
        data: { status: 'canceled' },
      });
      break;

    case 'order.created':
      // Compra única
      await db.purchase.create({
        data: {
          userId: event.data.metadata.userId,
          polarOrderId: event.data.id,
          amount: event.data.amount,
        },
      });
      break;
  }

  return new Response('OK', { status: 200 });
}

ngrok http 3000

'use client';
import { useRouter } from 'next/navigation';

export function CheckoutButton({ productId }: { productId: string }) {
  const router = useRouter();

  async function handleCheckout() {
    const res = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId }),
    });
    const { url } = await res.json();
    router.push(url);
  }

  return <button onClick={handleCheckout}>Comprar</button>;
}