Signatur
Beschreibung
Die Methode respondWith() gehört zur Schnittstelle CanMakePaymentEvent der Payment Handler API. Ruft eine Händlerseite new PaymentRequest(...) auf und fragt danach mit canMakePayment() oder show() ab, ob Zahlungen möglich sind, löst der Browser im Service Worker einer registrierten Zahlungs-App (Payment Handler) das Ereignis canmakepayment aus. Mit respondWith() antwortet der Service Worker darauf mit true („ich kann zahlen“) oder false.
Übergeben wird entweder direkt ein Boolean oder ein Promise, das zu einem Boolean aufgelöst wird. Mit einem Promise kann der Handler asynchron prüfen, etwa ob ein Nutzerkonto hinterlegt ist, ob in IndexedDB gespeicherte Zahlungsmittel vorhanden sind oder ob die Zahlungs-App grundsätzlich einsatzbereit ist.
respondWith() muss synchron im Event-Handler aufgerufen werden, also bevor der Handler zurückkehrt. Wird es erst nach einem await aufgerufen, ist das Ereignis schon abgeschlossen und es wird eine InvalidStateError-Ausnahme geworfen. Asynchrone Arbeit gehört deshalb in das übergebene Promise.
Aus Datenschutzgründen liefert das Ereignis in aktuellen Chromium-Versionen nur wenige Informationen (z. B. topOrigin, paymentRequestOrigin, methodData) und wird nicht in jedem Kontext ausgelöst. Man sollte also nicht darauf bauen, die Händlerseite genauer zu identifizieren.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $response Pflicht | boolean | Promise<boolean> | true, wenn der Payment Handler die Zahlung verarbeiten kann, sonst false. Alternativ ein Promise, das zu einem dieser Werte aufgelöst wird. |
Rückgabewert
undefined). Wird die Methode ungültig aufgerufen (z. B. doppelt oder zu spät), wirft sie eine DOMException vom Typ InvalidStateError.Beispiele
Einfache Antwort im Service Worker
// service-worker.js
self.addEventListener('canmakepayment', (event) => {
// Die Zahlungs-App ist immer bereit
event.respondWith(true);
});Asynchrone Prüfung mit Promise
// service-worker.js
const hasStoredCard = async () => {
const cache = await caches.open('wallet-v1');
const res = await cache.match('/wallet/cards.json');
if (!res) return false;
const cards = await res.json();
return cards.length > 0;
};
self.addEventListener('canmakepayment', (event) => {
// respondWith synchron aufrufen, die Prüfung selbst läuft im Promise
event.respondWith(
hasStoredCard().catch(() => false)
);
});Nach unterstützter Zahlungsmethode filtern
// service-worker.js
const SUPPORTED = 'https://pay.example.com/methode';
self.addEventListener('canmakepayment', (event) => {
const methods = (event.methodData ?? []).map((m) => m.supportedMethods);
console.log('Angefragte Methoden:', methods);
event.respondWith(methods.includes(SUPPORTED));
});Falsch: respondWith nach await
self.addEventListener('canmakepayment', async (event) => {
// FEHLER: Nach await ist das Ereignis bereits abgeschlossen
const ok = await Promise.resolve(true);
try {
event.respondWith(ok);
} catch (err) {
console.error(err.name);
}
});
// Richtig:
// event.respondWith(Promise.resolve(true));// Wichtig · Fallstricke
- Experimentell und nur in Chromium: Die Payment Handler API wird von Chrome und Edge unterstützt, aber nicht von Firefox und Safari. Vor dem Einsatz sollte man z. B. mit
'PaymentManager' in selfbzw.registration.paymentManagerprüfen, ob die API vorhanden ist. - Nur im Service-Worker-Kontext verfügbar und nur über HTTPS (sicherer Kontext).
respondWith()muss synchron im Handler aufgerufen werden und darf nur einmal aufgerufen werden, sonst folgtInvalidStateError.- Wird das Promise abgelehnt, wertet der Browser die Antwort als
false. Fehler sollte man daher bewusst mit.catch(() => false)abfangen. - Ohne Handler für
canmakepaymentnimmt Chrome je nach Version an, dass die App zahlen kann. Besser ist es, immer ausdrücklich zu antworten. - Datenschutz: Chrome gibt in diesem Ereignis bewusst nur eingeschränkte Daten heraus.
modifiersund Details zur Händlerseite sind unter Umständen leer oder fehlen ganz.