Hier erfahren Sie, wie die Payment Request API funktioniert.
Payment Request API
Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss er auf der Website Zahlungsinformationen und optional weitere Informationen wie Versandpräferenzen angeben. Mit der Payment Request API (PR API) ist das ganz einfach und schnell möglich.
Grundstruktur
Für das Erstellen eines PaymentRequest-Objekts sind zwei Parameter erforderlich: Zahlungsmethoden und Zahlungsdetails. Optional ist außerdem ein dritter Parameter payment options. 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 der unterstützten Zahlungsmethoden in einer Arrayvariablen. Jedes Element im Array besteht aus zwei Komponenten: supportedMethods und optional data.
Für supportedMethods muss der Händler eine Zahlungsmethoden-ID angeben, z. B. https://bobbucks.dev/pay. Das Vorhandensein und der Inhalt von data hängen vom Inhalt von supportedMethods und vom Design des Anbieters der Zahlungs-App ab.
Beide Informationen sollten vom Anbieter der Zahlungs-App bereitgestellt 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. Er enthält den erforderlichen Wert total, der den vom Kunden zu zahlenden Gesamtbetrag angibt. Optional können mit diesem Parameter auch die gekauften Artikel aufgeführt werden.
Im folgenden Beispiel sind die optional gekauften Artikel (in diesem Fall nur ein Artikel) und der erforderliche Gesamtbetrag zu sehen. In beiden Fällen wird die Währungseinheit für jeden 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' }
}
};
Prüfen, ob die Zahlungsmethode verfügbar ist
Chrome prüft beim Erstellen eines PaymentRequest-Objekts, ob der Nutzer und die Umgebung für die Zahlung bereit sind.
Rufe canMakePayment() auf, bevor du den Zahlungsvorgang aufrufst, um zu prüfen, ob der Nutzer und die Umgebung für die Zahlung bereit sind. Wenn der Browser mindestens eine im Objekt angegebene Zahlungsmethode unterstützt, wird beim Aufrufen von canMakePayment() true zurückgegeben.
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() in der 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, wodurch die Benutzeroberfläche der Zahlungs-App angezeigt wird.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Wie die Benutzeroberfläche der Zahlungs-App aussieht, liegt im alleinigen Ermessen des Anbieters der Zahlungs-App. Nachdem der Kunde einer Zahlung zugestimmt hat, wird ein JSON-Objekt mit allen erforderlichen Informationen zur Überweisung an den Händler übergeben. Der Händler kann sie dann an den PSP senden, um die Zahlung zu verarbeiten.
Schließen Sie die Benutzeroberfläche für Zahlungsanfragen abschließend mit response.complete('success') oder response.complete('fail') ab, je nachdem, welches Ergebnis der PSP zurückgibt.