Modos de checkout

O checkout é aberto em um de dois modos.

Painel é um painel integrado renderizado dentro da sua página. No desktop, ele desliza da direita, limitado a pane.width; no celular, ele desliza de baixo para cima. O visitante permanece no seu site, e o painel é fechado quando ele pressiona Escape ou clica na área esmaecida.

Pop-up é uma janela separada do navegador, centralizada na tela do visitante. O cliente monitora o fechamento da janela para poder remover o fundo.

O checkout integrado requer uma origem confiável

O modo Painel renderiza o checkout da Entase em um iframe no seu domínio, portanto ele só é permitido em domínios que você autorizou explicitamente. Adicione todos os domínios que abrem o checkout em Origens confiáveis em Configurações → Integrações – consulte Integrações e personalização do checkout.

A inclusão do prefixo www. faz diferença. Se você não tiver certeza de qual forma o seu site usa, adicione ambas.

Se o seu domínio não estiver na lista, o checkout continuará funcionando – ele simplesmente será aberto como uma janela pop-up.

Como 'auto' é resolvido

Com o padrão checkoutMode: 'auto', o cliente decide nesta ordem:

1. Sem HTTPS → pop-up. O checkout integrado nunca é usado em uma página insegura.
2. localhost ou 127.0.0.1 → painel, com um aviso registrado no console. Isso é uma conveniência para desenvolvimento, para que você possa criar usando o layout integrado; não diz nada sobre se o seu domínio de produção é permitido.
3. Caso contrário → o cliente pergunta à Entase se esta origem pode usar o checkout integrado, enviando pk para identificar a conta. Se a resposta incluir painel, o modo passa a ser painel.

Até que essa resposta chegue, o modo é pop-up. Esse é o comportamento que mais provavelmente vai surpreender você: a verificação é assíncrona, portanto uma chamada book() acionada imediatamente no carregamento da página – antes que o visitante tenha tido a chance de clicar em qualquer coisa – ainda pode abrir um pop-up em um domínio perfeitamente configurado. Na prática, um clique real sempre ocorre muito depois que a verificação é concluída. Se você abrir o checkout automaticamente, force o modo em vez de depender da detecção.

Forçar um modo

Defina checkoutMode explicitamente para ignorar totalmente a detecção:

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

Ou substitua-o para uma única reserva:

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

Forçar 'pane' em um domínio que não é uma origem confiável não concede permissão – o painel é aberto, mas o checkout dentro dele não consegue se comunicar com a sua página. Use 'popup' como uma escolha deliberada e mantenha 'auto' quando quiser o checkout integrado onde ele for permitido.

Um valor não reconhecido é ignorado e tratado como 'auto'.

Ler e alterar o modo em tempo de execução

entase.getCheckoutMode();        // 'pane' ou 'popup' – nunca 'auto'
entase.setCheckoutMode('popup'); // aplica-se a todas as chamadas book() posteriores

getCheckoutMode() retorna o modo resolvido, portanto informa o que realmente acontecerá. Definir o modo novamente como 'auto' executa a detecção de novo.

Bloqueadores de pop-up

Os navegadores só permitem window.open() durante uma ação do usuário. Chame book() diretamente dentro de um manipulador de clique – não após um await, um fetch ou um setTimeout, quando a ação já expirou e o pop-up é bloqueado.

// Bloqueado: a ação já terminou quando book() é executado.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Correto: resolva o id primeiro, abra no clique.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

Isso afeta apenas o modo pop-up. O modo Painel cria um elemento na página e não está sujeito a isso.