Klarna Payments

Klarna ist keine einzelne Zahlungsart, sondern drei in einer: Sofortüberweisung, Kauf auf Rechnung und Ratenzahlung. Welche davon der Käufer nimmt, entscheidet er im Klarna-Fenster, nicht im Shop. Die Zahlung läuft vollständig über Klarna. Klarna übernimmt das Betrugs- und Kreditrisiko, der Käufer bekommt Käuferschutz, und Sie sehen alle Vorgänge im Klarna-Händlerportal. Anders als bei Apple Pay oder iDEAL sitzt dazwischen kein Payment-Service-Provider, die Anbindung ist direkt. Im Shop merkt man davon vor allem eines: Das Klarna-Widget lebt auf der Bestellübersicht ws_place_order.htm, nicht auf der Zahlungs- und Versandartenseite. Dort wird Klarna nur ausgewählt.

Wie der Bezahlvorgang abläuft

Der Käufer wählt Klarna auf der Zahlungs- und Versandartenseite.
Auf der Bestellübersicht klickt er auf „Zahlungspflichtig bestellen”.
Das Klarna-Widget öffnet sich über der Seite. Der Käufer meldet sich an, wählt seine Zahlungsmethode und bestätigt.
Der Shop zeigt die Bestelleingangsbestätigung ws_confirm.htm.

Mit dem Klick auf „Zahlungspflichtig bestellen” betritt der Käufer den Klarna-Tunnel, so wie bei den Express-Bezahlarten. Er kommt aus der Bestellübersicht nicht mehr heraus, solange er drin ist. Deshalb gehört zwingend ein Abbruchknopf auf die Seite. Ohne ihn sitzt ein Käufer fest, der es sich anders überlegt.

Über Klarna lässt sich zusätzlich der B2B-Rechnungskauf mit Billie abwickeln. Das ist eine eigene Zahlungsart mit eigenem Konfigurationsabschnitt <PaymentBillieViaKlarna-Txt> und eigenem Zahlungsarten-Code, nicht einfach eine weitere Methode innerhalb von Klarna. Sprechen Sie mit Ihrem WEBSALE-Ansprechpartner, wenn Sie beides anbieten wollen. Wegweiser: Billie Rechnungskauf

Schritt 1: Vertrag und Freischaltung

Schließen Sie einen Händlervertrag mit Klarna ab. Sie erhalten dabei die Zugangsdaten, die WEBSALE für die Freischaltung braucht, unter anderem Benutzername und Kennwort, die Schnittstellenadresse, die MerchantID und die UUID. Reichen Sie diese Angaben bei Ihrem WEBSALE-Ansprechpartner ein.

Schritt 2: Zahlungsart anlegen

<PaymentKlarna-Txt>
   Allow            = yes
   TestMode         = yes
   Name             = Klarna
   NameSuffix       = Rechnung, Ratenzahlung oder Sofortüberweisung, Sie entscheiden im nächsten Schritt.
   Img              = logo-klarna.png
   RadioOnClick     = selectPayment('~ID~');
   ImgOnClick       = selectPaymentImage('~ID~');
   DelivererID-List = standard,express

   KlarnaLocaleCode     = de-DE
   AdditionProductName  = Zusatzkosten
   ReductionProductName = Abzüglich gewährter Rabatte
</PaymentKlarna-Txt>

Parameter	Bedeutung
`KlarnaLocaleCode`	Sprache und Land des Widgets, beispielsweise `de-DE` oder `de-AT`
`AdditionProductName`	Bezeichnung für die Sammelposition, unter der Zusatzkosten an Klarna gehen
`ReductionProductName`	Bezeichnung für die Sammelposition, unter der Rabatte an Klarna gehen
`ShowKlarnaAtPayDeliv`	`yes` oder `no`, steuert die Anzeige auf der Zahlungs- und Versandartenseite
`KlarnaOrderLinesOmitFreeItems`	`yes` lässt Positionen mit dem Preis null aus der Übergabe an Klarna heraus

Klarna bekommt den Warenkorb Position für Position übergeben. Zusatzkosten und Rabatte lassen sich dort nicht als Zu- und Abschlag abbilden, sie werden deshalb als eigene Positionen mitgeschickt. AdditionProductName und ReductionProductName geben diesen beiden Positionen ihren Namen, und dieser Name steht später auf der Klarna-Rechnung des Käufers. Das Aussehen des Widgets lässt sich anpassen:

<PaymentKlarna-Txt>
   KlarnaDesignColorBorder         = #FF9900
   KlarnaDesignColorBorderSelected =
   KlarnaDesignColorDetails        =
   KlarnaDesignColorText           =
   KlarnaDesignRadiusBorder        =
</PaymentKlarna-Txt>

Referenz: Abschnitt PaymentKlarna-Txt · Abschnitt PaymentXXX-Txt

Schritt 3: Hinweismeldungen hinterlegen

<NotifyMessages-Txt>
   Klarna-ClearingError  = Bei der Zahlung ist ein Fehler aufgetreten. Bitte wählen Sie eine andere Zahlungsart.
   Klarna-ClearingCancel = Die Zahlung wurde abgebrochen. Bitte überprüfen Sie Ihre Eingaben.
   Klarna-ClearingDeny   = Die Zahlung wurde abgelehnt. Bitte überprüfen Sie Ihre Eingaben.
</NotifyMessages-Txt>

Referenz: Abschnitt NotifyMessages-Txt Auf ws_place_order.htm kommen zwei Dinge hinzu: der Abbruchknopf innerhalb von FORM-PlaceOrder und das Widget-Skript außerhalb.

<form action="~FORM-PlaceOrder~" method="post" id="place_order_form">

   {ST-KlarnaPayments}
      <button type="submit" name="~BT-KlarnaPayments_cancel~">Zahlung abbrechen</button>
   {/ST-KlarnaPayments}

</form>

{ST-KlarnaPayments}
   <div id="klarna_div_id"></div>

   <script>
      window.klarnaAsyncCallback = function () {
         Klarna.Payments.init({
            client_token: '~KLARNA-ClientToken~'
         });
         Klarna.Payments.load({
            container: '#klarna_div_id',
            payment_method_category: 'klarna'
         }, function (res) {});
      };

      $("button[name='~BT-PlaceOrder~']").click(function (e) {
         e.preventDefault();
         try {
            Klarna.Payments.authorize({
               payment_method_category: "klarna"
            }, JSON.parse("~WS-JSEncoding($KLARNA-OrderDataJSON$)~"),
            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;
               }
            });
         } catch (error) {}
      });
   </script>

   <script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/ST-KlarnaPayments}

Drei Stellen sind erklärungsbedürftig:

{ST-KlarnaPayments} greift, solange der Käufer im Klarna-Tunnel ist. Nur dann braucht er das Widget und den Abbruchknopf.
~WS-JSEncoding(…)~ maskiert die Bestelldaten so, dass sie als JavaScript-Zeichenkette heil ankommen. Ohne diese Maskierung zerlegt ein Anführungszeichen im Produktnamen das Skript.
Das Widget meldet sich mit window.klarnaAsyncCallback, sobald es geladen ist. Deshalb steht das Skript von Klarna am Ende und mit async.

Die Formular-ID place_order_form ist ein Beispiel. Tragen Sie die ID ein, die Ihr Formular tatsächlich trägt.

Referenz: ST-KlarnaPayments · BT-KlarnaPayments_cancel · KLARNA-ClientToken · KLARNA-OrderDataJSON · WS-JSEncoding() Mit dem Aufbau aus Schritt 4 muss der Käufer zweimal klicken: einmal, um in den Tunnel zu gelangen, und einmal, um das Widget zu öffnen. Das lässt sich zusammenziehen, indem der Shop die Bestellung per AJAX vorprüft und das Widget gleich danach öffnet.

<form action="~FORM-PlaceOrder~" method="post" id="place_order_form">

   {ST-Payment(35)}
      <div id="klarna_cancel" style="display: none">
         <p>Sie befinden sich im Klarna-Checkout. Möchten Sie abbrechen und zurück zur Bestellübersicht?</p>
         <button type="submit" name="~BT-KlarnaPayments_cancel~">Abbrechen</button>
      </div>
   {/ST-Payment(35)}

</form>

{ST-Payment(35)}
   <div id="klarna_div_id"></div>

   <script>
      function successCallback() {}
      function errorCallback() {}

      $("button[name='~BT-PlaceOrder~']").click(function (e) {
         e.preventDefault();
         return fetch('~FORM-PlaceOrder~', {
            method: 'post',
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded; charset=~WS-Charset~'
            },
            body: $('#place_order_form').serialize()
               + `&ws_ajax_rsf=${ws_stringToHex('successCallback()')}`
               + `&ws_ajax_ref=${ws_stringToHex('errorCallback()')}`
         }).then(function (res) {
            return res.json();
         }).then(function (data) {
            ws_AJAXGenericResponseProcessor(data);
            if (!data.hasOwnProperty('klarnaclienttoken'))
               return;

            Klarna.Payments.init({ client_token: data.klarnaclienttoken });
            Klarna.Payments.load({
               container: '#klarna_div_id',
               payment_method_category: 'klarna'
            }, function (res) {
               try {
                  Klarna.Payments.authorize({
                     payment_method_category: "klarna"
                  }, JSON.parse("~WS-JSEncoding($KLARNA-OrderDataJSON$)~"),
                  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;
                     } else {
                        $("button[name='~BT-KlarnaPayments_cancel~']").click();
                     }
                  });
               } catch (error) {}
            });
         });
      });

      {ST-KlarnaPayments}
         $("#klarna_cancel").show();
      {/ST-KlarnaPayments}
   </script>

   <script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/ST-KlarnaPayments}

Der Abbruchbereich ist zunächst versteckt und wird nur eingeblendet, wenn der Käufer tatsächlich im Tunnel gelandet ist. Dafür sorgt die innere Klammerung {ST-KlarnaPayments} am Ende des Skripts. Bricht Klarna ohne Freigabe ab, löst das Skript den Abbruchknopf selbst aus. Der Käufer kommt damit zurück in die normale Bestellübersicht, statt vor einem leeren Widget zu sitzen. Der äußere Bereich klammert hier mit {ST-Payment(35)} statt mit {ST-KlarnaPayments}, denn das Skript muss schon bereitstehen, bevor der Käufer im Tunnel ist. 35 ist der Zahlungsarten-Code von Klarna.

Schritt 6: Bestätigungsmail ergänzen

Der Käufer soll wissen, dass die Rechnung von Klarna kommt und nicht von Ihnen. Ergänzen Sie mail_customer_order.htm.

{ST-Payment(35)}
   <h2>Hinweise zur Zahlung mit Klarna</h2>
   <p>Die Zahlung wickelt unser Partner Klarna ab. Sobald Ihre Ware versandt ist, erhalten Sie
      von Klarna die Anweisungen, wie Sie Ihre Zahlung abschließen. Ihre Einkäufe verwalten Sie
      in Ihrem Klarna-Konto oder in der Klarna-App.</p>
{/ST-Payment(35)}

Referenz: ST-Payment()

Schritt 7: Hinweis zu Retouren

Bei einer Retoure läuft die Rechnung bei Klarna weiter, bis der Käufer die Rücksendung dort anmeldet. Wer das nicht weiß, bekommt eine Mahnung für Ware, die er längst zurückgeschickt hat. Nehmen Sie deshalb einen Hinweis in Ihre Retouren- oder Rücksendeseite auf, sinngemäß:

Melden Sie Ihre Retoure zusätzlich in Ihrem Klarna-Konto oder in der Klarna-App an. Wählen Sie dort die Bestellung aus und melden Sie die Retoure. Klarna pausiert dann Ihre Rechnung, bis die Ware bei uns eingetroffen ist.

Wegweiser: Informationsseiten erstellen, falls Sie dafür eine neue Seite anlegen

Schritt 8: Hinweise zum Bezahlen einblenden (optional)

Klarna stellt über sein On-site Messaging fertige Bausteine bereit, die Ratenbeispiele oder Erklärungen zum Rechnungskauf anzeigen, beispielsweise direkt am Produkt. Die Bausteine holen Sie sich im Klarna-Händlerportal und setzen sie an den gewünschten Stellen ein. Es sind zwei Arten:

ein JavaScript-Baustein mit Ihrer ClientID, der die Inhalte lädt
je ein Platzhalter-Baustein an jeder Stelle, an der etwas erscheinen soll

Schritt 9: Testen

Setzen Sie TestMode = yes im Abschnitt <PaymentKlarna-Txt> und rufen Sie den Shop mit drei Parametern auf.

https://www.ihre-shop-url.de/?test=on&payment-test=on&klarnaclearing-test=on

Sind Ihre Skripte im Template zusätzlich mit {ST-DesignTest} geklammert, brauchen Sie auch den Design-Testmodus:

https://www.ihre-shop-url.de/?test=on&design-test=on&payment-test=on&klarnaclearing-test=on

Testkundendaten stellt Klarna in seiner Dokumentation bereit. Beim Ein- und Ausschalten dieses Testmodus verwirft der Shop die laufende Sitzung. Ein Warenkorb, den Sie im Testmodus aufgebaut haben, ist danach leer. Während der Einrichtung hilft es, die Antworten von Klarna sichtbar zu machen. Die Rückgabefunktionen im Skript sind im Beispiel oben leer gelassen, dort lässt sich eine Ausgabe in die Browserkonsole einsetzen. Wegweiser: Testmodi des Shops ein- und ausschalten

Vor dem Livegang

Der Livegang verlangt Anpassungen an der Schnittstelle. Die WEBSALE-Systemadministration muss die Testdaten durch die Livedaten ersetzen. Stimmen Sie den Termin ab, bevor Sie umschalten.

Drei Dinge gehören vorher aus dem Template und der Konfiguration entfernt:

Was	Wo
Ausgaben in die Browserkonsole	in allen Rückgabefunktionen des Klarna-Skripts
Klammerungen mit `{ST-DesignTest}` um die Skripte	auf der Bestellübersicht
`TestMode = yes`	im Abschnitt `<PaymentKlarna-Txt>`, auf `no` setzen

Wegweiser

Wie der Bezahlvorgang abläuft

Schritt 1: Vertrag und Freischaltung

Schritt 2: Zahlungsart anlegen

Schritt 3: Hinweismeldungen hinterlegen

Schritt 4: Widget auf der Bestellübersicht

Schritt 5: Widget per AJAX öffnen (optional)

Schritt 6: Bestätigungsmail ergänzen

Schritt 7: Hinweis zu Retouren

Schritt 8: Hinweise zum Bezahlen einblenden (optional)

Schritt 9: Testen

Vor dem Livegang

Verwandte Themen

​Wie der Bezahlvorgang abläuft

​Schritt 1: Vertrag und Freischaltung

​Schritt 2: Zahlungsart anlegen

​Schritt 3: Hinweismeldungen hinterlegen

​Schritt 4: Widget auf der Bestellübersicht

​Schritt 5: Widget per AJAX öffnen (optional)

​Schritt 6: Bestätigungsmail ergänzen

​Schritt 7: Hinweis zu Retouren

​Schritt 8: Hinweise zum Bezahlen einblenden (optional)

​Schritt 9: Testen

​Vor dem Livegang

​Verwandte Themen

Wie der Bezahlvorgang abläuft

Schritt 1: Vertrag und Freischaltung

Schritt 2: Zahlungsart anlegen

Schritt 3: Hinweismeldungen hinterlegen

Schritt 4: Widget auf der Bestellübersicht

Schritt 5: Widget per AJAX öffnen (optional)

Schritt 6: Bestätigungsmail ergänzen

Schritt 7: Hinweis zu Retouren

Schritt 8: Hinweise zum Bezahlen einblenden (optional)

Schritt 9: Testen

Vor dem Livegang

Verwandte Themen