# Modalità di checkout

> Come il client sceglie tra il pannello in linea e una finestra pop-up, perché le origini attendibili determinano la scelta e cosa aspettarsi durante lo sviluppo locale.

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](/organizers/settings/integrations-and-checkout-customization.md).

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:

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

Oppure sovrascrivila per una singola prenotazione:

```js
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

```js
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.

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

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