Skip to Content
CheckoutResumen

Checkout — Resumen

El checkout alojado es la página donde el comprador efectivamente envía fondos. No renderizas el selector de activos, la dirección de depósito o el QR tú mismo: el SDK abre nuestra página (en https://checkout.infraio.xyz/<session_key>) y nosotros gestionamos la UI.

Tres modos

Popup superpuesto centrado, ~560×780 por defecto. La tienda se queda en su sitio. onSuccess se dispara cuando el popup se cierra tras el pago. Modo por defecto.

Popup

Navegación dura al checkout. Mejor para navegadores con popups bloqueados o web móvil donde los overlays se sienten chocantes. El comprador regresa vía tu success_url / cancel_url de la sesión.

Redirect

iframe dentro de tu página. Mejor cuando controlas el layout de principio a fin y quieres cero cambio de contexto. Se autodimensiona vía postMessage.

Embed

Heurística para elegir modo

Si…Usa
Web de escritorio, e-commerce por defectoPopup
Web móvilRedirect (popups + móvil = tristeza)
Panel admin con CSP estrictamente bloqueadoRedirect
Webview in-app / checkout nativo en una páginaEmbed
Quieres un flujo de comprador totalmente personalizado con header white-labelEmbed + hideHeader + tu propio wallet connect

Lo que ve el comprador

Independientemente del modo, la página muestra:

  1. Resumen de la orden (line items, total, moneda). Ocúltalo con hideSummary si ya lo has mostrado en tu lado.
  2. Selector de activos: lista de combinaciones cadena × activo que has habilitado en la configuración del comerciante. El comprador elige una.
  3. Dirección de depósito + QR + importe para la combinación elegida. El comprador escanea, conecta una wallet (botón WalletConnect), o paga desde una wallet preconectada que proporcionaste vía SDK.
  4. Pulso de estado: “Esperando transferencia”, “Tx detectada (3/12 confirmaciones)”, “Pagado”.
  5. Botón Cancelar (siempre presente) → dispara onCancel.

Personalización de la página

KnobCómoLímites
Ocultar resumen de ordenhideSummary: true en el SDKEl comprador aún puede ver el total en el panel de depósito
Ocultar header de InfraIOhideHeader: true en el SDKCombina con walletAddress para white-label total
Pre-conectar una walletwalletAddress + walletChainId + onSignRequestSalta el modal de WalletConnect
Configuración regionallocale en el SDK — uno de en, vi, ja, ko, es, pt-BR, ru, tr, zh-CN, zh-TWLocaliza la página de checkout y las páginas de reembolso (y el modal de conexión de wallet). Desconocido u omitido → recurre a en
Logo, color de marcaDashboard del comerciante → BrandingSe aplica globalmente, no por sesión

Comportamiento de URL de retorno

Para el modo redirect el comprador siempre regresa a uno de:

  • success_url de la sesión (en pago liquidado)
  • cancel_url de la sesión (en cancelar/abandonar)
  • Si no los configuraste, el SDK cae a la página que abrió el checkout, con ?session_id=…&status=success|cancel añadido

Para los modos popup y embed no hay navegación: el control vuelve a tu página vía onSuccess / onCancel. Úsalos para decidir qué UI mostrar después.

CSP e incrustación

Si usas el modo embed, tu CSP debe permitir nuestro origin en frame-src:

Content-Security-Policy:
  frame-src https://checkout.infraio.xyz https://checkout-dev.infraio.xyz;

El iframe lleva la política de permisos allow="payment; clipboard-write": puede invocar la Payment Request API y escribir en el portapapeles, nada más. No está sandboxeado en HTML: la página de checkout es una app completa de conexión de wallets cuya seguridad de postMessage (verificaciones de origin en ambos lados) y cuyos SDKs de wallet de terceros (WalletConnect, Coinbase, MetaMask) requieren un contexto de scripting real del mismo origin, así que un atributo sandbox de HTML rompería el wallet connect a cambio de una ganancia de aislamiento insignificante. El aislamiento viene, en cambio, del límite cross-origin, las verificaciones estrictas de origin en postMessage, y tu CSP de frame-src.

Consideraciones móviles

Los popups se bloquean agresivamente en Safari móvil. Si tu tráfico es mayoritariamente móvil, usa mode: "redirect" por defecto. El overlay del popup también cubre el área del teclado en pantallas pequeñas: bien para introducir el importe, incómodo para elegir activo.

Branding (para el público de white-label)

White-label completo requiere:

  1. hideHeader: true en el SDK
  2. walletAddress preconectada (el comprador no ve WalletConnect)
  3. Tu logo + color de marca configurados en el branding del dashboard del comerciante
  4. (Opcional) Dominio personalizado para la página de checkout: pay.your-shop.com en lugar de checkout.infraio.xyz. Self-serve vía dashboard una vez que tu CNAME esté verificado.

Qué sigue

Cadenas y activosResumen