Allgemeine Informationen zur Funktionsweise der Payment Request API.
Payment Request API
Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss er auf der Website aufgefordert werden, Zahlungsinformationen und optional weitere Informationen wie Versandpräferenz anzugeben. Mit der Payment Request API (PR API) geht das einfach und schnell.
Grundstruktur
Für das 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 wie folgt 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 ID der Zahlungsmethode wie https://bobbucks.dev/pay angeben. Die Existenz und der Inhalt von data hängen vom Inhalt von supportedMethods und dem Design des Zahlungs-App-Anbieters 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 vom Kunden ausstehenden Gesamtbetrag angibt. Mit diesem Parameter können auch optional die gekauften Artikel aufgelistet werden.
Im folgenden Beispiel werden die optionale Liste der gekauften Artikel (in diesem Fall nur ein Artikel) und der erforderliche Gesamtbetrag angezeigt. In beiden Fällen wird mit jedem einzelnen Betrag die Währungseinheit 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
Chrome prüft beim Erstellen eines PaymentRequest-Objekts, ob der Nutzer und die Umgebung für Zahlungen bereit sind.
Um zu prüfen, ob der Nutzer und die Umgebung zum Ausführen einer Zahlung bereit sind, rufen Sie canMakePayment() auf, bevor Sie das Zahlungsverfahren aufrufen. Der Aufruf von canMakePayment() gibt true zurück, wenn 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 du die beiden Parameter festgelegt und das request-Objekt wie oben gezeigt erstellt hast, kannst du die Methode show() aufrufen, um die Benutzeroberfläche der Zahlungs-App aufzurufen.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Wie die Benutzeroberfläche der Zahlungs-App aussieht, liegt ganz beim Anbieter der Zahlungs-App. Nachdem der Kunde der Zahlung zugestimmt hat, wird ein JSON-Objekt an den Händler übergeben, das alle für die Überweisung erforderlichen Informationen enthält. Der Händler kann es dann an den Premium-KMU-Partner senden, damit er die Zahlung verarbeitet.
Schließlich können Sie die Benutzeroberfläche für Zahlungsanfragen schließen. Führen Sie dazu den Vorgang mit response.complete('success') oder response.complete('fail') aus, je nachdem, welches Ergebnis der PSP zurückgibt.