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

> Як клієнт обирає між вбудованою панеллю та спливним вікном, чому це визначають довірені джерела й чого очікувати під час локальної розробки.

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

**Pane** — це вбудована панель, що відображається всередині вашої сторінки. На комп’ютері вона висувається справа, а її ширина обмежена значенням `pane.width`; на мобільному пристрої вона висувається знизу. Відвідувач залишається на вашому сайті, а панель закривається, коли він натискає Escape або клацає затемнену область.

**Popup** — це окреме вікно браузера, розташоване по центру екрана відвідувача. Клієнт відстежує закриття вікна, щоб прибрати фон.

## Для вбудованого оформлення замовлення потрібне довірене джерело

У режимі Pane оформлення замовлення Entase відображається в iframe на вашому домені, тому воно дозволене лише для доменів, які ви явно авторизували. Додайте кожен домен, з якого відкривається оформлення замовлення, до **Довірених джерел** у розділі Налаштування → Інтеграції – див. [Інтеграції та налаштування оформлення замовлення](/organizers/settings/integrations-and-checkout-customization.md).

Важливо, чи включено префікс `www.`. Якщо ви не впевнені, яку форму використовує ваш сайт, додайте обидві.

Якщо вашого домену немає в списку, оформлення замовлення все одно працюватиме – воно просто відкриється у спливному вікні.

## Як визначається `'auto'`

За типового значення `checkoutMode: 'auto'` клієнт ухвалює рішення в такому порядку:

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

Поки не надійде ця відповідь, режимом є **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));
```

Це стосується лише режиму спливного вікна. Режим Pane створює елемент на сторінці й не має такого обмеження.