PaymentRequest: paymentmethodchange Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Das paymentmethodchange Ereignis wird vom Payment Request API an ein PaymentRequest Objekt gesendet, wenn der Benutzer die Zahlungsmethode innerhalb eines bestimmten Zahlungsdienstleisters ändert.

Zum Beispiel, wenn der Benutzer von einer Kreditkarte zu einer anderen in seinem Apple Pay Konto wechselt, wird ein paymentmethodchange Ereignis ausgelöst, um Ihnen die Änderung mitzuteilen.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergeleitet.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("paymentmethodchange", (event) => { })

onpaymentmethodchange = (event) => { }

Ereignistyp

Ereigniseigenschaften

Zusätzlich zu den untenstehenden Eigenschaften enthält dieses Interface Eigenschaften, die von PaymentRequestUpdateEvent geerbt werden.

methodDetails Schreibgeschützt

Ein Objekt, das zahlungsmethodenspezifische Daten enthält, die nützlich sind, wenn eine Änderung der Zahlungsmethode bearbeitet wird. Wenn keine solchen Informationen verfügbar sind, ist dieser Wert null.

methodName Schreibgeschützt

Ein String, der den Bezeichner der Zahlungsmethode enthält, ein String, der eine bestimmte Zahlungsmethode eindeutig identifiziert. Dieser Bezeichner ist meist eine URL, die während des Zahlungsvorgangs verwendet wird, kann jedoch auch ein standardisierter, nicht-URL-String wie basic-card sein. Der Standardwert ist der leere String, "".

Beispiele

Schauen wir uns ein Beispiel an. Dieser Code erstellt einen neuen PaymentRequest, fügt einen Handler für das paymentmethodchange Ereignis hinzu, indem er die Methode addEventListener() des Requests aufruft, und ruft dann show() auf, um die Zahlungsoberfläche dem Benutzer zu präsentieren.

Der Code setzt die Existenz einer Methode detailsForTransaction() voraus, die ein Objekt zurückgibt, das als details Argument an den PaymentRequest Konstruktor übergeben werden kann.

js
const paymentRequest = new PaymentRequest(
  paymentMethods,
  detailsForTransaction(),
);

paymentRequest.addEventListener(
  "paymentmethodchange",
  handlePaymentChange,
  false,
);

paymentRequest
  .show()
  .then((response) => response.complete("success"))
  .catch((err) => console.error(`Error handling payment request: ${err}`));

Die Ereignis-Handler-Funktion selbst, handlePaymentChange(), sieht so aus:

js
handlePaymentChange = (event) => {
  const detailsUpdate = {};

  if (event.methodName === "https://apple.com/apple-pay") {
    const serviceFeeInfo = calculateServiceFee(event.methodDetails);
    Object.assign(detailsUpdate, serviceFeeInfo);
  }

  event.updateWith(detailsUpdate);
};

Sie beginnt damit, die methodName Eigenschaft des Ereignisses zu überprüfen; falls diese anzeigt, dass der Benutzer versucht, Apple Pay zu verwenden, übergeben wir die methodDetails an eine Funktion namens calculateServiceFee(), die wir erstellen könnten, um Informationen über die Transaktion zu nehmen, wie die zugrunde liegende Kreditkarte zur Abwicklung der Apple Pay-Anfrage, und ein Objekt zu berechnen und zurückzugeben, das Änderungen angibt, die auf den PaymentRequest angewendet werden sollen, um eventuell erforderliche Servicegebühren der Zahlungsmethode hinzuzufügen.

Bevor der Ereignis-Handler zurückgibt, ruft er die updateWith() Methode des Ereignisses auf, um die Änderungen in die Anfrage zu integrieren.

Spezifikationen

Specification
Payment Request API
# dfn-paymentmethodchange
Payment Request API
# onpaymentmethodchange-attribute

Browser-Kompatibilität

Siehe auch