Оформлення замовлення відкривається в одному з двох режимів.
Pane — це вбудована панель, що відображається всередині вашої сторінки. На комп’ютері вона висувається справа, а її ширина обмежена значенням pane.width; на мобільному пристрої вона висувається знизу. Відвідувач залишається на вашому сайті, а панель закривається, коли він натискає Escape або клацає затемнену область.
Popup — це окреме вікно браузера, розташоване по центру екрана відвідувача. Клієнт відстежує закриття вікна, щоб прибрати фон.
Для вбудованого оформлення замовлення потрібне довірене джерело
У режимі Pane оформлення замовлення Entase відображається в iframe на вашому домені, тому воно дозволене лише для доменів, які ви явно авторизували. Додайте кожен домен, з якого відкривається оформлення замовлення, до Довірених джерел у розділі Налаштування → Інтеграції – див. Інтеграції та налаштування оформлення замовлення.
Важливо, чи включено префікс www.. Якщо ви не впевнені, яку форму використовує ваш сайт, додайте обидві.
Якщо вашого домену немає в списку, оформлення замовлення все одно працюватиме – воно просто відкриється у спливному вікні.
Як визначається 'auto'
За типового значення checkoutMode: 'auto' клієнт ухвалює рішення в такому порядку:
- Не HTTPS → спливне вікно. Вбудоване оформлення замовлення ніколи не використовується на незахищеній сторінці.
localhostабо127.0.0.1→ панель із попередженням, записаним у консоль. Це зручно для розробки, щоб ви могли створювати інтеграцію з вбудованим макетом; це нічого не говорить про те, чи дозволено ваш домен у робочому середовищі.- В іншому разі → клієнт запитує Entase, чи може це джерело використовувати вбудоване оформлення замовлення, надсилаючи
pkдля ідентифікації облікового запису. Якщо відповідь містить pane, режим стає pane.
Поки не надійде ця відповідь, режимом є popup. Саме ця поведінка найімовірніше вас здивує: перевірка є асинхронною, тому виклик book(), виконаний одразу під час завантаження сторінки – до того, як відвідувач матиме змогу щось клацнути, – усе ще може відкрити спливне вікно на домені з ідеальними налаштуваннями. На практиці реальне клацання завжди відбувається значно пізніше, ніж завершується перевірка. Якщо ви відкриваєте оформлення замовлення автоматично, примусово задайте режим, а не покладайтеся на визначення.
Примусове задання режиму
Явно задайте checkoutMode, щоб повністю пропустити визначення:
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY', checkoutMode: 'popup' });Або перевизначте його для одного бронювання:
entase.book('EVENT_ID', { checkoutMode: 'popup' });Примусове використання 'pane' на домені, який не є довіреним джерелом, не надає дозволу – панель відкриється, але оформлення замовлення всередині не зможе взаємодіяти з вашою сторінкою. Використовуйте 'popup' як свідомий вибір, а 'auto' залишайте, коли хочете використовувати вбудоване оформлення замовлення всюди, де це дозволено.
Нерозпізнане значення ігнорується й трактується як 'auto'.
Перегляд і зміна режиму під час виконання
entase.getCheckoutMode(); // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() callgetCheckoutMode() повертає визначений режим, тому повідомляє, що насправді станеться. Повернення режиму до 'auto' запускає визначення повторно.
Блокувальники спливних вікон
Браузери дозволяють window.open() лише під час дії користувача. Викликайте book() безпосередньо в обробнику клацання – не після await, fetch або setTimeout, коли дія вже втратила чинність і спливне вікно буде заблоковано.
// 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 створює елемент на сторінці й не має такого обмеження.