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

> Wie Sie Klarna Payments ohne Payment-Service-Provider in WEBSALE V8s einbinden, das Klarna-Widget auf der Bestellübersicht einbauen und die Zahlungsart testen.

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

![Screendesign Klarna 60prozent (1)](https://mintcdn.com/websaleag-44ee7ea6/qbW8uRSswcI46vuk/images/screendesign_klarna-60prozent-\(1\).jpg?fit=max\&auto=format\&n=qbW8uRSswcI46vuk\&q=85\&s=c8ac92d3d8b41d50e3c195c02630d7bc)

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

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)

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

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<PaymentKlarna-Txt>
   KlarnaDesignColorBorder         = #FF9900
   KlarnaDesignColorBorderSelected =
   KlarnaDesignColorDetails        =
   KlarnaDesignColorText           =
   KlarnaDesignRadiusBorder        =
</PaymentKlarna-Txt>
```

Referenz: [Abschnitt PaymentKlarna-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md#paymentklarna-txt) · [Abschnitt PaymentXXX-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)

## Schritt 3: Hinweismeldungen hinterlegen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/texte-und-meldungen.md#notifymessages-txt)

## Schritt 4: Widget auf der Bestellübersicht

Auf `ws_place_order.htm` kommen zwei Dinge hinzu: der Abbruchknopf **innerhalb** von [`FORM-PlaceOrder`](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare#bestellablauf) und das Widget-Skript **außerhalb**.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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`.

> [!WARNING]
>
> Die Formular-ID `place_order_form` ist ein Beispiel. Tragen Sie die ID ein, die Ihr Formular tatsächlich trägt.

Referenz: [ST-KlarnaPayments](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) · [BT-KlarnaPayments\_cancel](https://dokumentation.websale.de/v8s/referenz/tags/bt/zahlungsarten.md#bt-klarnapaymentscancel) · [KLARNA-ClientToken](https://dokumentation.websale.de/v8s/referenz/tags/klarna-payments.md#das-widget-anzeigen) · [KLARNA-OrderDataJSON](https://dokumentation.websale.de/v8s/referenz/tags/klarna-payments.md#die-tags-im-uberblick) · [WS-JSEncoding()](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#die-tags-im-uberblick)

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

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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()](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md)

## 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](https://dokumentation.websale.de/v8s/informationsseiten/informationsseiten-erstellen.md)

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

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
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:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
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](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md)

## Vor dem Livegang

> [!WARNING]
>
> 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 |

## Verwandte Themen

* Wegweiser: [Zahlungsarten anlegen, für die allgemeinen Parameter und die Ausgabe im Template](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/zahlungsarten-anlegen.md)
* Wegweiser: [Billie Rechnungskauf, für den B2B-Rechnungskauf über dieselbe Anbindung](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)
* Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md)


## Related topics

- [KLARNA- (Klarna Payments)](https://dokumentation.websale.de/v8s/referenz/tags/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)
- [Paymorrow](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/paymorrow.md)


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