Cobra con Mercado Pago directo en tu webque nadie se vaya de tu página justo cuando ya decidió comprar

# Va al navegador: solo tokeniza tarjetas, no puede cobrar
NEXT_PUBLIC_MP_PUBLIC_KEY=APP_USR-...

# Solo servidor: crea y consulta pagos
MP_ACCESS_TOKEN=APP_USR-...

# Solo servidor: se genera al guardar el webhook en el panel
MP_WEBHOOK_SECRET=...

# Supabase, solo servidor
SUPABASE_URL=https://xxxx.supabase.co
SUPABASE_SERVICE_ROLE_KEY=...

"use client";

import { useEffect, useRef, useState } from "react";

export type ResultadoPago = "aprobado" | "pendiente" | "rechazado";

interface FormDataBrick {
  token?: string;
  payment_method_id?: string;
  issuer_id?: string | number;
  installments?: number;
  payer?: { email?: string };
}

interface BrickMP {
  unmount: () => void;
}

interface ConstructorMP {
  new (publicKey: string, opciones: { locale: string }): {
    bricks: () => {
      create: (tipo: string, contenedor: string, opciones: unknown) => Promise<BrickMP>;
    };
  };
}

declare global {
  interface Window {
    MercadoPago?: ConstructorMP;
  }
}

const CONTENEDOR = "brick-pago";

export default function Pago({
  email,
  monto,
  cupon,
  onResultado,
}: {
  email: string;
  monto: number;
  cupon: string | null;
  onResultado: (r: ResultadoPago) => void;
}) {
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const montado = useRef(false);

  useEffect(() => {
    if (montado.current) return;
    montado.current = true;

    const publicKey = process.env.NEXT_PUBLIC_MP_PUBLIC_KEY;
    if (!publicKey) {
      setError("Falta configurar el cobro.");
      setCargando(false);
      return;
    }

    let brick: BrickMP | null = null;

    const construir = async () => {
      const mp = new (window.MercadoPago as ConstructorMP)(publicKey, { locale: "es-MX" });
      brick = await mp.bricks().create("payment", CONTENEDOR, {
        initialization: {
          amount: monto,
          payer: { email: email || undefined },
        },
        customization: {
          paymentMethods: {
            creditCard: "all",
            debitCard: "all",
            bankTransfer: "all",
            maxInstallments: 3,
          },
        },
        callbacks: {
          onReady: () => setCargando(false),
          onSubmit: async ({ formData }: { formData: FormDataBrick }) => {
            const res = await fetch("/api/pago", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ formData, cupon }),
            });
            const datos = (await res.json()) as { estado?: string; error?: string };
            if (!res.ok) {
              onResultado("rechazado");
              throw new Error(datos.error ?? "pago rechazado");
            }
            if (datos.estado === "approved") onResultado("aprobado");
            else if (datos.estado === "rejected") onResultado("rechazado");
            else onResultado("pendiente");
          },
          onError: () => {
            setError("Algo falló con el formulario de pago.");
            setCargando(false);
          },
        },
      });
    };

    const sdkListo = () => {
      void construir().catch(() => {
        setError("No se pudo cargar el formulario de pago.");
        setCargando(false);
      });
    };

    if (window.MercadoPago) {
      sdkListo();
    } else {
      const s = document.createElement("script");
      s.src = "https://sdk.mercadopago.com/js/v2";
      s.onload = sdkListo;
      s.onerror = () => {
        setError("No se pudo cargar el formulario de pago.");
        setCargando(false);
      };
      document.body.appendChild(s);
    }

    return () => {
      brick?.unmount();
    };
  }, [email, monto, cupon, onResultado]);

  return (
    <div>
      {cargando && !error && <p>Preparando el pago seguro...</p>}
      {error && <p>{error}</p>}
      <div id={CONTENEDOR} />
    </div>
  );
}

import { MercadoPagoConfig } from "mercadopago";

/** Precio canónico. El servidor nunca confía en el monto del cliente. */
export const PRECIO_MXN = 3997;
export const DESCRIPCION_PAGO = "Taller presencial · 29 de agosto";

/**
 * Lo que ve el comprador en su estado de cuenta. Va por pago, no por cuenta:
 * sin él aparece MERPAGO* seguido de tu nombre personal, y eso se traduce
 * en "cargo no reconocido" y contracargos.
 */
export const DESCRIPTOR_TARJETA = "MIMARCA*TALLER";

export function clienteMP() {
  const accessToken = process.env.MP_ACCESS_TOKEN;
  if (!accessToken) return null;
  return new MercadoPagoConfig({ accessToken, options: { timeout: 8000 } });
}

/** Llamada directa a PostgREST con service role. Solo servidor. */
export async function supabase(ruta: string, init: RequestInit = {}): Promise<Response> {
  return fetch(`${process.env.SUPABASE_URL}/rest/v1/${ruta}`, {
    ...init,
    headers: {
      apikey: process.env.SUPABASE_SERVICE_ROLE_KEY as string,
      Authorization: `Bearer ${process.env.SUPABASE_SERVICE_ROLE_KEY}`,
      "Content-Type": "application/json",
      ...(init.headers ?? {}),
    },
  });
}

import { NextResponse } from "next/server";
import { Payment } from "mercadopago";
import { DESCRIPCION_PAGO, DESCRIPTOR_TARJETA, PRECIO_MXN, clienteMP, supabase } from "@/lib/mp";
import { consumirCupon, validarCupon } from "@/lib/cupones";

interface FormDataBrick {
  token?: string;
  payment_method_id?: string;
  /** El brick lo manda como texto; el SDK lo tipa numérico. */
  issuer_id?: string | number;
  installments?: number;
  transaction_amount?: number;
  payer?: { email?: string; identification?: { type?: string; number?: string } };
}

interface Cuerpo {
  formData?: FormDataBrick;
  cupon?: string;
}

export async function POST(req: Request) {
  const cliente = clienteMP();
  if (!cliente) {
    return NextResponse.json({ error: "Cobro no configurado" }, { status: 500 });
  }

  let cuerpo: Cuerpo;
  try {
    cuerpo = (await req.json()) as Cuerpo;
  } catch {
    return NextResponse.json({ error: "JSON inválido" }, { status: 400 });
  }

  const form = cuerpo.formData;
  if (!form?.payment_method_id) {
    return NextResponse.json({ error: "Faltan datos de pago" }, { status: 400 });
  }

  // El navegador solo manda el código; el precio se recalcula aquí.
  const aplicado = cuerpo.cupon ? await validarCupon(cuerpo.cupon) : null;
  const monto = aplicado?.precio ?? PRECIO_MXN;

  const { issuer_id, ...restoForm } = form;
  const pago = new Payment(cliente);

  try {
    const creado = await pago.create({
      body: {
        ...restoForm,
        ...(issuer_id !== undefined ? { issuer_id: Number(issuer_id) } : {}),
        transaction_amount: monto,
        description: DESCRIPCION_PAGO,
        statement_descriptor: DESCRIPTOR_TARJETA,
        installments: form.installments ?? 1,
        metadata: { cupon: aplicado?.codigo ?? null },
      },
      // Un doble toque en el botón no debe generar dos cargos.
      requestOptions: { idempotencyKey: crypto.randomUUID() },
    });

    await supabase("pagos?on_conflict=mp_payment_id", {
      method: "POST",
      headers: { Prefer: "resolution=merge-duplicates" },
      body: JSON.stringify({
        mp_payment_id: String(creado.id),
        estado: creado.status ?? "pending",
        estado_detalle: creado.status_detail ?? null,
        monto,
        monto_original: PRECIO_MXN,
        cupon_codigo: aplicado?.codigo ?? null,
        metodo: creado.payment_method_id ?? null,
        email: creado.payer?.email ?? form.payer?.email ?? null,
        crudo: creado,
      }),
    });

    // El uso del cupón se consume solo si el dinero entró.
    if (creado.status === "approved" && aplicado) {
      await consumirCupon(aplicado.codigo);
    }

    return NextResponse.json({
      id: creado.id,
      estado: creado.status,
      detalle: creado.status_detail,
    });
  } catch (e) {
    console.error("mp pago", e);
    return NextResponse.json({ error: "No se pudo procesar el pago" }, { status: 502 });
  }
}

import { NextResponse } from "next/server";
import { InvalidWebhookSignatureError, Payment, WebhookSignatureValidator } from "mercadopago";
import { clienteMP, supabase } from "@/lib/mp";
import { darAcceso } from "@/lib/acceso";

export async function POST(req: Request) {
  const url = new URL(req.url);

  let cuerpo: { type?: string; action?: string; data?: { id?: string } } = {};
  try {
    cuerpo = await req.json();
  } catch {
    /* A veces avisa sin cuerpo, con los datos en el query */
  }

  const dataId =
    cuerpo.data?.id ?? url.searchParams.get("data.id") ?? url.searchParams.get("id") ?? undefined;

  const secreto = process.env.MP_WEBHOOK_SECRET;
  if (!secreto) {
    return NextResponse.json({ error: "webhook sin secreto" }, { status: 500 });
  }

  try {
    WebhookSignatureValidator.validate({
      xSignature: req.headers.get("x-signature") ?? undefined,
      xRequestId: req.headers.get("x-request-id") ?? undefined,
      dataId,
      secret: secreto,
      toleranceSeconds: 300,
    });
  } catch (e) {
    if (e instanceof InvalidWebhookSignatureError) {
      console.warn("mp webhook: firma inválida", e.reason);
      return NextResponse.json({ error: "firma inválida" }, { status: 401 });
    }
    throw e;
  }

  // Solo nos interesan los avisos de pago. Los demás se confirman y se ignoran.
  if (cuerpo.type === "payment" && dataId) {
    try {
      await sincronizarPago(dataId);
    } catch (e) {
      // Confirmamos igual: si respondemos error, Mercado Pago reintenta
      // cada 15 minutos y un bug nuestro se vuelve un ciclo.
      console.error("mp webhook: no se pudo sincronizar", dataId, e);
    }
  }

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

/** Consulta el pago en Mercado Pago y refleja su estado real en la base. */
async function sincronizarPago(dataId: string) {
  const cliente = clienteMP();
  if (!cliente) return;

  const pago = await new Payment(cliente).get({ id: dataId });

  await supabase("pagos?on_conflict=mp_payment_id", {
    method: "POST",
    headers: { Prefer: "resolution=merge-duplicates" },
    body: JSON.stringify({
      mp_payment_id: String(pago.id),
      estado: pago.status ?? "pending",
      estado_detalle: pago.status_detail ?? null,
      monto: pago.transaction_amount ?? 0,
      metodo: pago.payment_method_id ?? null,
      email: pago.payer?.email ?? null,
      crudo: pago,
      updated_at: new Date().toISOString(),
    }),
  });

  if (pago.status === "approved" && pago.payer?.email) {
    await darAcceso({ paymentId: String(pago.id), email: pago.payer.email });
  }
}

/** Mercado Pago pega un GET al dar de alta la URL. */
export async function GET() {
  return NextResponse.json({ ok: true });
}

create table pagos (
  id uuid primary key default gen_random_uuid(),
  mp_payment_id text unique not null,
  estado text not null,             -- pending | approved | rejected | in_process | ...
  estado_detalle text,
  monto numeric(10,2) not null,
  monto_original numeric(10,2),
  cupon_codigo text,
  metodo text,
  email text,
  acceso_otorgado_en timestamptz,
  crudo jsonb,
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);
create index pagos_estado_idx on pagos (estado);

create table cupones (
  codigo text primary key,
  tipo text not null check (tipo in ('porcentaje', 'monto')),
  valor numeric(10,2) not null,
  usos_max int,
  usos int not null default 0,
  expira_en timestamptz,
  activo boolean not null default true
);

-- Consume un uso de forma atómica. Devuelve 0 filas si ya no quedan.
create or replace function usar_cupon(p_codigo text)
returns setof cupones
language sql
as $$
  update cupones
     set usos = usos + 1
   where codigo = p_codigo
     and activo
     and (usos_max is null or usos < usos_max)
  returning *;
$$;

-- Nadie desde el navegador ejecuta la RPC ni toca las tablas.
revoke execute on function usar_cupon(text) from public, anon;
alter table pagos enable row level security;
alter table cupones enable row level security;

import { PRECIO_MXN, supabase } from "@/lib/mp";

/** Mercado Pago no procesa cobros por debajo de este monto. */
export const MONTO_MINIMO = 10;

export interface Cupon {
  codigo: string;
  tipo: "porcentaje" | "monto";
  valor: number;
  usos_max: number | null;
  usos: number;
  expira_en: string | null;
  activo: boolean;
}

export interface CuponAplicado {
  codigo: string;
  precio: number;
  descuento: number;
}

export function normalizar(codigo: string): string {
  return codigo.trim().toUpperCase().slice(0, 40);
}

function calcularPrecio(cupon: Cupon): number {
  const bruto =
    cupon.tipo === "porcentaje" ? PRECIO_MXN * (1 - cupon.valor / 100) : PRECIO_MXN - cupon.valor;
  return Math.max(MONTO_MINIMO, Math.round(bruto * 100) / 100);
}

/** Única fuente de verdad del precio: el navegador manda el código, jamás el monto. */
export async function validarCupon(codigoCrudo: string): Promise<CuponAplicado | null> {
  const codigo = normalizar(codigoCrudo);
  if (!codigo) return null;

  const res = await supabase(
    `cupones?codigo=eq.${encodeURIComponent(codigo)}&activo=is.true&select=*`,
  );
  if (!res.ok) return null;

  const [cupon] = (await res.json()) as Cupon[];
  if (!cupon) return null;
  if (cupon.usos_max !== null && cupon.usos >= cupon.usos_max) return null;
  if (cupon.expira_en && new Date(cupon.expira_en) <= new Date()) return null;

  const precio = calcularPrecio(cupon);
  return { codigo: cupon.codigo, precio, descuento: Math.round((PRECIO_MXN - precio) * 100) / 100 };
}

/** Consume un uso. Solo debe llamarse cuando el pago quedó aprobado. */
export async function consumirCupon(codigo: string): Promise<void> {
  await supabase("rpc/usar_cupon", {
    method: "POST",
    body: JSON.stringify({ p_codigo: normalizar(codigo) }),
  });
}

import { NextResponse } from "next/server";
import Stripe from "stripe";
import { PRECIO_MXN, DESCRIPCION_PAGO, DESCRIPTOR_TARJETA } from "@/lib/mp";
import { validarCupon } from "@/lib/cupones";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string);

export async function POST(req: Request) {
  const { cupon, email } = (await req.json()) as { cupon?: string; email?: string };

  // Igual que con Mercado Pago: el navegador manda el código, nunca el precio.
  const aplicado = cupon ? await validarCupon(cupon) : null;
  const monto = aplicado?.precio ?? PRECIO_MXN;

  const intent = await stripe.paymentIntents.create(
    {
      amount: Math.round(monto * 100), // Stripe cobra en centavos
      currency: "mxn",
      description: DESCRIPCION_PAGO,
      statement_descriptor_suffix: DESCRIPTOR_TARJETA.slice(0, 22),
      receipt_email: email,
      automatic_payment_methods: { enabled: true },
      metadata: { cupon: aplicado?.codigo ?? "" },
    },
    { idempotencyKey: crypto.randomUUID() },
  );

  return NextResponse.json({ clientSecret: intent.client_secret });
}

import { NextResponse } from "next/server";
import Stripe from "stripe";
import { supabase } from "@/lib/mp";
import { darAcceso } from "@/lib/acceso";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string);

export async function POST(req: Request) {
  // Aquí sí importa: la firma es sobre el cuerpo crudo. Nada de req.json() antes.
  const crudo = await req.text();
  const firma = req.headers.get("stripe-signature") ?? "";

  let evento: Stripe.Event;
  try {
    evento = stripe.webhooks.constructEvent(crudo, firma, process.env.STRIPE_WEBHOOK_SECRET as string);
  } catch {
    return NextResponse.json({ error: "firma inválida" }, { status: 400 });
  }

  // Stripe reintenta hasta 3 días: el id del evento es tu candado contra procesar dos veces.
  const yaVisto = await supabase("eventos_stripe", {
    method: "POST",
    headers: { Prefer: "return=minimal" },
    body: JSON.stringify({ event_id: evento.id, tipo: evento.type }),
  });
  if (yaVisto.status === 409) return NextResponse.json({ ok: true, duplicado: true });

  try {
    if (evento.type === "payment_intent.succeeded") {
      const pi = evento.data.object;
      await supabase("pagos?on_conflict=mp_payment_id", {
        method: "POST",
        headers: { Prefer: "resolution=merge-duplicates" },
        body: JSON.stringify({
          mp_payment_id: pi.id, // misma tabla; la columna guarda el id del procesador
          estado: "approved",
          monto: pi.amount_received / 100,
          metodo: "stripe",
          email: pi.receipt_email ?? null,
          crudo: pi,
          updated_at: new Date().toISOString(),
        }),
      });
      if (pi.receipt_email) await darAcceso({ paymentId: pi.id, email: pi.receipt_email });
    }
    if (evento.type === "charge.refunded" || evento.type === "charge.dispute.created") {
      // Revocar acceso y avisar, igual que refunded / charged_back en Mercado Pago.
    }
  } catch (e) {
    console.error("stripe webhook", evento.type, e);
  }

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

create table eventos_stripe (
  event_id text primary key,
  tipo text not null,
  recibido_en timestamptz default now()
);
alter table eventos_stripe enable row level security;