# Moduri de checkout

> Cum alege clientul între panoul integrat și o fereastră pop-up, de ce sunt decisive originile de încredere și la ce să vă așteptați în timpul dezvoltării locale.

Checkout-ul se deschide într-unul dintre două moduri.

**Panoul** este un panou integrat, redat în pagina dvs. Pe desktop, glisează din dreapta, cu lățimea limitată la `pane.width`; pe mobil, glisează în sus din partea de jos. Vizitatorul rămâne pe site-ul dvs., iar panoul se închide când apasă Escape sau face clic pe zona estompată.

**Fereastra pop-up** este o fereastră de browser separată, centrată pe ecranul vizitatorului. Clientul urmărește închiderea ferestrei pentru a putea elimina fundalul.

## Checkout-ul integrat necesită o origine de încredere

Modul panou redă checkout-ul Entase într-un iframe pe domeniul dvs., așadar este permis doar pentru domeniile pe care le-ați autorizat explicit. Adăugați fiecare domeniu care deschide checkout-ul la **Origini de încredere** în Setări → Integrări – consultați [Integrări și personalizarea checkout-ului](/organizers/settings/integrations-and-checkout-customization.md).

Contează dacă este inclus prefixul `www.`. Dacă nu sunteți sigur ce formă servește site-ul dvs., adăugați-le pe ambele.

Dacă domeniul dvs. nu este în listă, checkout-ul funcționează în continuare – pur și simplu se deschide într-o fereastră pop-up.

## Cum este rezolvat `'auto'`

Cu valoarea implicită `checkoutMode: 'auto'`, clientul decide în această ordine:

1. **Nu este HTTPS** → fereastră pop-up. Checkout-ul integrat nu este utilizat niciodată pe o pagină nesecurizată.
2. **`localhost` sau `127.0.0.1`** → panou, cu un avertisment înregistrat în consolă. Aceasta este o facilitate pentru dezvoltare, astfel încât să puteți construi folosind aspectul integrat; nu spune nimic despre dacă domeniul dvs. de producție este permis.
3. **În caz contrar** → clientul întreabă Entase dacă această origine poate utiliza checkout-ul integrat, trimițând `pk` pentru a identifica contul. Dacă răspunsul include pane, modul devine panou.

Până la primirea răspunsului, modul este **popup**. Acesta este comportamentul care are cele mai mari șanse să vă surprindă: verificarea este asincronă, astfel încât un apel `book()` declanșat imediat la încărcarea paginii – înainte ca vizitatorul să aibă ocazia să facă clic pe ceva – poate deschide totuși o fereastră pop-up pe un domeniu perfect configurat. În practică, un clic real are întotdeauna loc mult după finalizarea verificării. Dacă deschideți checkout-ul automat, forțați modul în loc să vă bazați pe detectare.

## Forțarea unui mod

Setați explicit `checkoutMode` pentru a omite complet detectarea:

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

Sau suprascrieți-l pentru o singură rezervare:

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

Forțarea valorii `'pane'` pe un domeniu care nu este o origine de încredere nu acordă permisiunea – panoul se deschide, însă checkout-ul din interiorul său nu poate comunica cu pagina dvs. Folosiți `'popup'` ca alegere deliberată și păstrați `'auto'` atunci când doriți checkout integrat oriunde este permis.

O valoare nerecunoscută este ignorată și tratată ca `'auto'`.

## Citirea și modificarea modului în timpul rulării

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

`getCheckoutMode()` returnează modul *rezolvat*, așadar indică ce se va întâmpla efectiv. Setarea modului înapoi la `'auto'` rulează din nou detectarea.

## Blocarea ferestrelor pop-up

Browserele permit `window.open()` numai în timpul unui gest al utilizatorului. Apelați `book()` direct într-un handler de clic – nu după un `await`, un `fetch` sau un `setTimeout`, moment în care gestul a expirat și fereastra pop-up este blocată.

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

Acest lucru afectează doar modul pop-up. Modul panou creează un element în pagină și nu este supus acestei restricții.