clerk/clerk-facturacion

¿Qué hace clerk-facturacion?

Gestión de suscripciones con Clerk Billing: renderiza la tabla de precios y el cajón de pago integrado de Clerk, configura planes de suscripción, planes con límite de asientos para B2B, derechos de funciones con has(), y webhooks de facturación. Ideal para monetización SaaS, control de acceso por plan, flujos de pago, pruebas, facturación y gestión del ciclo de vida de suscripciones.

Funcionalidades

• Tabla de precios (PricingTable): Renderiza una tabla visual de planes de suscripción que los usuarios pueden seleccionar.
• Cajón de pago integrado (checkout): Abre un cajón en la aplicación para completar el proceso de pago sin redirigir al usuario.
• Planes con límite de asientos: Configura planes que limitan la cantidad de miembros (útil para equipos y empresas B2B).
• Derechos de funciones: Usa has() para verificar si un usuario tiene acceso a funciones específicas según su plan.
• Webhooks de facturación: Recibe eventos como subscription.created, subscription.updated, subscription.cancelled, etc., para sincronizar el estado de suscripciones en tu backend.
• Gestión del ciclo de vida: Soporta pruebas gratuitas, facturación recurrente, cancelaciones y actualizaciones de plan.

Requisitos

• Una cuenta en Clerk con el plan Billing habilitado.
• Configurar un proveedor de pagos (Stripe, etc.) en el panel de Clerk.
• Instalar el paquete @clerk/clerk-react (o @clerk/nextjs para Next.js) y @clerk/clerk-billing.

Uso básico

1. Renderizar la tabla de precios

import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-react';
import { PricingTable } from '@clerk/clerk-billing';

function PricingPage() {
  return (
    <>
      <SignedIn>
        <PricingTable />
      </SignedIn>
      <SignedOut>
        <p>Por favor, inicia sesión para ver los planes.</p>
      </SignedOut>
    </>
  );
}

2. Control de acceso con has()

import { useUser } from '@clerk/clerk-react';

function FeatureGate({ feature }) {
  const { user } = useUser();
  const hasFeature = user?.has({ permission: feature });

  if (!hasFeature) {
    return <p>Esta función requiere una suscripción.</p>;
  }

  return <p>Función disponible.</p>;
}

3. Manejar webhooks de facturación

Configura un endpoint en tu backend para recibir eventos de Clerk Billing:

import { Webhook } from 'svix';

export async function POST(request: Request) {
  const payload = await request.json();
  const webhook = new Webhook(process.env.CLERK_WEBHOOK_SECRET!);

  try {
    const event = webhook.verify(payload, request.headers);
    // Manejar eventos como 'subscription.created', 'subscription.updated', etc.
    console.log('Evento recibido:', event);
    return new Response('OK', { status: 200 });
  } catch (err) {
    return new Response('Error de verificación', { status: 400 });
  }
}

Documentación adicional

Para más detalles, consulta la documentación oficial de Clerk Billing.