Modalità di checkout

Il checkout si apre in una delle due modalità.

Pannello è un pannello in linea visualizzato all'interno della tua pagina. Su desktop scorre da destra, con larghezza massima pari a pane.width; su dispositivi mobili scorre dal basso verso l'alto. Il visitatore rimane sul tuo sito e il pannello si chiude quando preme Esc o fa clic sull'area oscurata.

Pop-up è una finestra del browser separata, centrata sullo schermo del visitatore. Il client rileva la chiusura della finestra per poter rimuovere lo sfondo.

Il checkout in linea richiede un'origine attendibile

La modalità pannello visualizza il checkout Entase in un iframe sul tuo dominio, quindi è consentita solo per i domini che hai autorizzato esplicitamente. Aggiungi ogni dominio che apre il checkout a Origini attendibili in Impostazioni → Integrazioni – consulta Integrazioni e personalizzazione del checkout.

La presenza del prefisso www. è importante. Se non sei sicuro di quale forma utilizzi il tuo sito, aggiungile entrambe.

Se il tuo dominio non è nell'elenco, il checkout continua a funzionare – si apre semplicemente come finestra pop-up.

Come viene risolto 'auto'

Con l'impostazione predefinita checkoutMode: 'auto', il client decide in questo ordine:

1. Non HTTPS → pop-up. Il checkout in linea non viene mai utilizzato in una pagina non sicura.
2. localhost o 127.0.0.1 → pannello, con un avviso registrato nella console. È una comodità per lo sviluppo che consente di creare l'integrazione con il layout in linea; non indica se il tuo dominio di produzione è autorizzato.
3. Altrimenti → il client chiede a Entase se questa origine può utilizzare il checkout in linea, inviando pk per identificare l'account. Se la risposta include pane, la modalità diventa pannello.

Finché non arriva la risposta, la modalità è popup. Questo comportamento è quello che più probabilmente può sorprenderti: il controllo è asincrono, quindi una chiamata a book() eseguita immediatamente al caricamento della pagina – prima che il visitatore abbia avuto modo di fare clic su qualcosa – può comunque aprire un pop-up su un dominio configurato perfettamente. In pratica, un clic reale avviene sempre molto dopo il completamento del controllo. Se apri il checkout automaticamente, forza invece la modalità anziché affidarti al rilevamento.

Forzare una modalità

Imposta esplicitamente checkoutMode per ignorare completamente il rilevamento:

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

Oppure sovrascrivila per una singola prenotazione:

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

Forzare 'pane' su un dominio che non è un'origine attendibile non concede l'autorizzazione – il pannello si apre, ma il checkout al suo interno non può comunicare con la tua pagina. Usa 'popup' come scelta intenzionale e mantieni 'auto' quando desideri il checkout in linea ovunque sia consentito.

Un valore non riconosciuto viene ignorato e trattato come 'auto'.

Leggere e modificare la modalità in fase di esecuzione

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

getCheckoutMode() restituisce la modalità risolta, quindi indica ciò che accadrà effettivamente. Reimpostare la modalità su 'auto' esegue nuovamente il rilevamento.

Blocco dei pop-up

I browser consentono window.open() solo durante un gesto dell'utente. Chiama book() direttamente all'interno di un gestore di clic – non dopo un await, un fetch o un setTimeout, quando il gesto è ormai scaduto e il pop-up viene bloccato.

// 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));

Questo riguarda solo la modalità pop-up. La modalità pannello crea un elemento nella pagina e non è soggetta a questa limitazione.