Incrusta el checkout en tu página

Ya tienes un sesionId y un token que tu servidor creó (si no, empieza por Crea una sesión de cobro). Ahora eliges dónde paga el cliente. Las tres formas muestran la misma experiencia; cambia cuánto control tienes sobre la página.

Forma	Código en tu página	Cuándo conviene
A. Página alojada	Una redirección	Quieres salir del paso hoy, o tu tienda es una plataforma cerrada
B. Etiqueta	Un <script> y una etiqueta HTML	Quieres que el pago ocurra dentro de tu página, sin escribir JavaScript propio
C. Modal	Una llamada a FinoraCheckout.abrir	Tu tienda es una aplicación de una sola página y quieres controlar cuándo abre y cierra

A. Página alojada

1. Desde tu servidor, devuelve al navegador la urlPago de la sesión.

2. Redirige al cliente:

   location.href = urlPago;

3. Al terminar, el cliente vuelve a tu returnUrl con ?sesion=…&estado=…. Confirma el estado con tu servidor antes de mostrar «pedido confirmado».

La página alojada vive en pago.finoracore.com, lleva el tema de FINORA y muestra el nombre y el logotipo de tu comercio en la cabecera.

B. Etiqueta

1. Carga el componente una vez en tu página:

   <script src="https://pago.finoracore.com/sdk/finora-checkout.js"></script>

2. Pon la etiqueta donde quieras el pago y dale una altura:

   <finora-checkout
     sesion="CS7Hq2mVx0Ld"
     token="…"
     base-url="<URL_DEL_MERCHANT>"
     idioma="es"
     tema="claro"
     style="height: 40rem"></finora-checkout>

   Los valores de sesion y token los pone tu plantilla con lo que devolvió tu servidor.

3. Escucha el final:

   document.querySelector('finora-checkout').addEventListener('finora-resultado', (e) => {
     // e.detail.estado: APROBADA, RECHAZADA, EN_DUDA, CANCELADA o EXPIRADA
     if (e.detail.estado === 'APROBADA') location.href = '/gracias';
   });

C. Modal

1. Instala el paquete, o carga el mismo <script> de la forma B:

   npm i @finora/checkout

2. Pide la sesión a tu servidor y abre el modal:

   import { FinoraCheckout } from '@finora/checkout';
   
   const { sesionId, token } = await fetch('/api/pagos', { method: 'POST' /* … */ }).then((r) => r.json());
   
   const pago = FinoraCheckout.abrir({
     sesionId,
     token,
     baseUrl: '<URL_DEL_MERCHANT>',
     onResultado: (r) => {
       if (r.estado === 'APROBADA') mostrarGracias();
       pago.cerrar();
     },
     onCancelar: () => volverAlCarrito(),
     onError: (e) => console.error(e.codigo, e.mensaje),
   });

3. Si prefieres que se dibuje dentro de un elemento tuyo en vez de un modal, pasa contenedor: '#pago'.

El modal atrapa el foco, bloquea el desplazamiento de la página y devuelve el foco al cerrar. La tecla Escape cancela solo mientras no haya un cobro en vuelo.

El evento del navegador no entrega pedidos

finora-resultado y onResultado sirven para la experiencia: mostrar «gracias», vaciar el carrito. El pedido se entrega cuando tu servidor recibe y verifica el aviso firmado.

En el teléfono

El componente se adapta al ancho disponible. Por debajo de 760 px el total pasa arriba y los medios quedan en una sola columna. Con pantalla táctil, los campos de cédula, teléfono y clave muestran un teclado numérico propio.

La misma sesión a 390 px de ancho (servidor simulado del SDK).

✕

Si tu sitio tiene una política de seguridad de contenido

El componente no carga fuentes, imágenes ni scripts de terceros: habla solo con la URL que pasas en base-url. Si tu sitio usa CSP, permite esa URL en connect-src y https://pago.finoracore.com en script-src si cargas el <script> desde allí.

Siguiente

• Referencia del componente: todos los atributos, eventos y métodos.
• Ponle los colores de tu marca.