Modos de checkout

El checkout se abre en uno de dos modos.

Panel es un panel integrado que se muestra dentro de tu página. En ordenadores se desliza desde la derecha, con un ancho máximo de pane.width; en móviles se desliza desde la parte inferior. El visitante permanece en tu sitio y el panel se cierra al pulsar Escape o hacer clic en el área atenuada.

Ventana emergente es una ventana independiente del navegador, centrada en la pantalla del visitante. El cliente detecta cuándo se cierra la ventana para poder quitar el fondo.

El checkout integrado requiere un origen de confianza

El modo de panel muestra el checkout de Entase en un iframe de tu dominio, por lo que solo se permite en dominios que hayas autorizado explícitamente. Añade todos los dominios que abren el checkout a Orígenes de confianza en Configuración → Integraciones – consulta Integraciones y personalización del checkout.

Es importante si se incluye el prefijo www.. Si no estás seguro de qué forma utiliza tu sitio, añade ambas.

Si tu dominio no está en la lista, el checkout seguirá funcionando – simplemente se abrirá como una ventana emergente.

Cómo se resuelve 'auto'

Con el valor predeterminado checkoutMode: 'auto', el cliente decide en este orden:

1. Sin HTTPS → ventana emergente. El checkout integrado nunca se usa en una página no segura.
2. localhost o 127.0.0.1 → panel, con una advertencia registrada en la consola. Es una facilidad para el desarrollo que permite crear usando el diseño integrado; no indica si tu dominio de producción está permitido.
3. En cualquier otro caso → el cliente pregunta a Entase si este origen puede usar el checkout integrado y envía pk para identificar la cuenta. Si la respuesta incluye panel, el modo pasa a ser panel.

Hasta que llegue esa respuesta, el modo es ventana emergente. Este es el comportamiento que probablemente más te sorprenda: la comprobación es asíncrona, por lo que una llamada a book() ejecutada inmediatamente al cargar la página – antes de que el visitante haya tenido ocasión de hacer clic en algo – puede seguir abriendo una ventana emergente en un dominio perfectamente configurado. En la práctica, un clic real siempre se produce mucho después de que se haya completado la comprobación. Si abres el checkout automáticamente, fuerza el modo en lugar de confiar en la detección.

Forzar un modo

Establece checkoutMode explícitamente para omitir por completo la detección:

const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY', checkoutMode: 'popup' });

O anúlalo para una sola reserva:

entase.book('EVENT_ID', { checkoutMode: 'popup' });

Forzar 'pane' en un dominio que no es un origen de confianza no concede permiso – el panel se abre, pero el checkout dentro de él no puede comunicarse con tu página. Usa 'popup' como una elección deliberada y deja 'auto' cuando quieras el checkout integrado donde esté permitido.

Un valor no reconocido se ignora y se trata como 'auto'.

Consultar y cambiar el modo en tiempo de ejecución

entase.getCheckoutMode();        // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() call

getCheckoutMode() devuelve el modo resuelto, por lo que informa de lo que ocurrirá realmente. Volver a establecer el modo en 'auto' ejecuta de nuevo la detección.

Bloqueadores de ventanas emergentes

Los navegadores solo permiten window.open() durante una interacción del usuario. Llama a book() directamente dentro de un controlador de clic – no después de un await, un fetch o un setTimeout, momento en el que la interacción ha caducado y se bloquea la ventana emergente.

// Blocked: the gesture is gone by the time book() runs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fine: resolve the id first, open on the click.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

Esto afecta solo al modo de ventana emergente. El modo de panel crea un elemento en la página y no está sujeto a esta restricción.