Si usas Lovable, ya puedes validar pagos SPEI automáticamente

Lovable te permite construir aplicaciones web completas con IA sin escribir código desde cero. Pero si tu app necesita recibir pagos por transferencia bancaria en México, tarde o temprano llega la misma pregunta: ¿cómo verifico que el comprobante SPEI que me manda el usuario es real?

La respuesta es apiCEP: una API REST que valida comprobantes SPEI contra Banxico en tiempo real. Y la mejor forma de integrarla en un proyecto de Lovable es a través de Supabase Edge Functions, la misma infraestructura que Lovable ya usa de forma nativa.

Por qué no llamar a apiCEP directamente desde el frontend

Antes de entrar al tutorial, un punto importante: nunca expongas tu API key de apiCEP en el código del frontend. Lovable genera código React que corre en el navegador del usuario, y cualquier secret hardcodeado ahí es público.

La solución correcta es la misma que recomienda Lovable para cualquier integración con APIs externas: usar una Supabase Edge Function como intermediario. La Edge Function corre en el servidor, guarda el API key como secret seguro y es la única que hace la llamada a apiCEP.

Paso 1 — Conecta Supabase a tu proyecto de Lovable

Si aún no tienes Supabase conectado, dile a Lovable en el chat:

Conecta este proyecto a Supabase. Necesito crear Edge Functions para llamar APIs externas de forma segura.

Lovable te guiará para crear el proyecto en Supabase y vincular las credenciales automáticamente.

Paso 2 — Crea la Edge Function para apiCEP

Una vez conectado Supabase, pídele a Lovable que cree la Edge Function:

Crea una Supabase Edge Function llamada \"validate-spei\" que reciba un JSON con imageUrl y beneficiary (clabe, bank, name), haga un POST a https://api.apicep.cloud/validate-transfer con esos datos y el header Authorization Bearer con el API key de apiCEP (guardado como secret), y devuelva la respuesta de apiCEP al frontend.

Lovable generará el código de la Edge Function automáticamente. Se verá así:

// supabase/functions/validate-spei/index.ts
import { serve } from \"https://deno.land/std@0.168.0/http/server.ts\"

serve(async (req) => {
  const { imageUrl, beneficiary } = await req.json()

  const response = await fetch(\"https://api.apicep.cloud/validate-transfer\", {
    method: \"POST\",
    headers: {
      \"Authorization\": `Bearer ${Deno.env.get(\"APICEP_API_KEY\")}`,
      \"Content-Type\": \"application/json\"
    },
    body: JSON.stringify({ imageUrl, beneficiary })
  })

  const result = await response.json()

  return new Response(JSON.stringify(result), {
    headers: { \"Content-Type\": \"application/json\" }
  })
})

Paso 3 — Agrega el API key como secret en Supabase

Lovable NO puede guardar secrets por ti — ese paso lo haces tú directamente en el dashboard de Supabase:

Ve a tu proyecto en supabase.com
Entra a Edge Functions → Secrets
Agrega un nuevo secret con:
- Nombre: APICEP_API_KEY
- Valor: tu API key de apicep.cloud
Haz redeploy de la función

Después dile a Lovable:

Elimina cualquier referencia al API key de apiCEP del código del frontend. El key ya está guardado como secret en Supabase.

Paso 4 — Conecta el flujo en tu UI de Lovable

Ahora dile a Lovable cómo quieres que se use la validación en tu app. Ejemplo:

En el formulario de confirmación de pago, cuando el usuario suba o pegue la URL de su comprobante SPEI, llama a la Edge Function \"validate-spei\" con la URL del comprobante y los datos de nuestra cuenta beneficiaria. Si la respuesta tiene status \"valid\" y banxicoConfirmed es true, muestra una confirmación verde. Si no, muestra un mensaje de error indicando que el comprobante no pudo ser validado.

Lovable generará el código React para llamar tu Edge Function y manejar los estados de respuesta.

Cómo se ve la respuesta que recibirá tu app

Cuando la Edge Function llama a apiCEP, la respuesta que llega a tu frontend tiene esta estructura:

{
  \"status\": \"valid\",
  \"confidence\": 0.97,
  \"extracted\": {
    \"amount\": 500.00,
    \"senderName\": \"Juan Pérez García\",
    \"beneficiaryName\": \"Tu Empresa\",
    \"date\": \"2026-04-28\"
  },
  \"validation\": {
    \"banxicoConfirmed\": true
  },
  \"downloads\": {
    \"cepXml\": \"https://api.apicep.cloud/files/cep-xxx.xml\",
    \"cepPdf\": \"https://api.apicep.cloud/files/cep-xxx.pdf\"
  }
}

Con eso, tu app de Lovable puede:

Mostrar confirmación automática si status === \"valid\"
Guardar el resultado en Supabase para auditoría
Desbloquear acceso, enviar producto o confirmar reservación
Mostrar el link del CEP oficial al usuario como comprobante

Casos de uso que puedes construir en Lovable + apiCEP

App de membresías o accesos: el usuario paga por SPEI, sube el comprobante y la app valida y activa su cuenta automáticamente.
Plataforma de reservaciones: el cliente confirma su reserva subiendo el comprobante; la app valida en tiempo real antes de bloquear el lugar.
Dashboard de cobranza: tu equipo sube los comprobantes que recibe por WhatsApp y la app los valida en lote sin acceder a Banxico manualmente.
E-commerce informal: la tienda que construiste en Lovable ahora puede verificar pagos SPEI igual que una tienda con pasarela de pagos.
Sistema de gestión escolar: los padres suben el comprobante de la colegiatura y el sistema actualiza el estado del alumno automáticamente.

Puntos importantes para tu integración

Un HTTP 200 no garantiza que el pago sea válido — siempre revisa status y validation.banxicoConfirmed en la respuesta antes de confirmar nada. [page:0]
Las URLs del CEP expiran a los 15 días — si quieres conservar el respaldo oficial, descárgalo y guárdalo en Supabase Storage cuando llegue la respuesta. [page:0]
Para uso masivo, respeta un throttling de 10 segundos entre solicitudes para evitar timeouts en Banxico. [page:0]
La imagen del comprobante debe ser accesible públicamente por HTTPS al momento de la llamada. Si el usuario la sube directamente en tu app de Lovable, guárdala primero en Supabase Storage y usa la URL pública resultante.

Documentación completa

Todos los campos de request y response, los 82 bancos soportados, los códigos de error y los ejemplos de integración están en apicep.cloud/documentacion.

Planes sin contratos

| Plan | Precio | Validaciones | Vigencia |
|---|---|---|---|
| Bienvenida | Gratis | 50 | 30 días |
| Básico | $100 MXN | 200 | 30 días |
| Premium | $200 MXN | 800 | 30 días |
| Business | $400 MXN | 1,600 | 30 días |

Crea tu cuenta gratuita en apicep.cloud y conecta la validación SPEI a tu proyecto de Lovable hoy.