Klarna Payments wird direkt – ohne Payment-Service-Provider – in Ihren Onlineshop integriert. Klarna bietet mehrere Zahlungsmethoden an:

▪Sofortüberweisung (per Online-Banking, Lastschrift oder Kreditkarte)

▪Kauf auf Rechnung (Buy now pay later)

▪Ratenzahlung

Die Zahlung wird über Klarna abgewickelt und nicht über den Onlineshop. Im Klarna-Händlerportal können Sie alle Transaktionen einsehen und verwalten. Klarna übernimmt das volle Betrugs- und Kreditrisiko für Verkäufer und bietet gleichzeitig den Kunden umfassenden Käuferschutz.

Inhalt

1 Funktionsweise

2 Integration Klarna

 

1 Funktionsweise

Nach dem Auswählen der Zahlungsart und dem Klicken auf "Zahlungspflichtig bestellen" erscheint ein Popup-Fenster von Klarna. Dort meldet sich der Käufer mit seinen Klarna Zugangsdaten an und bestätigt die Zahlung. Danach wird die HTML-Bestelleingangsbestätigungsseite (ws_confirm.htm) angezeigt.

Der div-Container mit den Klarna-Zahlungsarten kann optional bereits auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) angezeigt werden, er muss aber immer auf der Bestellübersichtsseite (ws_place_order.htm) integriert werden.

 

Zusätzliche Informationen zur Integration finden Sie auch auf der Entwicklerseite von Klarna: https://docs.klarna.com/

 

2 Integration Klarna

Voraussetzung

Sie benötigen einen Händlervertrag mit Klarna. Bitte wenden Sie sich hierzu an Ihren Klarna-Ansprechpartner.

Schritt 1: Freischaltung/Aktivierung

Klarna Payments muss durch WEBSALE freigeschaltet werden. Hierzu benötigen wir die relevanten Daten und Parameter (Username/Password, URL, MerchantID, UUID etc.) von Klarna. Kontaktieren Sie bitte Ihren WEBSALE-Ansprechpartner.

Schritt 2: Aktivieren der Zahlungsart und definieren der gewünschten Einstellungen in der Shopkonfiguration

Fügen Sie den Abschnitt <PaymentKlarna-Txt> in Ihre Shopkonfiguration shop.config ein.

<PaymentKlarna-Txt>
   Allow                      = yes
   TestMode                   = yes
   Name                       = Klarna Payments
   NameSuffix                 =
   ImgOnClick                 = selectPaymentImage('~ID~');
   RadioOnClick               = selectPayment('~ID~');
   Img                        = <logo-XYZ.png>
   DelivererID-List           = <Ihre Versandarten-IDs>
   ...
   KlarnaLocaleCode           = de-DE
   ShowKlarnaAtPayDeliv       = yes  # yes: aktiviert das JavaScript und zeigt die erweiterten Infos zu Zahlungsarten auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm).
                                     # no (Standard): die Daten werden erst auf der Bestellübersichtsseite (ws_place_order.htm) von WEBSALE an Klarna übergeben.
 
   AdditionProductName        = Zusatzkosten                 # optional
   ReductionProductName       = Abzüglich gewährter Rabatte  # optional
   ...
   # optionale Parameter zum Anpassen des Klarna-Widgets
   KlarnaDesignColorBorder           = #FF9900
   KlarnaDesignColorBorderSelected   =
   KlarnaDesignColorDetails          =
   KlarnaDesignColorText             =
   KlarnaDesignRadiusBorder          =
   ...
</PaymentKlarna-Txt>

Referenz: Abschnitt PaymentKlarna-Txt

Die für alle Zahlungsarten möglichen Standard-Parameter finden Sie unter:

Referenz: Abschnitt PaymentXXX-Txt

Schritt 3: Definieren von Hinweismeldungen

Ergänzen Sie in der Shopkonfiguration shop.config im Abschnitt <NotifyMessages-Txt> folgende Hinweismeldungen:

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

Referenz: Abschnitt NotifyMessages-Txt

Schritt 4: Die von Klarna zur Verfügung gestellten Zahlungsarten auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) anzeigen lassen (optional)

Sie können die Auswahl der Klarna-Zahlungsarten bereits auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) anbieten.

Fügen Sie folgendes Skript mit der Klammerung {KLARNA-ShowKlarnaAtPayDeliv} ins Template ein.

<body>
...
{ST-DesignTest}
   {KLARNA-ShowKlarnaAtPayDeliv}
      <script>
      window.klarnaAsyncCallback = function () {
 
         // This is where you start calling Klarna's JS SDK functions
         Klarna.Payments.init({
            client_token: '~KLARNA-ClientToken~'
         })
         Klarna.Payments.load({
            // Die folgende ID muss "#ws_klarna" lauten!
            container: '#ws_klarna'
         },
 
         function (res) {
            // nur zum Testen
            console.log(res);
         })
 
      };
      </script>
      <script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
   {/KLARNA-ShowKlarnaAtPayDeliv}
{/ST-DesignTest}
...
</body>

Referenz: KLARNA-ShowKlarnaAtPayDeliv

Referenz: KLARNA-ClientToken

Wenn Sie die Anzeige der Zahlungsarten mit Einzelpositionierung nutzen (PAY-Data-Tags/Einzelpositionierung der Zahlungsarten), müssen Sie den div-Container ws_klarna auf dem Template an der gewünschten Stelle integrieren:

{PAY-Data}
   {@PAY-Data}
      ...
      ~DC-FPPayDataIndex_set($PAY-Data_index$)~
      {DC-FPPayDataIndex(35)}
         {PAY-Data_selected}
            <div id="ws_klarna"></div>
         {/PAY-Data_selected}
      {/DC-FPPayDataIndex(35)}
      ...
   {/@PAY-Data}
{/PAY-Data}

Bei Verwendung von WS-PaymentFields wird der div-Container ws_klarna automatisch erzeugt.

Referenz: WS-PaymentFields

Schritt 5: Bestellübersichtsseite (ws_place_order.htm) ergänzen

Fügen Sie im <body> der Bestellübersichtsseite (ws_place_order.htm) innerhalb der <form action="~FORM-PlaceOrder~"> folgenden Code ein.

Der div-Container für die Anzeige und der Token als Hidden-Field ist zwingend erforderlich, auch wenn Sie die Auswahl einer Klarna-Zahlungsart bereits auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) realisiert haben.

<body>
...
<form action="~FORM-PlaceOrder~" id="<Ihre-FORM-ID>" method="post">
   ...
   {ST-Payment(35)}
      <input name="~KLARNA-AuthTokenName~" id="ws_auth_token_id" type="hidden">
      <div id="klarna_div_id"> </div>
   {/ST-Payment(35)}
   ...
   <button name="~BT-PlaceOrder~" type="submit">Zahlungspflichtig bestellen</button>
   ...
</form>
...
 
</body>

Referenz: KLARNA-AuthTokenName

Referenz: BT-PlaceOrder

Referenz: ST-Payment

Beim Klick auf den "Zahlungspflichtig bestellen"-Button muss der Authorize-Aufruf durchgeführt werden, bevor das Formular übermittelt wird.

Fügen Sie vor dem schließenden </body>-Tag das folgende Javascript hinzu.

<body>
...
<form action="~FORM-PlaceOrder~" id="<Ihre-FORM-ID>" method="post">
   ...
   ...
</form>
...
 
{ST-Payment(35)}
   <script type="application/javascript">
      window.klarnaAsyncCallback = function () {
         Klarna.Payments.init({
            client_token: '~KLARNA-ClientToken~'
         })
         Klarna.Payments.load ({
            container: '#klarna_div_id',
            payment_method_category: 'klarna'
         },
         function (res) {
            // nur zum Testen
            console.log(res);
         })
      }
      $("[name='~BT-PlaceOrder~']").click(function(e) {
         e.preventDefault();
         Klarna.Payments.authorize({
            payment_method_category: "klarna"
         },
         JSON.parse('~WS-JSEncoding($KLARNA-OrderDataJSON$)~'),
         function(res) {
            if(res.authorization_token){
               // Token muss in Input-Feld gespeichert werden!
               $("#ws_auth_token_id").val(res.authorization_token);
               $("#<Ihre-FORM-ID>").submit();
            }
         })
      });
   </script>
   <script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/ST-Payment(35)}
 
...
</body>

Referenz: WS-JSEncoding()

Referenz: KLARNA-ShowKlarnaAtPlaceOrder

Referenz: KLARNA-ClientToken

Referenz: KLARNA-OrderDataJSON

Schritt 6: Anpassung der Bestelleingangsbestätigungs-E-Mail (mail_customer_order.htm)

Ergänzen Sie die Bestelleingangsbestätigungs-E-Mail (mail_customer_order.htm) mit dem Hinweis, dass die Zahlung über Klarna abgerechnet wird und nicht direkt über den Onlineshop.

...
{ST-Payment(35)}
   Hinweise zur Zahlung mit Klarna
   Die Zahlung wird durch unseren Partner <a href="https://www.klarna.com/de/">Klarna</a> abgewickelt.
   Sobald Ihre Waren versandt sind, erhalten Sie Anweisungen von Klarna, wie Sie Ihre Zahlung abschließen können.
   Sie können all Ihre Einkäufe über <a href="https://app.klarna.com/login">Klarna.com</a> bzw.
   die <a href="https://app.klarna.com/login">Klarna App</a> verwalten und sogar mit nur einem Klick bezahlen.
{/ST-Payment(35)}
...

 

Schritt 7: Klarna Retoureninformationen

Zusätzlich soll im Onlineshop eine Information zum Retourenprozess mit Klarna integriert werden. Diese Erklärung kann am besten über einen Link im Footer erreichbar sein.

Integrieren dazu den folgenden Text auf die Retouren- und/oder Rücksende-Informationsseite des Shops.

Wie kann ich meine Klarna Rechnung bei einer Retoure pausieren?
Befolge die Retourenanweisungen (und gib dein Paket kostenlos an einem DHL-Paketshop, an einer DHL-Packstation oder in einem Hermes PaketShop zurück). Öffne nun die Klarna Webseite (https://app.klarna.com/login) oder App (http://app.klarna.com/openapp/). Wähle dort die entsprechende Bestellung aus und klicke auf “Retoure anmelden”. Deine Retoure ist jetzt angemeldet. Klarna pausiert deine Rechnung während du das Produkt an uns zurückschickst. Sobald es bei uns angekommen ist, aktualisieren wir deine Klarna Rechnung.

Bei Bedarf legen Sie eine "statische" Informationsseite, ein neues Template für die Retouren- und Rücksende-Informationen des Shops an.

Wegweiser: Informationsseiten erstellen

Schritt 8: Klarna FAQs (optional)

Sie haben die Möglichkeit kleine Hinweise über das Bezahlen mit Klarna anzuzeigen. Die Inhalte stellt Klarna dynamisch über das On-site Messaging zur Verfügung (siehe: https://www.klarna.com/de/verkaeufer/on-site-marketing-platform/ ).

Melden Sie sich dazu im Klarna Händlerportal an, laden sich die entsprechenden Code-Snippets herunter und integrieren diese an die gewünschten Stellen im Shop.

Im Regelfall handelt es sich dabei um

•Javascript-Snippets mit der ClientID für das Laden der dynamischen Inhalte

•verschiedene Placement-Snippets, in die die dynamischen Inhalte geladen werden

Mehr Informationen zur Integration finden Sie auf der Entwicklerseite von Klarna: https://docs.klarna.com/on-site-messaging/

Schritt 9: Testen der Zahlungsart Klarna

Um Klarna Payments in Ihrem Shop zu testen, stellt Ihnen WEBSALE einen Zahlungsarten-Testmodus zur Verfügung. Die Zahlungsart ist dann nur im Testmodus sichtbar. Der Produktivbetrieb Ihres Shops wird dadurch nicht beeinflusst.

Achten Sie darauf, dass der Parameter TestMode im Abschnitt <PaymentKlarna-Txt> Ihrer Shopkonfiguration shop.config auf yes steht.
Referenz: Abschnitt PaymentKlarna-Txt

Testdaten für Klarna finden Sie hier: https://docs.klarna.com/resources/test-environment/sample-customer-data/#germany

Beispiel für den Aufruf des Shops:

http://www.xyz.de/?test=on&payment-test=on&klarnaclearing-test=on

Wenn im Template Javascripte etc. auch mit ST-Design-Test geklammert sind, muss zusätzlich der Design-Testmodus aktiviert werden:

http://www.xyz.de/?test=on&design-test=on&payment-test=on&klarnaclearing-test=on

Während der Testphase können Sie die JavaScripte mit folgender Funktion testen, um sich Protokollmeldungen in der Konsole Ihres Browsers anzeigen zu lassen:

function(res) {
   console.log(res);
}

Mehr Informationen dazu finden Sie in der Klarna Dokumentation: https://docs.klarna.com/klarna-payments/other-actions/finalize-an-authorization/

Schritt 9: Klarna für den Produktivbetrieb aktivieren

Um die Zahlungsart Live zu nehmen, entfernen Sie die ST-DesignTest-Klammerungen auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) (siehe Schritt 4) und setzen in der Shopkonfiguration shop.config den Parameter TestMode auf no.

<PaymentKlarna-Txt>
   ...
   TestMode    = no
   ...
</PaymentKlarna-Txt>

Wegweiser: Testmodi des Shops ein-/ausschalten

Falls Sie die Test-Funktion console.log(res); (siehe Schritt 4 und 5) verwendet haben, entfernen Sie diese vor dem Livegang bitte ebenfalls oder stellen Sie sicher, dass sie mit ST-DesignTest geklammert ist.

Haben Sie alle Schritte durchgeführt, ist die Zahlungsart "Klarna Payments" in Ihrem Shop integriert und aktiv.