# Kassan tilat

> Miten asiakas valitsee upotetun paneelin ja ponnahdusikkunan välillä, miksi luotetut alkuperät ratkaisevat asian ja mitä odottaa paikallisessa kehityksessä.

Kassa avautuu yhdessä kahdesta tilasta.

**Paneeli** on sivullasi renderöitävä upotettu paneeli. Työpöydällä se liukuu sisään oikealta, ja sen enimmäisleveys on `pane.width`; mobiilissa se liukuu ylös alareunasta. Vierailija pysyy sivustollasi, ja paneeli sulkeutuu, kun hän painaa Escape-näppäintä tai napsauttaa himmennettyä aluetta.

**Ponnahdusikkuna** on erillinen selainikkuna, joka sijoitetaan vierailijan näytön keskelle. Asiakas seuraa, milloin ikkuna suljetaan, jotta se voi poistaa taustan.

## Upotettu kassa edellyttää luotettua alkuperää

Paneelitila renderöi Entase-kassan iframe-kehyksessä verkkotunnuksellasi, joten se on sallittu vain verkkotunnuksissa, jotka olet nimenomaisesti valtuuttanut. Lisää jokainen kassan avaava verkkotunnus kohdassa Asetukset → Integraatiot olevaan **Luotetut alkuperät** -luetteloon – katso [Integraatiot ja kassan mukauttaminen](/organizers/settings/integrations-and-checkout-customization.md).

Sillä, sisältyykö `www.`-etuliite, on merkitystä. Jos et ole varma, kummassa muodossa sivustosi palvelee sisältöä, lisää molemmat.

Jos verkkotunnuksesi ei ole luettelossa, kassa toimii silti – se vain avautuu ponnahdusikkunana.

## Miten `'auto'` ratkaistaan

Oletusarvolla `checkoutMode: 'auto'` asiakas päättää tässä järjestyksessä:

1. **Ei HTTPS** → ponnahdusikkuna. Upotettua kassaa ei koskaan käytetä suojaamattomalla sivulla.
2. **`localhost` tai `127.0.0.1`** → paneeli, ja konsoliin kirjataan varoitus. Tämä helpottaa kehitystä, jotta voit rakentaa upotettua asettelua vasten; se ei kerro mitään siitä, onko tuotantoverkkotunnuksesi sallittu.
3. **Muussa tapauksessa** → asiakas kysyy Entaselta, saako tämä alkuperä käyttää upotettua kassaa, ja lähettää tilin tunnistamiseen `pk`-arvon. Jos vastaus sisältää paneelin, tilaksi tulee paneeli.

Kunnes vastaus saapuu, tila on **ponnahdusikkuna**. Tämä toiminta todennäköisimmin yllättää sinut: tarkistus on asynkroninen, joten heti sivun latautuessa – ennen kuin vierailijalla on ollut mahdollisuutta napsauttaa mitään – tehty `book()`-kutsu voi silti avata ponnahdusikkunan täysin oikein määritetyllä verkkotunnuksella. Käytännössä todellinen napsautus tapahtuu aina pitkään sen jälkeen, kun tarkistus on valmistunut. Jos avaat kassan automaattisesti, pakota tila sen sijaan, että luottaisit tunnistukseen.

## Tilan pakottaminen

Aseta `checkoutMode` nimenomaisesti ohittaaksesi tunnistuksen kokonaan:

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

Tai ohita se yksittäisessä varauksessa:

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

`'pane'`-tilan pakottaminen verkkotunnuksella, joka ei ole luotettu alkuperä, ei myönnä käyttöoikeutta – paneeli avautuu, mutta sen sisällä oleva kassa ei voi kommunikoida sivusi kanssa. Käytä `'popup'`-tilaa tietoisena valintana ja jätä `'auto'` käyttöön, kun haluat upotetun kassan kaikkialla, missä se on sallittu.

Tunnistamaton arvo ohitetaan ja käsitellään arvona `'auto'`.

## Tilan lukeminen ja muuttaminen ajon aikana

```js
entase.getCheckoutMode();        // 'pane' tai 'popup' – ei koskaan 'auto'
entase.setCheckoutMode('popup'); // koskee kaikkia myöhempiä book()-kutsuja
```

`getCheckoutMode()` palauttaa *ratkaistun* tilan, joten se kertoo, mitä todella tapahtuu. Tilan asettaminen takaisin arvoon `'auto'` suorittaa tunnistuksen uudelleen.

## Ponnahdusikkunoiden estäjät

Selaimet sallivat `window.open()`-kutsun vain käyttäjän eleen aikana. Kutsu `book()` suoraan napsautuskäsittelijän sisällä – älä `await`-, `fetch`- tai `setTimeout`-kutsun jälkeen, sillä silloin ele on jo vanhentunut ja ponnahdusikkuna estetään.

```js
// Estetty: ele on poissa, kun book() suoritetaan.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Toimii: selvitä tunniste ensin, avaa napsautuksella.
button.addEventListener('click', () => entase.book(button.dataset.eventId));
```

Tämä koskee vain ponnahdusikkunatilaa. Paneelitila luo elementin sivulle eikä siihen sovelleta tätä rajoitusta.