# De client installeren

> Laad client.js vanaf de Entase-CDN en maak vervolgens een instantie. Er is geen pakket om te installeren en geen buildstap.

De client wordt als één bestand geleverd vanaf de Entase-CDN. Er is geen npm-pakket, geen bundel om te bouwen en geen afhankelijkheid die je up-to-date moet houden – je krijgt altijd de huidige versie.

```html
<script src="https://js.entase.com/client.js"></script>
```

Door het script te laden, wordt er een globale klasse `Entase` gedefinieerd. Op zichzelf doet het verder niets: geen netwerkaanvragen, geen wijzigingen aan de DOM, er wordt niets weergegeven. Alles begint wanneer je een instantie maakt.

## Een instantie maken

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

Maak **één instantie per pagina** en hergebruik die voor elk evenement. De constructor registreert een `message`-listener op het venster en begint te detecteren welke checkoutmodus je domein mag gebruiken. Het maken van meerdere instanties betekent dus dubbele listeners en dubbele detectieaanroepen zonder enig voordeel.

Elke optie heeft een standaardwaarde, dus `new Entase()` zonder argumenten is geldig – maar zonder `pk` kan de client niet verifiëren dat je domein inline checkout mag gebruiken en valt deze altijd terug op een pop-upvenster. Zie [Checkoutmodi](/developers/js-client/checkout-modes.md).

## Het script asynchroon laden

Als je `client.js` laadt met `async` of `defer`, bestaat de klasse nog niet wanneer je inline script wordt uitgevoerd. De bibliotheek verstuurt een `entase:ready`-event op `window` zodra deze is geladen, dus wacht daarop:

```html
<script src="https://js.entase.com/client.js" async></script>
<script>
  let entase = null;

  const init = () => { entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' }); };

  if (typeof Entase !== 'undefined') init();
  else window.addEventListener('entase:ready', init);
</script>
```

De `typeof`-controle eerst uitvoeren is belangrijk: als het script al volledig is geladen, is `entase:ready` al verzonden en zou je er voor altijd op wachten als je ernaar luistert.

## Opruimen

Roep in een single-pageapplicatie `destroy()` aan wanneer de weergave die eigenaar is van de instantie wordt ontkoppeld:

```js
entase.destroy();
```

Hiermee worden de window-listeners verwijderd die de client heeft geregistreerd. Een vernietigde instantie kan niet opnieuw worden gebruikt – een aanroep van `book()` erop registreert een fout en doet niets. Maak in plaats daarvan een nieuwe instantie.

## Content Security Policy

Als je site een `Content-Security-Policy`-header verstuurt, heeft de checkout het volgende nodig:

- `script-src https://js.entase.com` – om de bibliotheek te laden.
- `frame-src https://www.entase.com` – de checkout wordt in de pane-modus weergegeven in een iframe.
- `connect-src https://www.entase.com` – de client roept de Entase-API aan om de toegestane checkoutmodus te bepalen.

Zonder `frame-src` produceert de pane-modus een leeg paneel. Zonder `connect-src` mislukt de modusdetectie en wordt elke checkout als pop-up geopend.