Signatur
Beschreibung
Die Eigenschaft payerEmail eines PaymentResponse-Objekts enthält die E-Mail-Adresse, die der Käufer im nativen Zahlungsdialog des Browsers gewählt oder eingegeben hat. Du brauchst sie zum Beispiel für Bestellbestätigungen, Rechnungen oder um den Käufer einem Kundenkonto zuzuordnen.
Ein Wert kommt nur dann an, wenn du ihn beim Erzeugen des PaymentRequest ausdrücklich anforderst. Dazu setzt du in den Optionen (drittes Argument des Konstruktors) requestPayerEmail: true. Ohne diese Option ist payerEmail immer null.
Die Eigenschaft kann nur gelesen werden. Korrigiert der Nutzer seine Angaben nach einem Aufruf von PaymentResponse.retry(), wird der Wert aktualisiert und das Ereignis payerdetailchange ausgelöst. Dann solltest du die Adresse noch einmal prüfen.
Rückgabewert
null, wenn sie nicht mit requestPayerEmail angefordert wurde.Beispiele
E-Mail-Adresse beim Bezahlen anfordern und auslesen
const methods = [{ supportedMethods: 'https://example.com/pay' }];
const details = {
total: { label: 'Gesamt', amount: { currency: 'EUR', value: '19.99' } }
};
const options = { requestPayerEmail: true, requestPayerName: true };
const checkout = async () => {
const request = new PaymentRequest(methods, details, options);
const response = await request.show();
console.log('E-Mail des Käufers:', response.payerEmail);
await response.complete('success');
};
document.querySelector('#buy').addEventListener('click', checkout);Ohne requestPayerEmail ist der Wert null
const request = new PaymentRequest(
[{ supportedMethods: 'https://example.com/pay' }],
{ total: { label: 'Spende', amount: { currency: 'EUR', value: '5.00' } } }
);
const response = await request.show();
console.log(response.payerEmail);
await response.complete('success');Adresse auf dem Server prüfen und bei Fehler retry() aufrufen
const validateAndComplete = async (response) => {
const res = await fetch('/api/check-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: response.payerEmail })
});
const { valid } = await res.json();
if (!valid) {
// Nutzer bitten, die E-Mail-Adresse zu korrigieren
await response.retry({ payer: { email: 'Diese E-Mail-Adresse ist ungültig.' } });
return validateAndComplete(response);
}
await response.complete('success');
};
const request = new PaymentRequest(
[{ supportedMethods: 'https://example.com/pay' }],
{ total: { label: 'Abo', amount: { currency: 'EUR', value: '9.00' } } },
{ requestPayerEmail: true }
);
const response = await request.show();
response.addEventListener('payerdetailchange', () => {
console.log('Neue E-Mail:', response.payerEmail);
});
await validateAndComplete(response);// Wichtig · Fallstricke
- Nur mit Option: Ohne
requestPayerEmail: truein denPaymentRequest-Optionen ist der Wert immernull. - Nicht blind vertrauen: Der Browser liefert die Adresse so, wie der Nutzer sie eingegeben hat. Prüfe sie deshalb immer auf dem Server. Wenn du die Adresse in HTML ausgibst, musst du sie maskieren (XSS). Setze sie nie ungeprüft per
innerHTMLein. - Datenschutz: Die E-Mail-Adresse ist ein personenbezogenes Datum. Fordere sie nur an, wenn du sie wirklich brauchst (DSGVO).
- Sicherer Kontext: Die Payment Request API gibt es nur über HTTPS.
show()muss durch eine Nutzeraktion ausgelöst werden, etwa durch einen Klick. - Browser-Kompatibilität: Wird von Chromium-Browsern und Safari unterstützt. In Firefox ist die API standardmäßig nicht aktiviert. Prüfe vorher mit
'PaymentRequest' in window, ob sie verfügbar ist, und biete sonst ein normales Formular an.