Modos de checkout

O checkout abre num de dois modos.

Pane é um painel integrado apresentado dentro da sua página. No computador, desliza da direita, limitado a pane.width; em dispositivos móveis, desliza de baixo para cima. O visitante mantém-se no seu site e o painel fecha quando prime Escape ou clica na área esbatida.

Popup é uma janela de navegador separada, centrada no ecrã do visitante. O cliente monitoriza o fecho da janela para poder remover o fundo.

O checkout integrado requer uma origem fidedigna

O modo pane apresenta o checkout da Entase num iframe no seu domínio, pelo que só é permitido para domínios que tenha autorizado explicitamente. Adicione todos os domínios que abrem o checkout a Origens fidedignas em Definições → Integrações – consulte Integrações e personalização do checkout.

A inclusão do prefixo www. é importante. Se não tiver a certeza de qual a forma servida pelo seu site, adicione ambas.

Se o seu domínio não estiver na lista, o checkout continua a funcionar – abre simplesmente como uma janela pop-up.

Como 'auto' é determinado

Com a predefinição checkoutMode: 'auto', o cliente decide por esta ordem:

1. Sem HTTPS → pop-up. O checkout integrado nunca é usado numa página não segura.
2. localhost ou 127.0.0.1 → pane, com um aviso registado na consola. Esta é uma conveniência de desenvolvimento para que possa criar com base no esquema integrado; não indica 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 pane, o modo passa a ser pane.

Até receber essa resposta, o modo é popup. Este é o comportamento que mais provavelmente o surpreenderá: a verificação é assíncrona, pelo que uma chamada a book() efetuada imediatamente ao carregar a página – antes de o visitante ter tido oportunidade de clicar em algo – pode ainda abrir uma janela pop-up num domínio perfeitamente configurado. Na prática, um clique real ocorre sempre muito depois de a verificação estar concluída. Se abrir o checkout automaticamente, force o modo em vez de depender da deteção.

Forçar um modo

Defina checkoutMode explicitamente para ignorar totalmente a deteçã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' num domínio que não é uma origem fidedigna não concede permissão – o painel abre, mas o checkout no seu interior não consegue comunicar com a sua página. Use 'popup' como uma escolha deliberada e mantenha 'auto' quando quiser o checkout integrado onde 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() devolve o modo determinado, pelo que indica o que irá realmente acontecer. Voltar a definir o modo como 'auto' executa novamente a deteção.

Bloqueadores de pop-ups

Os navegadores só permitem window.open() durante uma ação do utilizador. Chame book() diretamente dentro de um manipulador de clique – não após um await, um fetch ou um setTimeout, momento em que 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: obtenha primeiro o id, abra no clique.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

Isto afeta apenas o modo pop-up. O modo pane cria um elemento na página e não está sujeito a esta restrição.