Klarna Payments
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
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 wird immer auf der Bestellübersichtsseite (ws_place_order.htm) integriert.
Zusätzliche Informationen zur Integration finden Sie auch auf der Entwicklerseite von Klarna: https://docs.klarna.com/
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
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: Bestellübersichtsseite (ws_place_order.htm) ergänzen
Wenn der Käufer auf den BT-PlaceOrder-Button klickt, befindet er sich im KlarnaPayments-Tunnel. Der Käufer gelangt, wie bei Express-Bezahlarten, nur noch auf das PlaceOrder-Template.
Mit dem Button BT-KlarnaPayments_cancel kann der Bezahlvorgang abgebrochen werden.
Das Klarna Widget wird somit immer auf der Bestellübersichtsseite (ws_place_order.htm) verwendet.
Fügen Sie innerhalb der <form action="~FORM-PlaceOrder~"> den Button zum Abbrechen der Zahlung ein und ergänzen das Template mit dem Klarna-Script.
Hinweis: |
|
|
In den Codebeispielen wird die ID des Formulars angegeben. Diese muss an Ihre bestehende ID entsprechend angepasst werden. |
<form action="~FORM-PlaceOrder~" method="post" id="<Ihre-FORM-ID>" ...>
...
{ST-KlarnaPayments}
<button type="submit" name="~BT-KlarnaPayments_cancel~">Zahlung abbrechen</button>
{/ST-KlarnaPayments}
...
</form>
{ST-KlarnaPayments}
<div id="klarna_div_id"> </div>
<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) {
console.log(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) {
console.log("error: " + error)
}
});
</script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/ST-KlarnaPayments}
Referenz: FORM-PlaceOrder
Referenz: ST-KlarnaPayments
Referenz: BT-KlarnaPayments_cancel
Referenz: KLARNA-ClientToken
Referenz: WS-JSEncoding()
Referenz: KLARNA-OrderDataJSON
Referenz: KLARNA-AuthCallbackURL
Referenz: KLARNA-AuthTokenName
Referenz: KLARNA-ObsoleteMode
Optional: Klarna Widget per AJAX öffnen
Damit der Kunde nicht zwei mal den Kaufen-Button drücken muss, gibt es die Möglichkeit das Klarna Widget per AJAX zu öffnen.
<form action="~FORM-PlaceOrder~" method="post" id="<Ihre-FORM-ID>">
...
{ST-Payment(35)}
<div id="klarna_cancel" style="display: none">
Sie befinden sich im Klarna Checkout. Möchten Sie den Checkout abbrechen und zurück zur normalen Bestellübersicht?
<button type="submit" name="~BT-KlarnaPayments_cancel~">Abbrechen</button>
</div>
{/ST-Payment(35)}
...
</form>
{ST-Payment(35)}
<script type="application/javascript">
function successCallback() {}
function errorCallback() {}
$("button[name='~BT-PlaceOrder~']").click(function(e) {
e.preventDefault();
return fetch('~FORM-PlaceOrder~', {
method: 'post',
headers: {
'Content-Type': 'application/WS-target~WS-Charset~xWS-target',
},
body: $('#form_place_order').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')) {
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) {
// klarna sdk error
}
})
}
else {
// create klarna session failed
}
})
});
{ST-KlarnaPayments}
// Shop wurde im Klarna-Tunnel aufgerufen. Kunde muss Bezahlvorgang abbrechen können.
$("#klarna_cancel").show();
{/ST-KlarnaPayments}
</script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
{/ST-Payment(35)}
...
Schritt 5: 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)}
...
Referenz: ST-Payment()
Schritt 6: 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 7: 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 8: 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.
Hinweis zum Livegang |
|
|
Stimmen Sie sich mit WEBSALE für den Livegang ab, da auch Anpassungen an der Schnittstelle vorgenommen werden müssen. Die Testdaten müssen von unserer Systemadministration durch Livedaten ersetzt werden. |
Haben Sie alle Schritte durchgeführt, ist die Zahlungsart "Klarna Payments" in Ihrem Shop integriert und aktiv.