Start · Sprachen · JavaScript · Referenz · PaymentResponse.methodName

PaymentResponse.methodName

Eigenschaft

Liefert den Bezeichner der Zahlungsmethode, die der Benutzer im Zahlungsdialog ausgewählt hat, z. B. <code>"https://google.com/pay"</code>. Die Eigenschaft ist schreibgeschützt.

seit JavaScript Payment Request API – Chromium-Browser (Chrome, Ed Kategorie: webapi

Signatur

PaymentResponse.methodName

Beschreibung

Die schreibgeschützte Eigenschaft methodName eines PaymentResponse-Objekts enthält den Zahlungsmethoden-Bezeichner (Payment Method Identifier) der Methode, mit der der Benutzer die Zahlung freigegeben hat. Der Wert stimmt immer mit einem der supportedMethods-Werte überein, die beim Erzeugen des PaymentRequest übergeben wurden.

Es gibt zwei Arten von Bezeichnern:

  • Standardisierte Bezeichner wie "secure-payment-confirmation" (früher auch "basic-card", inzwischen entfernt).
  • URL-basierte Bezeichner für eigene Zahlungs-Apps, z. B. "https://google.com/pay" oder "https://apple.com/apple-pay".

In der Praxis wertet man methodName aus, um zu entscheiden, wie PaymentResponse.details zu verarbeiten ist. Jeder Zahlungsdienstleister liefert dort eine eigene Datenstruktur (z. B. ein Token), die der Server passend an den richtigen Zahlungsanbieter weiterleiten muss.

Rückgabewert

Typ
string
Beschreibung
Der Bezeichner der ausgewählten Zahlungsmethode, z. B. "https://google.com/pay" oder "secure-payment-confirmation".

Beispiele

Gewählte Zahlungsmethode auslesen

const methods = [
  {
    supportedMethods: 'https://google.com/pay',
    data: { apiVersion: 2, apiVersionMinor: 0 /* ... */ }
  }
];

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

const button = document.querySelector('#pay');

button.addEventListener('click', async () => {
  const request = new PaymentRequest(methods, details);
  try {
    const response = await request.show();
    console.log('Gewählte Methode:', response.methodName);
    await response.complete('success');
  } catch (err) {
    console.error('Zahlung abgebrochen:', err.name);
  }
});
Gewählte Methode: https://google.com/pay

Details je nach Zahlungsdienstleister an den Server senden

const processPayment = async (response) => {
  let endpoint;
  switch (response.methodName) {
    case 'https://google.com/pay':
      endpoint = '/api/pay/google';
      break;
    case 'https://apple.com/apple-pay':
      endpoint = '/api/pay/apple';
      break;
    default:
      await response.complete('fail');
      throw new Error(`Nicht unterstützt: ${response.methodName}`);
  }

  const res = await fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      method: response.methodName,
      details: response.details,
      requestId: response.requestId
    })
  });

  await response.complete(res.ok ? 'success' : 'fail');
};

Die Eigenschaft ist schreibgeschützt

const request = new PaymentRequest(
  [{ supportedMethods: 'https://google.com/pay', data: {} }],
  { total: { label: 'Test', amount: { currency: 'EUR', value: '1.00' } } }
);

const response = await request.show();
response.methodName = 'manipuliert'; // wird ignoriert (im strict mode: TypeError)
console.log(response.methodName);
await response.complete('success');
https://google.com/pay

// Wichtig · Fallstricke

  • Nur in sicheren Kontexten (HTTPS) verfügbar. Außerdem darf PaymentRequest.show() nur nach einer Benutzeraktion (z. B. einem Klick) aufgerufen werden.
  • Browser-Unterstützung: Chromium-Browser und Safari unterstützen die Schnittstelle, Firefox standardmäßig nicht. Vorher mit 'PaymentRequest' in window prüfen und notfalls ein klassisches Checkout-Formular anbieten.
  • "basic-card" wurde aus der Spezifikation und aus den Browsern entfernt. Neuer Code sollte sich nicht auf diesen Wert verlassen.
  • Sicherheit: methodName und details kommen vom Client und dürfen nicht ungeprüft übernommen werden. Die eigentliche Prüfung (Token, Betrag, Signatur) muss immer auf dem Server beim Zahlungsanbieter erfolgen.
  • Immer response.complete() aufrufen, sonst bleibt der Zahlungsdialog offen, bis der Browser ihn nach einer Zeitüberschreitung schließt.