Русский ru
Разработчики Блог
Поиск
Разработчики
JavaScript-клиент

Открытие checkout

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

Посмотреть как Markdown

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

JavaScript
entase.book(eventID);
entase.book(eventID, options);

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

Вызов возвращает управление сразу – он открывает панель или окно и не ждёт, пока посетитель завершит оформление. Используйте события, чтобы реагировать на дальнейшие действия.

Параметры

НазваниеТипПо умолчаниюОписание
checkoutModestringзначение экземпляра'pane' или 'popup' только для этого бронирования.
clientContextobjectnullПроизвольные данные, передаваемые в checkout, когда он будет готов. См. ниже.
collectConsentbooleanзначение экземпляраНужно ли просить посетителя принять уведомление об условиях.
backdropbooleanзначение экземпляраНужно ли затемнять страницу за checkout.
backdropColorstringзначение экземпляраЦвет затемнённой области.
paneobjectзначение экземпляра{ width, height } для встроенной панели.
popupobjectзначение экземпляра{ width, height } для всплывающего окна.

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

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

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

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

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

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

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

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

JavaScript
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.