Hier erfahren Sie auf allgemeiner Ebene, wie die Payment Request API funktioniert.
Zahlungsanforderungs-API
Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss der Kunde von der Website aufgefordert werden, Zahlungsinformationen und optional weitere Informationen wie Versandpräferenz anzugeben. Dies lässt sich einfach und schnell mithilfe der Payment Request API (PR API) umsetzen.
Grundstruktur
Zum Erstellen eines PaymentRequest
-Objekts sind zwei Parameter erforderlich: Zahlungsmethoden und Zahlungsdetails. Darüber hinaus ist ein dritter Parameter für Zahlungsoptionen optional. Eine einfache Anfrage könnte so erstellt werden:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Sehen wir uns an, wie die einzelnen Parameter erstellt und verwendet werden.
Zahlungsmethoden
Der erste Parameter, paymentMethods, ist eine Liste unterstützter Zahlungsmethoden in einer Arrayvariablen. Jedes Element im Array besteht aus zwei Komponenten: supportedMethods
und optional data
.
Für supportedMethods
muss der Händler eine Zahlungsmethode wie https://bobbucks.dev/pay
angeben. Ob und der Inhalt von data
vorhanden ist, hängt vom Inhalt von supportedMethods
und vom Design des Anbieters der Zahlungs-App ab.
Beide Informationen sollten vom Anbieter der Zahlungs-App zur Verfügung gestellt werden.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Zahlungsdetails
Der zweite Parameter, paymentDetails, wird als Objekt übergeben und gibt Zahlungsdetails für die Transaktion an. Sie enthält den erforderlichen Wert total
, der den Gesamtbetrag angibt, der vom Kunden fällig ist. Mit diesem Parameter können optional auch die gekauften Artikel aufgeführt werden.
Im folgenden Beispiel wird die Liste der optionalen gekauften Artikel (in diesem Fall nur ein Artikel) und der erforderliche Gesamtbetrag angezeigt. In beiden Fällen wird die Währungseinheit mit jedem einzelnen Betrag angegeben.
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
Verfügbarkeit der Zahlungsmethode prüfen
Bevor das Zahlungsverfahren aufgerufen wird, kann der Händler prüfen, ob der Nutzer und die Umgebung zum Ausführen einer Zahlung bereit sind.
Durch den Aufruf von canMakePayment()
wird geprüft, ob der Browser mindestens eine im Objekt angegebene Zahlungsmethode unterstützt.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
Weitere Informationen zu PaymentRequest.canMakePayment() auf MDN
Die Methode show()
Nachdem Sie die beiden Parameter festgelegt und das request
-Objekt wie oben gezeigt erstellt haben, können Sie die Methode show()
aufrufen. Sie zeigt die Benutzeroberfläche der Zahlungs-App an.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Wie die Benutzeroberfläche einer Zahlungs-App aussieht, bleibt allein vom Anbieter der Zahlungs-App festgelegt. Nachdem der Kunde einer Zahlung zugestimmt hat, wird ein JSON-Objekt an den Händler übergeben, das alle erforderlichen Informationen für die Überweisung enthält. Der Händler kann sie dann an den Premium-KMU-Partner senden, damit die Zahlung dort verarbeitet wird.
Schließlich können Sie die Benutzeroberfläche für Zahlungsanfragen schließen, indem Sie den Vorgang mit response.complete('success')
oder response.complete('fail')
ausführen, je nachdem, welches Ergebnis der Zahlungsdienstleister zurückgibt.