Signatur
Beschreibung
PaymentResponse.requestId gibt einen string zurück, der die Zahlungsanfrage eindeutig kennzeichnet, aus der diese Antwort entstanden ist. Der Wert ist derselbe wie PaymentRequest.id. Du legst ihn fest, indem du beim Erzeugen der Anfrage im details-Objekt die Eigenschaft id setzt: new PaymentRequest(methods, { id: "order-4711", total: … }).
Setzt du keine id, erzeugt der Browser selbst einen eindeutigen Bezeichner, meist eine UUID. Die MDN-Formulierung „über den PaymentResponse()-Konstruktor“ ist ungenau: PaymentResponse hat keinen öffentlichen Konstruktor. Die Antwort bekommst du ausschließlich als Ergebnis von PaymentRequest.prototype.show().
Praktisch nützlich ist die Eigenschaft beim Abgleich mit dem Backend: Gib als id deine Bestell- oder Transaktionsnummer mit. Dann kannst du die Antwort samt Zahlungsdaten (details) eindeutig der richtigen Bestellung zuordnen, auch wenn mehrere Zahlungsvorgänge parallel laufen oder erneut versucht werden. Außerdem eignet sie sich für Protokollierung und Fehlersuche.
Rückgabewert
PaymentRequest, also der selbst gesetzte Wert aus details.id oder ein vom Browser erzeugter eindeutiger Bezeichner. Schreibgeschützt.Beispiele
Eigene Bestellnummer als requestId verwenden
const methods = [{ supportedMethods: "https://google.com/pay", data: { /* Konfiguration */ } }];
const details = {
id: "order-4711", // eigener Bezeichner
total: { label: "Gesamt", amount: { currency: "EUR", value: "49.90" } }
};
document.querySelector("#pay").addEventListener("click", async () => {
const request = new PaymentRequest(methods, details);
const response = await request.show();
console.log(response.requestId); // "order-4711"
console.log(response.requestId === request.id); // true
await response.complete("success");
});Zahlung serverseitig der Bestellung zuordnen
const pay = async (orderId, amount) => {
const request = new PaymentRequest(
[{ supportedMethods: "https://google.com/pay", data: {} }],
{ id: orderId, total: { label: "Bestellung", amount: { currency: "EUR", value: amount } } }
);
const response = await request.show();
try {
const res = await fetch("/api/payments", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
orderId: response.requestId, // eindeutige Zuordnung
methodName: response.methodName,
details: response.details
})
});
await response.complete(res.ok ? "success" : "fail");
} catch {
await response.complete("fail");
}
};
document.querySelector("#pay").addEventListener("click", () => pay("order-4712", "19.99"));Vom Browser erzeugte ID ohne details.id
document.querySelector("#pay").addEventListener("click", async () => {
const request = new PaymentRequest(
[{ supportedMethods: "https://google.com/pay", data: {} }],
{ total: { label: "Spende", amount: { currency: "EUR", value: "5.00" } } }
);
const response = await request.show();
// Automatisch erzeugter Bezeichner, z. B. eine UUID
console.log(`Zahlungsvorgang ${response.requestId}`);
await response.complete("success");
});// Wichtig · Fallstricke
- Kein Sicherheitsmerkmal: Die
requestIdkommt vom Client und lässt sich manipulieren. Prüfe auf dem Server immer, ob die Bestellung existiert, und prüfe Betrag und Status gegen deine eigenen Daten. - Keine sensiblen Daten als
idverwenden, zum Beispiel keine Kundennamen oder E-Mail-Adressen. Der Wert kann an den Zahlungsdienstleister weitergegeben werden. PaymentResponselässt sich nicht selbst per Konstruktor erzeugen. Die Instanz kommt immer vonPaymentRequest.show().- Wird die Antwort über
PaymentResponse.retry()neu angefordert, bleibt dierequestIdgleich. - Kompatibilität: Die Payment Request API gibt es nur in sicheren Kontexten (HTTPS).
show()braucht eine Nutzeraktion, etwa einen Klick. Chromium-Browser und Safari unterstützen sie. In Firefox ist sie standardmäßig nicht verfügbar. Deshalb vorher mit"PaymentRequest" in windowprüfen.