# Открытие checkout

> Метод book() открывает checkout для одного события и принимает переопределения для отдельных вызовов, а также контекст клиента, который можно передавать в собственные системы.

`book()` — это метод, открывающий checkout. Всё остальное в клиенте настраивает его или отслеживает его работу.

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

`eventID` — идентификатор запланированного события, билеты на которое нужно продавать. Это тот же идентификатор, который используется в кодах публикации и встраивания вашего события.

Вызов возвращает управление сразу – он открывает панель или окно и не ждёт, пока посетитель завершит оформление. Используйте [события](/developers/js-client/events.md), чтобы реагировать на дальнейшие действия.

## Параметры

| Название | Тип | По умолчанию | Описание |
|---|---|---|---|
| `checkoutMode` | string | значение экземпляра | `'pane'` или `'popup'` только для этого бронирования. |
| `clientContext` | object | `null` | Произвольные данные, передаваемые в checkout, когда он будет готов. См. ниже. |
| `collectConsent` | boolean | значение экземпляра | Нужно ли просить посетителя принять уведомление об условиях. |
| `backdrop` | boolean | значение экземпляра | Нужно ли затемнять страницу за checkout. |
| `backdropColor` | string | значение экземпляра | Цвет затемнённой области. |
| `pane` | object | значение экземпляра | `{ width, height }` для встроенной панели. |
| `popup` | object | значение экземпляра | `{ width, height }` для всплывающего окна. |

Для всех неуказанных параметров используются значения, с которыми был создан экземпляр, поэтому параметры отдельных вызовов дополняют, а не заменяют набор параметров.

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

## Контекст клиента

`clientContext` — это объект с определяемой вами структурой. Клиент хранит его, пока checkout не сообщит, что готов, а затем передаёт его. Используйте его для передачи в сессию checkout информации, известной только вашей странице: какая кнопка была нажата, из какой кампании пришёл посетитель, внутренняя ссылка на клиента.

Контекст хранится отдельно для каждого идентификатора события, поэтому при бронировании двух разных событий с одной страницы их контексты остаются раздельными.

Не помещайте в него конфиденциальные данные. Он передаётся в checkout через браузер и виден всем, кто проверяет страницу.

## Открытие нескольких событий с одной страницы

Один экземпляр обрабатывает любое количество событий. Создайте его один раз и каждый раз передавайте другой идентификатор:

```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 }
    });
  });
});
```

## После удаления клиента

Вызов `book()` у экземпляра, который вы уже удалили, записывает ошибку в консоль и ничего не открывает. Это сделано намеренно – удалённый экземпляр больше не прослушивает сообщения от checkout, поэтому открытое им окно нельзя было бы закрыть или отслеживать. Вместо этого создайте новый экземпляр.

## Закрытие checkout

Посетитель закрывает checkout самостоятельно: клавишей Escape или щелчком по затемнённой области в режиме панели, либо с помощью элементов управления окном в режиме всплывающего окна. Checkout также закрывается сам после завершения бронирования.

Публичного метода для его закрытия из вашего кода нет. Если вам нужно знать, когда он закрылся, прослушивайте событие `checkout.closed`.