Funktionsweise der Payment Request API

Allgemeine Informationen zur Funktionsweise der Payment Request API.

Eiji Kitamura

Payment Request API

Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss die Website Sie fragen. Der Kunde muss Zahlungsinformationen und optional weitere Informationen angeben. wie Versandpräferenz. Das geht einfach und schnell mithilfe der Payment Request API (PR API).

Grundstruktur

Für das Erstellen eines PaymentRequest-Objekts sind zwei Parameter erforderlich: payment Zahlungsmethoden und Zahlungsdetails zu überprüfen. Außerdem gibt es einen dritten Parameter für Zahlungsoptionen, ist 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 Array-Variable. Jedes Element im Array besteht aus zwei Komponenten, supportedMethods und optional data.

Für supportedMethods muss der Händler eine Zahlungsmethode angeben ID wie z. B. https://bobbucks.dev/pay. Die Existenz und der Inhalt von data hängen von Inhalt von supportedMethods und das Design des Zahlungs-App-Anbieters.

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 der Transaktion. Es enthält den erforderlichen Wert total, der den Gesamtbetrag angibt, den der Kunde erhält. Dieser Parameter kann auch können Sie die gekauften Artikel optional auflisten.

Im Beispiel unten ist die optionale Liste der gekauften Artikel (hier nur ein Artikel) Fall) wird angezeigt, ebenso wie der erforderliche Gesamtbetrag. In beiden Fällen ist die Währung Einheit wird 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' }
  }
};

Verfügbarkeit der Zahlungsmethode prüfen

Chrome prüft, ob Nutzer und Umgebung zahlungsbereit sind beim Erstellen eines PaymentRequest-Objekts.

Um zu prüfen, ob der Nutzer und die Umgebung bereit für eine Zahlung sind, rufen Sie canMakePayment(), bevor Sie das Zahlungsverfahren aufrufen. Anrufen canMakePayment() gibt true zurück, wenn der Browser mindestens eine Zahlung unterstützt. -Methode, die im -Objekt angegeben ist.

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 hier gezeigt erstellt haben, können Sie die Methode show() aufrufen, mit der der Nutzer 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, hängt vollständig von der Zahlungs-App ab. Dienstanbieter. Nachdem der Kunde einer Zahlung zugestimmt hat, wird ein JSON-Objekt übergeben. an den Händler, der 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 Zahlungsanforderung schließen, indem Sie den Vorgang mit response.complete('success') oder response.complete('fail'), je nach das vom Premium-KMU-Partner zurückgegeben wird.

Nächstes Video

Weitere Informationen zu Webzahlungen