# Den Client einbinden

> Laden Sie client.js über das Entase-CDN und erstellen Sie dann eine Instanz. Es gibt kein Paket zu installieren und keinen Build-Schritt.

Der Client wird über das Entase-CDN als einzelne Datei bereitgestellt. Es gibt kein npm-Paket, kein zu erstellendes Bundle und keine Abhängigkeit, die aktuell gehalten werden muss – Sie erhalten immer die aktuelle Version.

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

Durch das Laden des Skripts wird eine globale Klasse `Entase` definiert. Darüber hinaus geschieht nichts von selbst: keine Netzwerkanfragen, keine DOM-Änderungen, keine gerenderten Inhalte. Alles beginnt, wenn Sie eine Instanz erstellen.

## Eine Instanz erstellen

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

Erstellen Sie **eine Instanz pro Seite** und verwenden Sie sie für jedes Event wieder. Der Konstruktor registriert einen `message`-Listener auf dem Window und beginnt zu erkennen, welchen Checkout-Modus Ihre Domain verwenden darf. Mehrere Instanzen bedeuten daher doppelte Listener und doppelte Erkennungsaufrufe ohne Nutzen.

Jede Option hat einen Standardwert, daher ist `new Entase()` ohne Argumente gültig – ohne `pk` kann der Client jedoch nicht prüfen, ob Ihre Domain den Inline-Checkout verwenden darf, und greift immer auf ein Pop-up-Fenster zurück. Siehe [Checkout-Modi](/developers/js-client/checkout-modes.md).

## Das Skript asynchron laden

Wenn Sie `client.js` mit `async` oder `defer` laden, existiert die Klasse noch nicht, wenn Ihr Inline-Skript ausgeführt wird. Die Bibliothek löst auf `window` nach dem Laden ein `entase:ready`-Event aus. Warten Sie daher darauf:

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

Die `typeof`-Prüfung muss zuerst erfolgen: Wenn das Skript bereits vollständig geladen wurde, wurde `entase:ready` schon ausgelöst, und ein Listener dafür würde endlos warten.

## Aufräumen

Rufen Sie in einer Single-Page-Anwendung `destroy()` auf, wenn die Ansicht, zu der die Instanz gehört, ausgehängt wird:

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

Dadurch werden die vom Client registrierten Window-Listener entfernt. Eine zerstörte Instanz kann nicht wiederverwendet werden – ein Aufruf von `book()` darauf protokolliert einen Fehler und bewirkt nichts. Erstellen Sie stattdessen eine neue Instanz.

## Content Security Policy

Wenn Ihre Website einen `Content-Security-Policy`-Header sendet, benötigt der Checkout Folgendes:

- `script-src https://js.entase.com` – zum Laden der Bibliothek.
- `frame-src https://www.entase.com` – der Checkout wird im Pane-Modus in einem iframe gerendert.
- `connect-src https://www.entase.com` – der Client ruft die Entase-API auf, um den zulässigen Checkout-Modus zu bestimmen.

Ohne `frame-src` erzeugt der Pane-Modus ein leeres Panel. Ohne `connect-src` schlägt die Moduserkennung fehl und jeder Checkout wird als Pop-up geöffnet.