PaymentRequest: paymentmethodchange-Ereignis

Syntax

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

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

onpaymentmethodchange = (event) => { }

Ereignistyp

Ein PaymentMethodChangeEvent. Erbt von Event.

Ereigniseigenschaften

Zusätzlich zu den unten stehenden Eigenschaften umfasst diese Schnittstelle Eigenschaften, die von PaymentRequestUpdateEvent geerbt werden.

methodDetails Schreibgeschützt

Ein Objekt, das zahlungsmethodenspezifische Daten enthält, die beim Umgang mit einer Änderung der Zahlungsmethode nützlich sind. Wenn keine solchen Informationen verfügbar sind, hat dieser Wert null.

methodName Schreibgeschützt

Ein String, der den Zahlungsmethoden-Identifikator enthält, ein String, der eine bestimmte Zahlungsmethode eindeutig identifiziert. Dieser Identifikator ist normalerweise eine URL, die während des Bezahlvorgangs verwendet wird, kann aber auch eine standardisierte Nicht-URL-Zeichenkette sein, wie basic-card. Der Standardwert ist der leere String, "".

Beispiele

Schauen wir uns ein Beispiel an. Dieser Code erstellt eine neue 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 dem Benutzer die Zahlungsschnittstelle 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.

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

paymentRequest.addEventListener("paymentmethodchange", handlePaymentChange);

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

Die Ereignishandlungsfunktion selbst, handlePaymentChange(), sieht so aus:

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

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

  event.updateWith(detailsUpdate);
};

Dies beginnt mit der Überprüfung der methodName-Eigenschaft des Ereignisses; wenn das anzeigt, dass der Benutzer versucht, Apple Pay zu verwenden, übergeben wir die methodDetails an eine Funktion namens calculateServiceFee(), die wir erstellen könnten, um die Informationen über die Transaktion zu verarbeiten, wie z.B. die zugrunde liegende Kreditkarte, die für die Apple Pay-Anfrage verwendet wird, und ein Objekt zu berechnen und zurückzugeben, das Änderungen spezifiziert, die an dem PaymentRequest angewendet werden sollen, um etwaige Servicegebühren hinzuzufügen, die die Zahlungsmethode erfordern könnte.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Payment Request API
• Verwendung des Payment Request API
• merchantvalidation-Ereignis
• shippingaddresschange-Ereignis
• shippingoptionchange-Ereignis