PaymentRequestEvent.methodData — Eigenschaft · JavaScript-Referenz

Signatur

PaymentRequestEvent.methodData

Beschreibung

Die Eigenschaft methodData des PaymentRequestEvent-Interfaces liefert ein Array von PaymentMethodData-Objekten. Jedes Objekt enthält die Kennung einer Zahlungsmethode (supportedMethods, z. B. eine URL wie "https://bobpay.xyz/pay") und optional ein data-Objekt mit methodenspezifischen Angaben. Es sind genau die Einträge, die der Händler im ersten Argument von new PaymentRequest(methodData, details) übergeben hat, gefiltert auf die Methoden, die Ihr Zahlungs-Handler unterstützt.

Das Event paymentrequest kommt nur im Service Worker einer Web-basierten Zahlungs-App an (Payment Handler API), also nicht auf der Händlerseite. Über methodData findet der Zahlungs-Handler heraus, welche seiner Methoden der Händler verlangt und welche Zusatzparameter (etwa Händler-ID, unterstützte Kartennetzwerke, Umgebung „test“/„live“) er mitschickt.

Normalerweise wertet man methodData in einem paymentrequest-Listener aus, legt die relevanten Daten ab und öffnet dann mit event.openWindow() ein Bezahlfenster. Das Ergebnis geht über event.respondWith() an den Händler zurück.

Rückgabewert

Typ

Array<PaymentMethodData>

Beschreibung

Ein Array von Objekten der Form { supportedMethods: string, data?: object }. data ist bereits deserialisiert, also ein gewöhnliches JavaScript-Objekt (kein JSON-String).

Beispiele

Unterstützte Methoden im Service Worker protokollieren

// service-worker.js der Zahlungs-App
self.addEventListener('paymentrequest', (event) => {
  for (const { supportedMethods, data } of event.methodData) {
    console.log('Methode:', supportedMethods, 'Daten:', data);
  }
});

Methode: https://bobpay.xyz/pay Daten: { merchantId: 'shop-42', env: 'test' }

Händlerdaten auslesen und Bezahlfenster öffnen

const METHOD = 'https://bobpay.xyz/pay';

self.addEventListener('paymentrequest', (event) => {
  const entry = event.methodData.find((m) => m.supportedMethods === METHOD);
  if (!entry) return; // Methode wird nicht verlangt

  const { merchantId = 'unbekannt', env = 'live' } = entry.data ?? {};

  event.respondWith((async () => {
    const client = await event.openWindow(`/checkout?merchant=${encodeURIComponent(merchantId)}&env=${env}`);
    // Antwort des Bezahlfensters abwarten (per postMessage)
    const details = await new Promise((resolve) => {
      self.addEventListener('message', (e) => resolve(e.data), { once: true });
    });
    return { methodName: METHOD, details };
  })());
});

Händlerseite: Woher die methodData stammen

// Seite des Händlers
const request = new PaymentRequest(
  [{ supportedMethods: 'https://bobpay.xyz/pay', data: { merchantId: 'shop-42', env: 'test' } }],
  { total: { label: 'Summe', amount: { currency: 'EUR', value: '19.99' } } }
);

const response = await request.show();
await response.complete('success');

// Wichtig · Fallstricke

Experimentell und eingeschränkt verfügbar: Die Payment Handler API gibt es praktisch nur in Chromium-Browsern (Chrome, Edge). Firefox und Safari unterstützen sie nicht. Vor der Nutzung sollte man per Feature-Erkennung prüfen, z. B. mit 'PaymentRequestEvent' in self.
Die Eigenschaft steht nur im Service-Worker-Kontext zur Verfügung, und nur dann, wenn ein sicherer Kontext (HTTPS) vorliegt.
data kommt vom Händler und ist nicht vertrauenswürdig. Werte müssen geprüft werden, bevor man sie in URLs, im DOM oder für Zahlungslogik verwendet. Nicht per innerHTML ausgeben, sonst droht XSS.
Das Array kann Einträge für mehrere Methoden enthalten. Man sollte daher immer nach supportedMethods filtern und sich nicht auf methodData[0] verlassen.
data ist optional und kann undefined sein. Standardwerte setzt man am besten mit ?? {}.

Siehe auch

PaymentAddress.dependentLocality PaymentRequestEvent.total PaymentRequestEvent.modifiers PaymentRequestEvent.topOrigin PaymentRequestEvent.paymentRequestId