Signatur
Beschreibung
Der Konstruktor PaymentRequestEvent() gehört zur Payment Handler API. Er erzeugt ein Ereignisobjekt vom Typ PaymentRequestEvent, das von ExtendableEvent erbt. Solche Ereignisse bekommt ein Service Worker, der sich als Zahlungs-Handler (Payment App) registriert hat, sobald eine Händlerseite über new PaymentRequest(...).show() eine Zahlung anstößt.
Im normalen Betrieb erzeugt und versendet der Browser das Ereignis selbst, und zwar als paymentrequest-Ereignis im ServiceWorkerGlobalScope. Den Konstruktor ruft man selbst fast nur für Unit-Tests, zum Simulieren von Zahlungsanfragen während der Entwicklung oder für eine eigene Ereignisverteilung innerhalb des Service Workers auf.
Im options-Objekt stehen die Daten, die später über die Eigenschaften des Ereignisses lesbar sind: unterstützte Zahlungsmethoden (methodData), Gesamtbetrag (total), Modifikatoren, Herkunft der Anfrage und die Anfrage-ID. Die wichtigen Methoden des Ereignisses sind respondWith() und openWindow(). Sie funktionieren aber nur bei Ereignissen, die der Browser vertrauenswürdig ausgelöst hat.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses. Für echte Zahlungsanfragen immer "paymentrequest". |
|
| $options | object | {} | Initialisierungsobjekt. Es kann neben den Optionen von ExtendableEventInit diese Felder enthalten:
|
Rückgabewert
PaymentRequestEvent-Objekt. Seine Eigenschaften enthalten die Werte aus options.Beispiele
Ereignis im Service Worker für einen Test erzeugen
// sw.js – nur im ServiceWorkerGlobalScope verfügbar
const testEvent = new PaymentRequestEvent('paymentrequest', {
methodData: [{ supportedMethods: 'https://bobbucks.dev/pay' }],
total: { currency: 'EUR', value: '19.99' },
paymentRequestId: 'bestellung-4711',
paymentRequestOrigin: 'https://shop.example',
topOrigin: 'https://shop.example'
});
console.log(testEvent.type);
console.log(testEvent.total.value, testEvent.total.currency);
console.log(testEvent.methodData[0].supportedMethods);Echtes paymentrequest-Ereignis im Zahlungs-Handler verarbeiten
// sw.js einer Payment App
self.addEventListener('paymentrequest', (event) => {
console.log(`Zahlung über ${event.total.value} ${event.total.currency}`,
`angefragt von ${event.paymentRequestOrigin}`);
// Antwort als Promise liefern; der Browser wartet darauf
event.respondWith((async () => {
// Hier würde normalerweise eine Zahlung autorisiert werden
return {
methodName: event.methodData[0].supportedMethods,
details: { token: 'demo-token-123' }
};
})());
});Eigene Logik mit einem simulierten Ereignis testen
// sw.js – Handler-Logik als eigene Funktion, damit sie testbar ist
const beschreibeAnfrage = (event) => ({
id: event.paymentRequestId,
betrag: Number(event.total.value),
methoden: event.methodData.map((m) => m.supportedMethods)
});
self.addEventListener('paymentrequest', (event) => {
console.log(beschreibeAnfrage(event));
});
// Simulation während der Entwicklung
const simuliert = new PaymentRequestEvent('paymentrequest', {
methodData: [{ supportedMethods: 'https://pay.example/methode' }],
total: { currency: 'EUR', value: '5.00' },
paymentRequestId: 'test-1'
});
console.log(beschreibeAnfrage(simuliert));// Wichtig · Fallstricke
- Experimentell: Die Payment Handler API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen sie nicht. Vorher prüfen, z. B. mit
'PaymentRequestEvent' in self. - Nur im Service Worker: Den Konstruktor gibt es ausschließlich im
ServiceWorkerGlobalScope. Im Fenster-Kontext führt der Aufruf zu einemReferenceError. - Nicht vertrauenswürdig: Selbst erzeugte Ereignisse haben
isTrusted === false.respondWith()undopenWindow()lösen darauf keine echte Zahlung aus bzw. öffnen kein Fenster. Selbst gebaute Ereignisse eignen sich daher nur für Tests. - Sicherheit: Die Werte in
paymentRequestOrigin,topOriginundtotalniemals ungeprüft übernehmen. Beträge und Händler muss der Server des Zahlungsanbieters zusätzlich prüfen. Die API funktioniert nur in sicheren Kontexten (HTTPS). total.valueist ein String (z. B.\"19.99\"). Vor Berechnungen umwandeln und Rundungsfehler bei Gleitkommazahlen beachten.