# Abrir o checkout

> O método book() abre o checkout para um evento e aceita substituições por chamada, bem como um contexto do cliente que pode transmitir aos seus próprios sistemas.

`book()` é o método que abre o checkout. Tudo o resto no cliente configura-o ou observa-o.

```js
entase.book(eventID);
entase.book(eventID, options);
```

`eventID` é o identificador do evento agendado para venda. É o mesmo ID utilizado nos códigos de partilha e incorporação do seu evento.

A chamada é devolvida imediatamente – abre o painel ou a janela e não espera que o visitante termine. Utilize os [eventos](/developers/js-client/events.md) para reagir ao que acontece a seguir.

## Opções

| Nome | Tipo | Predefinição | Descrição |
|---|---|---|---|
| `checkoutMode` | string | valor da instância | `'pane'` ou `'popup'` apenas para esta reserva. |
| `clientContext` | object | `null` | Dados arbitrários entregues ao checkout quando este estiver pronto. Veja abaixo. |
| `collectConsent` | boolean | valor da instância | Se deve pedir ao visitante para aceitar o aviso dos termos. |
| `backdrop` | boolean | valor da instância | Se deve escurecer a página por trás do checkout. |
| `backdropColor` | string | valor da instância | Cor da área escurecida. |
| `pane` | object | valor da instância | `{ width, height }` para o painel integrado. |
| `popup` | object | valor da instância | `{ width, height }` para a janela pop-up. |

Tudo o que não especificar recorre ao valor com que a instância foi criada, pelo que as opções por chamada são adicionais em vez de constituírem um conjunto de substituição.

```js
entase.book('EVENT_ID', {
  pane: { width: '60vw' },
  backdrop: false,
  clientContext: { source: 'homepage-hero' }
});
```

## Contexto do cliente

`clientContext` é um objeto definido por si. O cliente mantém-no até o checkout indicar que está pronto e, em seguida, entrega-o. Utilize-o para transportar para a sessão de checkout informações que só a sua página conhece – em que botão foi clicado, de que campanha veio um visitante, uma referência interna de cliente.

O contexto é armazenado por ID de evento, pelo que reservar dois eventos diferentes a partir da mesma página mantém os respetivos contextos separados.

Não inclua informações sensíveis. Estas são transmitidas para o checkout através do navegador e ficam visíveis para qualquer pessoa que inspecione a página.

## Abrir vários eventos a partir de uma página

Uma instância processa qualquer número de eventos. Crie-a uma vez e passe um ID diferente de cada vez:

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

document.querySelectorAll('[data-event-id]').forEach(button => {
  button.addEventListener('click', () => {
    entase.book(button.dataset.eventId, {
      clientContext: { source: button.dataset.source }
    });
  });
});
```

## Depois de o cliente ser destruído

Chamar `book()` numa instância que já destruiu regista um erro na consola e não abre nada. Isto é deliberado – uma instância destruída deixa de escutar mensagens do checkout, pelo que a janela que abriu não poderia ser fechada nem observada. Crie uma nova instância em alternativa.

## Fechar o checkout

O próprio visitante fecha o checkout: com Escape ou clicando na área escurecida no modo de painel, ou através dos controlos da janela no modo pop-up. O checkout também se fecha quando uma reserva é concluída.

Não existe um método público para o fechar a partir do seu código. Se precisar de saber quando foi fechado, escute o evento `checkout.closed`.