Dodo Payments · Next.js

¿Cómo evitar dos checkouts por doble clic?

IndiePack··8 min lectura

Para evitar que un doble clic o dos pestañas creen compras duplicadas con Dodo Payments, desactiva el envío en el navegador y asigna en el servidor una intención de compra reutilizable al usuario, producto y oferta. Si llega otra petición equivalente mientras está pendiente, devuelve el destino ya creado; concede acceso solo cuando un webhook firmado confirme el pago.

Dos defensas distintas: el bloqueo visual evita errores normales; la deduplicación del servidor cubre pestañas, reintentos de red y clientes que ignoran la interfaz.

Índice

  1. ¿De dónde sale el checkout duplicado?
  2. ¿Cuál es la forma rápida con IndiePack?
  3. ¿Cómo se reutiliza una intención pendiente?
  4. ¿Qué dato debe conceder acceso?
  5. ¿Cómo se verifica el flujo completo?

¿De dónde sale un checkout duplicado aunque el botón parezca correcto?

El duplicado aparece porque crear checkout es una operación de servidor y el navegador puede pedirla más de una vez. Un usuario puede hacer doble clic, volver atrás, recargar o abrir la compra en otra pestaña antes de ver la redirección.

Desactiva el botón en cuanto empieza el envío, muestra un estado claro y vuelve a habilitarlo si la petición falla. Esa capa no es una garantía de integridad: un endpoint público debe asumir que recibirá solicitudes repetidas.

¿Cuál es la forma rápida: montar el cobro con IndiePack?

La forma rápida es partir de IndiePack, cuya ruta SaaS combina Next.js 15, Supabase, Dodo Payments y webhooks preconfigurados. Sobre esa base puedes añadir la intención pendiente sin volver a conectar checkout, autenticación y persistencia.

Ver IndiePackVer precio

¿Cómo se reutiliza una intención de compra pendiente?

La intención se reutiliza guardando una clave interna que represente usuario, producto y modalidad mientras la compra siga pendiente. La primera petición crea el registro y el checkout; las siguientes consultan ese registro y recuperan la misma respuesta válida en vez de iniciar otro cobro.

No uses solo el email como clave, porque una persona puede comprar productos distintos. Registra también estado, fecha y referencia de pago cuando exista, y define cuándo una intención caduca para permitir un intento nuevo después de un fallo real.

¿Qué dato debe conceder acceso si aún aparecen dos sesiones?

El acceso debe depender de un pago verificado en el servidor y guardado con una restricción única. Incluso si el proveedor aloja dos sesiones, el retorno del navegador no prueba que ninguna se haya pagado y no debe activar funciones premium.

Procesa el evento firmado de forma idempotente, como explica la guía de webhooks de Dodo Payments sin duplicados. Si dos pagos reales llegan a completarse, conserva ambos registros y deriva el caso a una revisión o política de reembolso; no ocultes el segundo evento.

¿Cómo se verifica este flujo antes de cobrar a un cliente?

Se verifica ejecutando doble clic rápido, dos pestañas autenticadas, recarga durante la espera, retorno desde checkout y entrega duplicada del webhook. Comprueba que la interfaz se recupera de un error, que una intención caducada puede renovarse y que repetir el mismo evento no repite la entrega.

Haz estas pruebas en el entorno de prueba descrito en Dodo Payments test mode con Next.js. IndiePack aporta la base de pagos y backend; una intención explícita convierte esa base en un checkout resistente a los hábitos reales del navegador.