PaymentMethodChangeEvent.methodName — Eigenschaft · JavaScript-Referenz

Signatur

PaymentMethodChangeEvent.methodName

Beschreibung

Die Eigenschaft methodName des PaymentMethodChangeEvent enthält den Zahlungsmethoden-Bezeichner des Zahlungshandlers, den der Benutzer gerade im Dialog der Payment Request API ausgewählt hat. Das kann ein standardisierter Bezeichner wie "basic-card" (inzwischen veraltet) sein oder eine URL wie "https://apple.com/apple-pay" bzw. "https://google.com/pay".

Das Ereignis paymentmethodchange wird auf dem PaymentRequest-Objekt ausgelöst, wenn der Benutzer die Zahlungsmethode wechselt oder, bei Apple Pay, eine andere Karte auswählt. Mit methodName legst du fest, wie du die zusätzlichen Informationen in event.methodDetails auswertest. Ihre Struktur hängt nämlich vom jeweiligen Zahlungshandler ab.

Typische Anwendungsfälle sind methodenabhängige Gebühren oder Rabatte, etwa ein Aufschlag für Kreditkarten oder ein Rabatt für eine bestimmte Wallet. Die aktualisierten Gesamtbeträge gibst du über event.updateWith() an den Browser zurück, der den Zahlungsdialog dann ohne Unterbrechung neu darstellt.

Rückgabewert

Typ

string

Beschreibung

Der Zahlungsmethoden-Bezeichner des aktuell gewählten Zahlungshandlers, z. B. "https://apple.com/apple-pay". Wurde das Ereignis ohne diese Angabe konstruiert, ist der Wert ein leerer String "".

Beispiele

Gewählte Zahlungsmethode protokollieren

const methods = [
  { supportedMethods: 'https://apple.com/apple-pay', data: { version: 3, merchantIdentifier: 'merchant.net.example', merchantCapabilities: ['supports3DS'], supportedNetworks: ['visa', 'masterCard'], countryCode: 'DE' } },
  { supportedMethods: 'https://google.com/pay', data: { /* Google-Pay-Konfiguration */ } }
];

const details = {
  total: { label: 'Summe', amount: { currency: 'EUR', value: '49.90' } }
};

const request = new PaymentRequest(methods, details);

request.addEventListener('paymentmethodchange', (event) => {
  console.log('Gewählter Zahlungshandler:', event.methodName);
});

// show() muss durch eine Benutzeraktion ausgelöst werden
document.querySelector('#pay').addEventListener('click', async () => {
  const response = await request.show();
  await response.complete('success');
});

Gewählter Zahlungshandler: https://apple.com/apple-pay

Methodenabhängige Gebühr per updateWith() berechnen

const baseTotal = 100;

const request = new PaymentRequest(
  [{ supportedMethods: 'https://apple.com/apple-pay', data: { version: 3, merchantIdentifier: 'merchant.net.example', merchantCapabilities: ['supports3DS'], supportedNetworks: ['visa', 'masterCard', 'amex'], countryCode: 'DE' } }],
  { total: { label: 'Summe', amount: { currency: 'EUR', value: baseTotal.toFixed(2) } } }
);

request.onpaymentmethodchange = (event) => {
  const { methodName, methodDetails } = event;
  let fee = 0;

  // methodDetails nur auswerten, wenn der Handler bekannt ist
  if (methodName === 'https://apple.com/apple-pay' && methodDetails?.type === 'credit') {
    fee = 1.5; // Aufschlag für Kreditkarten
  }

  const displayItems = fee > 0
    ? [{ label: 'Kreditkartengebühr', amount: { currency: 'EUR', value: fee.toFixed(2) } }]
    : [];

  event.updateWith({
    displayItems,
    total: { label: 'Summe', amount: { currency: 'EUR', value: (baseTotal + fee).toFixed(2) } }
  });
};

Ereignis manuell konstruieren (z. B. für Tests)

const evt = new PaymentMethodChangeEvent('paymentmethodchange', {
  methodName: 'https://google.com/pay',
  methodDetails: { network: 'visa' }
});

console.log(evt.methodName);
console.log(evt.methodDetails.network);

// Schreibgeschützt: Zuweisung wird ignoriert (im Strict Mode TypeError)
evt.methodName = 'andere';
console.log(evt.methodName);

https://google.com/pay visa https://google.com/pay

// Wichtig · Fallstricke

Browser-Unterstützung: Das Ereignis gibt es nur in Chromium-Browsern (Chrome, Edge) und in Safari (Apple Pay). Firefox unterstützt die Payment Request API nicht. Prüfe deshalb vorher mit 'PaymentRequest' in window und biete eine Alternative an.
Die API funktioniert nur in einem sicheren Kontext (HTTPS). In iframes braucht sie zusätzlich die Berechtigungsrichtlinie allow="payment".
methodName ist schreibgeschützt. Eine Zuweisung wird ignoriert, im Strict Mode löst sie einen TypeError aus.
Die Struktur von methodDetails hängt vom Zahlungshandler ab. Prüfe deshalb immer zuerst methodName, bevor du auf Felder in methodDetails zugreifst. Nicht jeder Handler löst das Ereignis überhaupt aus.
event.updateWith() muss synchron im Handler aufgerufen werden. Bei asynchronen Berechnungen übergibst du stattdessen ein Promise, z. B. event.updateWith(fetchNeueDetails()).
"basic-card" ist veraltet und wurde aus Chrome entfernt. Setze stattdessen auf URL-basierte Bezeichner.
Sicherheit: Gebühren und Summen, die im Client berechnet werden, dienen nur der Anzeige. Der Server muss den endgültigen Betrag unabhängig davon prüfen.

Siehe auch

PaymentMethodChangeEvent.methodDetails PaymentResponse.methodName PaymentRequestEvent.methodData RTCDTMFToneChangeEvent.tone MerchantValidationEvent.methodName