Funktionsweise der Payment Request API

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.

Nächstes Video

Weitere Informationen zu Webzahlungen