# Modos de checkout

> Como o cliente escolhe entre o painel integrado e uma janela pop-up, por que as origens confiáveis determinam isso e o que esperar durante o desenvolvimento local.

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

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:

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

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

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