# Modos de checkout

> Como o cliente escolhe entre o painel integrado e uma janela pop-up, porque as origens fidedignas determinam essa escolha e o que esperar durante o desenvolvimento local.

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](/organizers/settings/integrations-and-checkout-customization.md).

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:

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

Ou substitua-o para uma única reserva:

```js
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

```js
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.

```js
// 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.