Signatur
Beschreibung
Die schreibgeschützte Eigenschaft paymentRequestOrigin gehört zur Payment Handler API. Ein PaymentRequestEvent erhält man im Service Worker einer Zahlungs-App (Payment Handler), wenn eine Website mit new PaymentRequest(...) und request.show() eine Zahlung startet und der Nutzer diese Zahlungs-App auswählt.
Die Eigenschaft enthält den Ursprung (Schema, Host, Port) des Kontexts, in dem das PaymentRequest-Objekt tatsächlich erzeugt wurde. Das kann sich von topOrigin unterscheiden: Startet ein eingebettetes <iframe> (z. B. ein Checkout-Widget eines Zahlungsdienstleisters) die Zahlung, liefert paymentRequestOrigin den Ursprung des Frames, während topOrigin den Ursprung der obersten Seite enthält.
Typische Einsatzzwecke sind die Anzeige des Händlers in der Zahlungsoberfläche, Protokollierung und Betrugserkennung sowie ein serverseitiger Abgleich mit einer Händler-Whitelist, bevor eine Zahlung autorisiert wird.
Rückgabewert
"https://shop.example", ohne Pfad und ohne abschließenden Schrägstrich.Beispiele
Ursprung im Service Worker der Zahlungs-App auslesen
// service-worker.js der Zahlungs-App
self.addEventListener('paymentrequest', (event) => {
console.log('Zahlung angefordert von:', event.paymentRequestOrigin);
console.log('Oberste Seite:', event.topOrigin);
console.log('Betrag:', event.total.value, event.total.currency);
});Nur bekannte Händler akzeptieren
const ERLAUBTE_URSPRUENGE = new Set([
'https://shop.example',
'https://checkout.psp.example'
]);
self.addEventListener('paymentrequest', (event) => {
if (!ERLAUBTE_URSPRUENGE.has(event.paymentRequestOrigin)) {
// Ablehnen: respondWith mit abgelehntem Promise
event.respondWith(
Promise.reject(new Error(`Unbekannter Händler: ${event.paymentRequestOrigin}`))
);
return;
}
event.respondWith(
Promise.resolve({
methodName: 'https://pay.example/methode',
details: { token: 'demo-token-123' }
})
);
});Händler-Ursprung an das Zahlungsfenster übergeben
self.addEventListener('paymentrequest', (event) => {
const params = new URLSearchParams({
haendler: event.paymentRequestOrigin,
id: event.paymentRequestId
});
event.respondWith(
(async () => {
// Öffnet die Bezahloberfläche der Zahlungs-App
const client = await event.openWindow(`/bezahlen.html?${params}`);
if (!client) throw new Error('Fenster konnte nicht geöffnet werden');
// Antwort kommt später z. B. per postMessage vom Fenster
return new Promise((resolve) => {
self.addEventListener('message', (e) => resolve(e.data), { once: true });
});
})()
);
});// Wichtig · Fallstricke
- Experimentell: Die Payment Handler API gibt es nur in Chromium-basierten Browsern. Firefox und Safari unterstützen sie nicht, deshalb immer eine andere Bezahlmöglichkeit anbieten.
- Die Eigenschaft ist nur im Service Worker der Zahlungs-App verfügbar, also nicht im Fenster-Kontext der Händlerseite. Außerdem ist ein sicherer Kontext (HTTPS) nötig.
paymentRequestOriginundtopOriginkönnen sich unterscheiden (Zahlung wird in einemiframegestartet). Für Sicherheitsprüfungen sollte man klar festlegen, welcher Ursprung geprüft wird. Oft ist es sinnvoll, beide zu prüfen.- Sicherheit: Der Ursprung wird zwar vom Browser gesetzt, trotzdem die Zahlung immer zusätzlich serverseitig prüfen und nicht nur im Service Worker. Den Wert beim Einfügen ins DOM nicht mit
innerHTMLverwenden, sondern mittextContent. - Der Wert enthält nur den Ursprung, ohne Pfad und Abfrage-Parameter (Query). Die genaue Seite, auf der die Zahlung gestartet wurde, lässt sich damit nicht herausfinden.