Montar iframe

Con el userToken obtenido, ya puedes montar el marketplace de PASS Beneficios en tu plataforma.

URL del iframe

{BASE_URL}?hostId={HOST_ID}&userToken={USER_TOKEN}&origin={ENCODED_ORIGIN}

Parámetro	Descripción
hostId	Tu identificador de host
userToken	Token obtenido del endpoint authorize-user
origin	URL de tu sitio codificada con encodeURIComponent()

Nota

El parámetro origin es necesario para establecer la comunicación segura entre tu sitio y el iframe.

Ejemplo HTML

index.html

<iframe
  id="pass-beneficios-iframe"
  src="https://hola.passbeneficios.com?hostId=TU_HOST_ID&userToken=TOKEN_OBTENIDO&origin=https%3A%2F%2Ftu-sitio.com"
  style="width: 100%; height: 100vh; border: none; overflow: hidden;"
  allow="clipboard-read; clipboard-write;"
></iframe>

Ejemplo con React

PassBeneficios.tsx

const PassBeneficios = ({ userToken }: { userToken: string }) => {
  const HOST_ID = process.env.REACT_APP_CM_HOST_ID;
  const BASE_URL = "https://hola.passbeneficios.com";

  return (
    <iframe
      id="pass-beneficios-iframe"
      style={{
        flex: 1,
        width: "100%",
        height: "100vh",
        border: "none",
        overflow: "hidden",
      }}
      allow="clipboard-read; clipboard-write;"
      src={`${BASE_URL}?hostId=${HOST_ID}&userToken=${userToken}&origin=${encodeURIComponent(window.origin)}`}
    />
  );
};

Atributos importantes del iframe

Atributo	Valor	Razón
allow	clipboard-read; clipboard-write;	Permite copiar folios y datos de pago al portapapeles
style.border	none	Elimina el borde por defecto del iframe
style.overflow	hidden	Evita scrollbars duplicados

Sesión expirada

Cuando la sesión del usuario expira en PASS Beneficios (después de 1 hora), el iframe enviará un evento postMessage a tu aplicación:

session-handler.js

window.addEventListener("message", (event) => {
  if (event.data.type === "clean-user-host-session") {
    // La sesión expiró.
    // Opción 1: Volver a llamar authorize-user y recargar el iframe
    // Opción 2: Redirigir al usuario a la página de inicio
  }
});

Importante

Valida siempre el origin del evento para evitar procesar mensajes de fuentes no confiables:

origin-check.js

if (event.origin !== "https://hola.passbeneficios.com") return;

Headers CORS de tu servidor

Si tu aplicación usa un servidor web como nginx, agrega los headers necesarios para permitir la comunicación con el iframe:

nginx.conf

server {
    listen 8080;
    server_name tu-sitio.com;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;

        # Permitir comunicación con PASS Beneficios
        add_header Access-Control-Allow-Origin "https://hola.passbeneficios.com";
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
    }
}

Checklist de integración

• userToken obtenido correctamente del endpoint authorize-user
• iframe monta con los 3 parámetros (hostId, userToken, origin)
• allow="clipboard-read; clipboard-write;" habilitado
• Listener de postMessage implementado para sesión expirada
• Headers CORS configurados en tu servidor
• Probado en ambiente de desarrollo antes de producción