# Режимы оформления заказа

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

Оформление заказа открывается в одном из двух режимов.

**Pane** — это встроенная панель, отображаемая внутри вашей страницы. На компьютере она выдвигается справа и ограничена значением `pane.width`; на мобильном устройстве она выдвигается снизу. Посетитель остаётся на вашем сайте, а панель закрывается, когда он нажимает Escape или щёлкает по затемнённой области.

**Popup** — это отдельное окно браузера, расположенное по центру экрана посетителя. Клиент отслеживает закрытие окна, чтобы убрать фон.

## Для встроенного оформления заказа требуется доверенный источник

В режиме панели оформление заказа Entase отображается в iframe на вашем домене, поэтому оно разрешено только для доменов, которые вы явно авторизовали. Добавьте каждый домен, с которого открывается оформление заказа, в **Доверенные источники** в разделе Настройки → Интеграции — см. [Интеграции и настройка оформления заказа](/organizers/settings/integrations-and-checkout-customization.md).

Важно, указан ли префикс `www.`. Если вы не уверены, какой вариант использует ваш сайт, добавьте оба.

Если вашего домена нет в списке, оформление заказа всё равно работает — оно просто открывается во всплывающем окне.

## Как определяется `'auto'`

При значении по умолчанию `checkoutMode: 'auto'` клиент принимает решение в следующем порядке:

1. **Не HTTPS** → всплывающее окно. На небезопасной странице встроенное оформление заказа никогда не используется.
2. **`localhost` или `127.0.0.1`** → панель с предупреждением, записанным в консоль. Это удобство для разработки, позволяющее создавать интерфейс со встроенной компоновкой; оно ничего не говорит о том, разрешён ли ваш рабочий домен.
3. **Во всех остальных случаях** → клиент запрашивает у Entase, может ли этот источник использовать встроенное оформление заказа, передавая `pk` для идентификации аккаунта. Если ответ включает панель, устанавливается режим панели.

Пока этот ответ не получен, используется режим **popup**. Именно это поведение чаще всего вызывает удивление: проверка выполняется асинхронно, поэтому вызов `book()`, сделанный сразу при загрузке страницы — до того, как посетитель успеет что-либо нажать, — всё ещё может открыть всплывающее окно даже на полностью правильно настроенном домене. На практике настоящее нажатие всегда происходит значительно позже завершения проверки. Если вы открываете оформление заказа автоматически, задайте режим принудительно, а не полагайтесь на определение.

## Принудительная установка режима

Явно задайте `checkoutMode`, чтобы полностью пропустить определение:

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

Или переопределите его для одного бронирования:

```js
entase.book('EVENT_ID', { checkoutMode: 'popup' });
```

Принудительная установка `'pane'` на домене, который не является доверенным источником, не даёт разрешения — панель открывается, но оформление заказа внутри неё не может взаимодействовать с вашей страницей. Используйте `'popup'` как осознанный выбор и оставляйте `'auto'`, когда хотите использовать встроенное оформление заказа везде, где это разрешено.

Нераспознанное значение игнорируется и обрабатывается как `'auto'`.

## Просмотр и изменение режима во время выполнения

```js
entase.getCheckoutMode();        // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() call
```

`getCheckoutMode()` возвращает *определённый* режим, поэтому показывает, что действительно произойдёт. При возврате режима к `'auto'` определение запускается заново.

## Блокировщики всплывающих окон

Браузеры разрешают `window.open()` только во время действия пользователя. Вызывайте `book()` непосредственно внутри обработчика клика — не после `await`, `fetch` или `setTimeout`, когда действие уже завершилось и всплывающее окно будет заблокировано.

```js
// Blocked: the gesture is gone by the time book() runs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fine: resolve the id first, open on the click.
button.addEventListener('click', () => entase.book(button.dataset.eventId));
```

Это относится только к режиму всплывающего окна. В режиме панели создаётся элемент на странице, и это ограничение на него не распространяется.