# Abrir o checkout

> O método book() abre o checkout de um evento e aceita substituições por chamada, além de um contexto do cliente que você pode levar para seus próprios sistemas.

`book()` é o método que abre o checkout. Todo o resto no cliente o configura ou o monitora.

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

`eventID` é o identificador do evento agendado a ser vendido. É o mesmo ID usado nos códigos de compartilhamento e incorporação do seu evento.

A chamada retorna imediatamente – ela abre o painel ou a janela e não espera o visitante concluir. Use [eventos](/developers/js-client/events.md) para reagir ao que acontece em seguida.

## Opções

| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| `checkoutMode` | string | valor da instância | `'pane'` ou `'popup'` apenas para esta reserva. |
| `clientContext` | objeto | `null` | Dados arbitrários entregues ao checkout quando ele estiver pronto. Veja abaixo. |
| `collectConsent` | booleano | valor da instância | Se deve solicitar que o visitante aceite o aviso de termos. |
| `backdrop` | booleano | 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` | objeto | valor da instância | `{ width, height }` para o painel integrado. |
| `popup` | objeto | valor da instância | `{ width, height }` para a janela pop-up. |

Tudo o que você omitir usa como padrão o valor com que a instância foi criada; portanto, as opções por chamada são adicionais, e não 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 você. O cliente o mantém até que o checkout sinalize que está pronto e, então, o entrega. Use-o para transportar informações que apenas sua página conhece – qual botão foi clicado, por qual campanha um visitante chegou, uma referência interna do cliente – para a sessão de checkout.

O contexto é armazenado por ID de evento; assim, reservar dois eventos diferentes na mesma página mantém seus contextos separados.

Não inclua nada sensível nele. Ele é enviado ao checkout pelo navegador e fica visível para qualquer pessoa que inspecione a página.

## Abrir vários eventos em uma página

Uma instância gerencia qualquer número de eventos. Crie-a uma vez e passe um ID diferente a 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 que o cliente é destruído

Chamar `book()` em uma instância que você já destruiu registra um erro no console e não abre nada. Isso é intencional – uma instância destruída não escuta mais mensagens do checkout; portanto, a janela que ela abriu não poderia ser fechada nem monitorada. Em vez disso, crie uma nova instância.

## Fechar o checkout

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

Não há um método público para fechá-lo pelo seu código. Se precisar saber quando ele foi fechado, escute o evento `checkout.closed`.