> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# KLARNA- (Klarna Payments)

> Die Tags der Klarna-Payments-Direktanbindung: Widget anzeigen, Autorisierung zurückholen, Bestelldaten als JSON auswerten und erkennen, wann die Klarna-Sitzung aktualisiert werden muss.

Bei der Klarna-Payments-Direktanbindung läuft ein Teil des Bezahlvorgangs im Browser des Käufers ab. Der Shop baut eine Sitzung bei Klarna auf, das Klarna-Skript zeigt damit sein Widget an, und nach der Autorisierung durch den Käufer kommt ein Token zurück, mit dem der Shop die Bestellung abschließt.

Die `KLARNA-`Tags liefern genau die Bausteine, die dieser Austausch braucht: die beiden Token, die Feldnamen für die versteckten Eingabefelder, die Rücksprungadresse und die Bestelldaten als JSON. Dazu kommen drei Klammerungen, die den Zustand der Klarna-Sitzung abfragen.

Verteilt sind die Tags über drei Seiten des Bestellablaufs. Im Warenkorb liegen die Tags für den Express-Checkout, auf der Zahlungs- und Versandartenseite und der Bestellübersicht das Widget und die Autorisierung.

Wegweiser: [Klarna Payments](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/klarna-payments.md) · [JSON-Schnittstelle](https://dokumentation.websale.de/v8s/externe-dienste/json-schnittstelle.md)

## Das Widget anzeigen

Das Klarna-Skript braucht den Client-Token, um sein Widget aufzubauen.

| Tag | Liefert |
| - | - |
| `KLARNA-ClientToken` | den Client-Token der aktuellen Klarna-Sitzung |
| `KLARNA-ShowKlarnaAtPayDeliv` | greift, wenn das Widget schon auf der Zahlungs- und Versandartenseite erscheinen soll |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{KLARNA-ClientToken}
   <div id="klarna_payments_container"></div>

   <script>
      Klarna.Payments.init({ client_token: "~KLARNA-ClientToken~" });
   </script>
   <script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/KLARNA-ClientToken}
```

Klammern Sie die Einbindung immer. Ohne gültige Klarna-Sitzung ist der Token leer, und das Skript baut ein leeres Widget auf, das der Käufer nicht bedienen kann.

> [!WARNING]
>
> Ein leerer Client-Token ist nicht zwangsläufig ein Konfigurationsfehler. Läuft der Shop im Modus mit gesperrter Klarna-Sitzung, gibt das Tag den Token bewusst nicht aus, sofern nicht der Klarna-Payments-Tunnel aktiv ist. Prüfen Sie in diesem Fall zuerst den Betriebsmodus, bevor Sie die Zugangsdaten durchsehen.

Das Tag verbindet zwei Bedingungen: die Einstellung, dass Klarna bereits auf der Zahlungs- und Versandartenseite erscheinen soll, und dass die Sitzung nicht gesperrt ist. Damit entscheiden Sie an einer Stelle, ob das Widget dort steht oder erst auf der Bestellübersicht.

## Die Autorisierung zurückholen

Nach der Autorisierung liefert das Klarna-Skript ein Token, das der Shop braucht. Dafür schickt das Template den Käufer auf eine eigene Rücksprungadresse und hängt das Token als Parameter an.

| Tag | Liefert |
| - | - |
| `KLARNA-AuthCallbackURL` | die Adresse, auf die nach erfolgreicher Autorisierung weitergeleitet wird |
| `KLARNA-AuthTokenName` | den Namen des Parameters beziehungsweise Feldes für das Token |
| `KLARNA-AuthTokenValue` | das Token, nachdem der Shop es entgegengenommen hat |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
   Klarna.Payments.authorize({}, function (res) {
      if (res.authorization_token) {
         const redirectURL = new URL("~KLARNA-AuthCallbackURL~");
         redirectURL.searchParams.append("~KLARNA-AuthTokenName~", res.authorization_token);
         window.location.href = redirectURL.href;
      }
   });
</script>
```

> [!WARNING]
>
> `KLARNA-AuthCallbackURL` gibt die Adresse mit unkodierten Und-Zeichen aus, weil sie für JavaScript gedacht ist. In ein HTML-Attribut gehört sie in dieser Form nicht. Verwenden Sie sie wie im Beispiel innerhalb eines Skripts.

Der Feldname ist im Shopsystem fest vergeben. Schreiben Sie ihn nicht von Hand, sondern nehmen Sie ihn immer aus `KLARNA-AuthTokenName`, sonst erkennt der Shop das zurückkommende Token nicht.

`KLARNA-AuthTokenValue` ist erst nach dem Rücksprung gefüllt. Als Klammerung eignet es sich, um die Bestellübersicht je nach Stand der Autorisierung unterschiedlich aufzubauen.

## Wenn sich die Bestelldaten geändert haben

Die Klarna-Sitzung enthält eine Kopie der Bestell- und Adressdaten. Ändert der Käufer danach noch etwas, beispielsweise die Menge oder die Lieferadresse, passen die beiden nicht mehr zusammen.

`KLARNA-NeedUpdate` greift genau in diesem Fall.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{KLARNA-NeedUpdate}
   <script>
      Klarna.Payments.load({ container: "#klarna_payments_container" });
   </script>
{/KLARNA-NeedUpdate}
```

> [!WARNING]
>
> Diese Klammerung ist kein Vorrat für spätere Erweiterungen, auch wenn die bisherige Beschreibung das nahelegt. Sie markiert den Zustand, in dem die Klarna-Sitzung veraltet ist. Wird sie nicht aktualisiert, bevor der Käufer bestellt, weist das Shopsystem den Bestellabschluss ab, weil ein Update nach der Autorisierung nicht mehr möglich ist. Der Käufer sieht dann einen Abbruch ohne erkennbaren Grund.

Im Modus mit gesperrter Klarna-Sitzung greift die Klammerung nie, weil dort ohnehin für jeden Durchgang eine neue Sitzung aufgebaut wird. Das Template darf die Klammerung trotzdem enthalten, sie bleibt dann einfach wirkungslos.

## Die Bestelldaten als JSON

`KLARNA-OrderDataJSON` gibt die Daten aus, die der Shop an Klarna übergibt, einschließlich Rechnungs- und Lieferadresse. Das ist vor allem für den Express-Checkout nützlich, bei dem die Adresse von Klarna kommt und im Shop angezeigt werden soll.

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
   "purchase_country": "DE",
   "purchase_currency": "EUR",
   "locale": "de-DE",
   "order_amount": 700,
   "billing_address": {
      "city": "Berlin",
      "country": "DE",
      "email": "kunde@example.de",
      "family_name": "Mustermann",
      "given_name": "Max",
      "postal_code": "10178",
      "street_address": "Musterstraße 2",
      "street_address2": null
   },
   "shipping_address": { }
}
```

Einzelne Werte daraus holen Sie mit den Tags der JSON-Schnittstelle.

Das JSON wird bei jeder Auswertung des Tags neu aus den aktuellen Warenkorb- und Adressdaten erzeugt. Es ist also immer aktuell, aber auch nicht umsonst. Werten Sie es einmal aus und arbeiten Sie danach mit der JSON-Schnittstelle weiter, statt das Tag mehrfach zu setzen.

Die Ausgabe wird aus UTF-8 in den Zeichensatz des Shops umgewandelt. Umlaute in den von Klarna gelieferten Adressen erscheinen also in der Kodierung, die auch der Rest der Seite verwendet.

Referenz: [EJD- (JSON-Schnittstelle)](https://dokumentation.websale.de/v8s/referenz/tags/ejd.md)

## Express-Checkout im Warenkorb

Beim Express-Checkout beginnt der Käufer den Bezahlvorgang schon im Warenkorb, und Klarna liefert die Adressdaten.

| Tag | Liefert |
| - | - |
| `KLARNA-MerchantID` | die in der Shopkonfiguration hinterlegte MerchantID |
| `KLARNA-AddressDataName` | den Feldnamen für das versteckte Feld mit den Adressdaten von Klarna |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{KLARNA-MerchantID}
   <form action="~FORM-Basket~" method="post">
      <input type="hidden" name="~KLARNA-AddressDataName~" id="klarna-address-data">
      ...
   </form>
{/KLARNA-MerchantID}
```

Auch dieser Feldname ist fest vergeben. Das Klarna-Skript schreibt die Adressdaten in das Feld, und der Shop liest sie beim Absenden unter genau diesem Namen aus.

## Die alte Integration

`KLARNA-ObsoleteMode` unterscheidet die beiden Betriebsarten der Anbindung. Die Klammerung greift, wenn der Shop **nicht** im Modus mit gesperrter Klarna-Sitzung läuft, also in der älteren Variante.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{KLARNA-ObsoleteMode}
   <!-- Aufbau für die ältere Anbindung -->
{/KLARNA-ObsoleteMode}

{!KLARNA-ObsoleteMode}
   <!-- Aufbau für die gesperrte Sitzung -->
{/!KLARNA-ObsoleteMode}
```

Diese Klammerung brauchen Sie nur, solange ein Template beide Varianten bedienen muss. Ist die Umstellung abgeschlossen, können Sie den nicht mehr benötigten Zweig entfernen und die Klammerung auflösen.

## Die Tags im Überblick

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Schleifen-Tag |
| - | - | - | - | - |
| `KLARNA-ClientToken` | ja | ja | ja | – |
| `KLARNA-OrderDataJSON` | ja | ja | ja | – |
| `KLARNA-AuthTokenName` | ja | – | – | – |
| `KLARNA-AuthTokenValue` | ja | ja | ja | – |
| `KLARNA-AuthCallbackURL` | ja | – | – | – |
| `KLARNA-MerchantID` | ja | ja | ja | – |
| `KLARNA-AddressDataName` | ja | – | – | – |
| `KLARNA-NeedUpdate` | – | ja | ja | – |
| `KLARNA-ShowKlarnaAtPayDeliv` | – | ja | ja | – |
| `KLARNA-ObsoleteMode` | – | ja | ja | – |

`KLARNA-MerchantID` und `KLARNA-AddressDataName` gehören auf die Warenkorbseite `ws_basket.htm`, `KLARNA-AuthTokenName` und `KLARNA-AuthCallbackURL` auf die Bestellübersichtsseite `ws_place_order.htm`, `KLARNA-ClientToken` auf beide Seiten des Bezahlvorgangs. Die übrigen Tags sind auf allen Templates zulässig.

## Verwandte Themen

* Wegweiser: [Klarna Payments](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/klarna-payments.md)
* Referenz: [EJD- (JSON-Schnittstelle)](https://dokumentation.websale.de/v8s/referenz/tags/ejd.md)
* Referenz: [ST- (Seitenzustände)](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md)
* Referenz: [MSG- (Meldungen)](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md)


## Related topics

- [Klarna Payments](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/klarna-payments.md)
- [Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)
- [Schaltflächen der Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/tags/bt/zahlungsarten.md)
- [Sektionen: Positionen und Zahlung](https://dokumentation.websale.de/v8s/schnittstellen/bestellungen/ws-bestelldaten/sektionen-positionen-und-zahlung.md)
- [Billie Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.