Was ist ein Express-Checkout-Button?
Unsere Express-Checkout-Buttons werden in der Regel auf der Produktseite platziert, um die Aufmerksamkeit auf die verfügbare Zahlungsoption zu lenken und es dem Kunden zu ermöglichen, direkt von der Produktseite den Zahlungsprozess zu starten.
Dies kann dem Nutzer auch helfen, Zeit bei der Dateneingabe zu sparen, da dem Zahlungsanbieter Name und Adresse des Kunden bereits vorliegen können - der Kunde muss sich also nach dem Klick auf den jeweiligen Express-Checkout-Button nur noch in sein Konto beim Zahlungsanbieter einloggen und kann dann seine bereits beim Anbieter gespeicherten Daten wiederverwenden, anstatt sie manuell einzugeben.
Express-Buttons können Ihnen helfen, die Conversion in Ihrem Shop zu steigern, da sie dem Kunden eine schnellere Möglichkeit bieten, seine Bestellung abzuschließen.
Für welche Zahlungsoptionen ist der Express-Checkout-Button derzeit verfügbar?
Unsere Widgets sind derzeit für Ivy, Apple Pay und Google Pay verfügbar.
Wo finde ich die Widgets und wie kann ich sie einsetzen?
Öffnen Sie die Checkout-App in Ihrem payever-Konto:
Nachdem die Checkout-App geöffnet wurde, klicken Sie auf die Registerkarte Channels:
Dann auf Button-Widget klicken:
Sie landen nun auf diesem Bildschirm, der Ihnen eine Vorschau des Buttons zeigt:
Unter Payments können Sie auswählen, für welche Zahlungsart Sie den Express-Button verwenden möchten:
Unter General müssen Sie die folgenden URLs eingeben:
-
Success URL - die URL, zu der der Kunde nach einer erfolgreichen Zahlung weitergeleitet werden soll (in der Regel ist das eine Bestellbestätigungsseite oder ähnliches)
Pending URL (optional) - die URL, zu der der Kunde nach einem unklaren/ nicht endgültigen Ausgang der Zahlung weitergeleitet werden soll (nur für einige Zahlungsoptionen relevant - für Ivy z. B. ist dies nicht erforderlich)
Cancel URL - die URL, an die der Kunde weitergeleitet werden soll, wenn er sich entscheidet, den Zahlungsvorgang abzubrechen (normalerweise empfehlen wir, ihn zu der Produktseite zurückzuschicken, von der er gekommen ist)
Failure URL - die URL, an die der Kunde weitergeleitet werden soll, wenn die Zahlung fehlschlägt (in der Regel empfehlen wir, den Kunden auf die Produktseite zurückzuschicken, von der er gekommen ist)
Notice URL - dies ist die URL, an die wir Ihnen Benachrichtigungen zur Statusaktualisierung senden, wenn eine Transaktion erstellt wird oder ihren Status ändert. Diese Benachrichtigungen enthalten alle Details zum Kunden (Name, Adresse, E-Mail, etc.) und zur Zahlung (Betrag/Preis, etc.) sowie den aktuellen Status der Transaktion - auf Basis dieser Informationen können Sie dann nach erfolgreicher Zahlung eine Bestellung in Ihrem Shopsystem anlegen. Lesen Sie hier mehr über unsere Benachrichtigungen: https://docs.payever.org/api/payments/v2/getting-started-v2/notifications
Wenn Sie damit fertig sind, klicken Sie in der oberen linken Ecke auf Get Code und kopieren Sie diesen:
Der generierte Code sieht dann etwa so aus:
<div class="payever-widget-finexp" data-widgetid="98r631cb06-941f-4ad3-801f-34c10eec7385" data-checkoutid="b0hr679c-15eb-5aff-8c98-7751ef9e448d" data-business="815c5953-6881-11e7-9835-35340073a0b6" data-type="button" data-reference="order-id" data-amount="50000.25"></div>
<script>
var script = document.createElement('script');
script.src = 'https://widgets.staging.devpayever.com/finance-express/widget.min.js';
script.onload = function() {
PayeverPaymentWidgetLoader.init(
'.payever-widget-finexp'
);
};
document.head.appendChild(script);
</script>
Kopieren Sie diesen Code an die entsprechende Stelle in Ihrem Shop - in der Regel ist dies die Vorlage Ihrer Produktseite - und ersetzen Sie die Beispielwerte in data-amount und order-id durch Variablen Ihres Shops, die den Preis des Artikels und die Kennung, die Sie mit der Zahlung verknüpfen möchten, darstellen.
Das obige Snippet (mit data-amount und order-id) ist das Minimum an Informationen, die uns zur Verfügung gestellt werden müssen, um eine Zahlung erfolgreich zu erstellen. Es gibt jedoch noch viele weitere optionale Felder, die Sie ausfüllen können, um uns zusätzliche Informationen zu übermitteln, wie z. B.:
- Versanddetails & Versandgebühren (Sie können einen Preis und einen Namen für die Versandoption senden - Sie können das Namensfeld verwenden, um z.B. die Versandart oder das Transportunternehmen zu beschreiben)
- Details zum Warenkorb (detailliertere Produktinformationen, wie z.B. Artikelname, Artikelbeschreibung, Artikelbezeichnung, Preis, Menge, etc. können im Daten-Warenkorb gesendet werden). Bitte beachten Sie, dass der Gesamtwert Ihres Warenkorbs (zuzüglich eventueller Versandkosten) mit dem Wert in data-amount übereinstimmen sollte, da eine Nichtübereinstimmung zu Fehlern oder Ablehnungen bei einigen unserer angeschlossenen Zahlungsanbieter führen kann.
- Sprache und Währung (wenn Ihr Shop in mehreren Ländern tätig ist, können Sie uns die Sprache des Kunden mitteilen, indem Sie einen zweistelligen ISO-Ländercode an data-locale senden und die Währung mit einem dreistelligen ISO-Code in data-cart-value bestimmen, z. B. "de" und "EUR"). Wenn Sie kein Gebietsschema und keinen Warenkorbwert senden, verwenden wir automatisch die Standardsprache und die Standardwährung, die in Ihrem payever-Konto eingerichtet sind.
- Versand- und Rechnungsadresse (wenn Sie den Express-Button auf einer Produktseite platzieren, kennen Sie die Daten des Kunden in der Regel noch nicht - wenn Sie sie jedoch bereits haben, z.B. weil der Nutzer in ein Kundenkonto eingeloggt ist, in dem seine Daten gespeichert sind, können Sie sie als data-billingaddress und data-shippingaddress mitschicken)
Nachfolgend finden Sie ein weiteres Beispiel für einen Code, der so geändert wurde, dass er alle oben beschriebenen optionalen Details enthält:
<div class="payever-widget-finexp"
data-widgetid="98r631cb06-941f-4ad3-801f-34c10eec7385"
data-checkoutid="b0hr679c-15eb-5aff-8c98-7751ef9e448d"
data-business="815c5953-6881-11e7-9835-35340073a0b6"
data-type="button"
data-reference="order-id"
data-amount="100.00"
data-billing_address='
{
"salutation": "",
"first_name": "Test",
"last_name": "Test',
"street": "Feldstrasse 21",
"zip": "12345",
"country": "DE",
"city": "Hamburg"
}'
data-shipping_address='
{
"salutation": "",
"first_name": "Test",
"last_name": "Test',
"street": "Feldstrasse 21",
"zip": "12345",
"country": "DE",
"city": "Hamburg"
}'
data-shippingoption='{"name":"DHL", "price": 10}'
data-cart='
[{
"amount":90,
"description":"Lore Ipsum",
"identifier":"263454",
"quantity":1,
"name":"Sunglasses",
"price":90,
"thumbnail":"http://wordpress59rc.mamp:8888/wp-content/uploads/2022/01/sunglasses-2.jpg",
"unit":"EACH"
}]'
></div>
<script>
var script = document.createElement('script');
script.src = 'https://widgets.staging.devpayever.com/finance-express/widget.min.js';
script.onload = function() {
PayeverPaymentWidgetLoader.init(
'.payever-widget-finexp'
);
};
document.head.appendChild(script);
</script>
Wenn Sie sich dafür entscheiden, eine der nicht obligatorischen zusätzlichen Angaben in Ihren Code aufzunehmen, leiten wir diese Informationen an den Zahlungsanbieter weiter und senden sie Ihnen auch mit jeder Benachrichtigung zurück, die wir an Ihre Notice-url senden.