KLARNA- (Klarna Payments)

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 · JSON-Schnittstelle 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

{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.

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

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

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.

{KLARNA-NeedUpdate}
   <script>
      Klarna.Payments.load({ container: "#klarna_payments_container" });
   </script>
{/KLARNA-NeedUpdate}

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.

{
   "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)

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

{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.

{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.

Referenz

Das Widget anzeigen

Die Autorisierung zurückholen

Wenn sich die Bestelldaten geändert haben

Die Bestelldaten als JSON

Express-Checkout im Warenkorb

Die alte Integration

Die Tags im Überblick

Verwandte Themen

​Das Widget anzeigen

​Die Autorisierung zurückholen

​Wenn sich die Bestelldaten geändert haben

​Die Bestelldaten als JSON

​Express-Checkout im Warenkorb

​Die alte Integration

​Die Tags im Überblick

​Verwandte Themen

Das Widget anzeigen

Die Autorisierung zurückholen

Wenn sich die Bestelldaten geändert haben

Die Bestelldaten als JSON

Express-Checkout im Warenkorb

Die alte Integration

Die Tags im Überblick

Verwandte Themen