Hosted Payment Page
La Hosted Payment Page (HPP) es un checkout seguro y de marca blanca que usted incrusta en su propio sitio web mediante un iframe. Recopila y tokeniza los datos de tarjeta dentro de un contexto de seguridad aislado, de modo que sus servidores y páginas nunca manejan números de tarjeta sin procesar — manteniéndolo fuera del alcance PCI mientras conserva su marca y su experiencia de usuario.
Su backend crea una sesión de pago de corta duración (autenticada mediante OAuth 2.0); su frontend carga un pequeño SDK y monta el iframe usando el token de sesión devuelto. El cliente paga dentro del iframe, y usted recibe el resultado mediante un callback de JavaScript o una redirección del lado del servidor.
Cómo Funciona
1. Your backend creates a session → POST /api/sessions/create (OAuth) → sessionToken 2. Your frontend loads the SDK → <script src=".../iframe.min.js"> 3. SDK mounts the iframe → Token sent via postMessage (never in the URL) 4. Customer pays inside the iframe → Card tokenized + processed by the gateway 5. Result returned to your page → onSuccess / onError callback (or redirect) 6. Your backend confirms the result → Verify status before fulfilling the order
CaracterÃsticas Clave
| CaracterÃstica | Descripción |
|---|---|
| Reducción del Alcance PCI | Los datos de la tarjeta se ingresan y tokenizan dentro del iframe — sus servidores nunca ven el PAN/CVC sin procesar |
| Marca Blanca | CSS personalizado, logotipo del tenant, color de marca y campos de facturación configurables mantienen el checkout alineado con su marca |
| Sesiones Protegidas con OAuth | Las sesiones se crean del lado del servidor con OAuth 2.0 Client Credentials; el secreto nunca llega al navegador |
| Tokens de Sesión de Corta Duración | Los tokens de sesión JWT expiran en 15 minutos por defecto y se pasan mediante postMessage, nunca en la URL |
| Tarjeta y ACH | Admite pagos con tarjeta y transferencias bancarias ACH (mediante vinculación bancaria con Plaid) |
| 3D Secure | Cuando se devuelve un CHALLENGE, el iframe maneja la redirección al ACS y la re-verificación automáticamente |
| Redimensionamiento Automático | El iframe informa su propia altura (RESIZE_IFRAME) para ajustarse a su diseño sin una altura fija |
Casos de Uso
- Checkout de e-commerce — Incorpore un formulario de pago conforme a la normativa en su flujo de carrito existente sin construir ni alojar campos de tarjeta
- Suscripciones y tarjetas guardadas — Recopile una tarjeta para uso único o recurrente con el aviso opcional de "guardar tarjeta"
- Validación de tarjeta o cuenta — Ejecute una verificación de tarjeta de monto cero o una validación de cuenta bancaria antes de un cargo posterior
- Páginas de pago con su marca — Aplique su propio CSS y su marca para una experiencia de checkout fluida y alineada con su identidad
Mejor en Conjunto
La Hosted Payment Page funciona junto con el Payments Gateway, Payment Link y MagicTerminal para cubrir todos los canales de pago:
| Canal | Solución |
|---|---|
| API / En lÃnea (su propia UI) | Payments Gateway API |
| Checkout embebido (iframe) | Hosted Payment Page |
| Remoto / Móvil | Payment Link |
| Presencial / Tarjeta presente | MagicTerminal |
Usar estos productos en la misma plataforma aumenta las tasas de autorización al compartir la inteligencia de enrutamiento, la prevención de fraude y los datos de transacciones entre canales.
Primeros Pasos
Siga la guÃa de Integración del Iframe para un recorrido paso a paso — crear una sesión, cargar el SDK, montar el iframe y confirmar el resultado en su backend. Contacte a [email protected] para solicitar credenciales de HPP.
