Signatur
Beschreibung
Die Eigenschaft phone gehört zum PaymentAddress-Interface der Payment Request API. Sie enthält die Telefonnummer, die der Nutzer zusammen mit der Liefer- oder Rechnungsadresse im Bezahldialog des Browsers angegeben hat. Das ist nützlich, wenn der Paketdienst den Empfänger bei der Zustellung erreichen muss.
Ein PaymentAddress-Objekt bekommst du vor allem über PaymentResponse.shippingAddress, nachdem der Nutzer die Zahlung bestätigt hat. Während des Dialogs bekommst du es außerdem über PaymentRequest.shippingAddress im Ereignis shippingaddresschange. Damit eine Lieferadresse abgefragt wird, musst du im Optionsobjekt von new PaymentRequest() den Wert requestShipping: true setzen.
Der Wert ist ein einfacher String. Die Spezifikation empfiehlt das internationale Format nach E.164, zum Beispiel "+4930123456". Verlassen kannst du dich darauf aber nicht. Hat der Nutzer keine Nummer angegeben, ist der Wert ein leerer String.
Brauchst du die Telefonnummer der zahlenden Person und nicht die des Empfängers, verwende besser die Option requestPayerPhone: true und lies den Wert aus PaymentResponse.payerPhone.
Rückgabewert
"+491701234567"). Ein leerer String, wenn keine Nummer vorhanden ist oder der Browser sie aus Datenschutzgründen entfernt hat.Beispiele
Telefonnummer des Empfängers nach der Zahlung auslesen
const methods = [{ supportedMethods: 'https://google.com/pay', data: { /* Konfiguration */ } }];
const details = {
total: { label: 'Gesamt', amount: { currency: 'EUR', value: '49.90' } },
shippingOptions: [{ id: 'std', label: 'Standard', amount: { currency: 'EUR', value: '0.00' }, selected: true }]
};
const checkout = async () => {
const request = new PaymentRequest(methods, details, { requestShipping: true });
const response = await request.show();
const phone = response.shippingAddress?.phone ?? '';
console.log(phone ? `Empfänger-Telefon: ${phone}` : 'Keine Telefonnummer angegeben');
await response.complete('success');
};
document.querySelector('#buy').addEventListener('click', checkout);Telefonnummer vor dem Senden an den Server prüfen
const isE164 = (value) => /^\+[1-9]\d{6,14}$/.test(value);
const buildOrder = (response) => {
const { shippingAddress } = response;
const phone = shippingAddress.phone.replace(/[\s()-]/g, '');
return {
recipient: shippingAddress.recipient,
city: shippingAddress.city,
phone: isE164(phone) ? phone : null // ungültige Nummer nicht übernehmen
};
};
// Test mit einem nachgebauten Antwortobjekt
console.log(buildOrder({ shippingAddress: { recipient: 'Erika Muster', city: 'Berlin', phone: '+49 30 123456' } }));Verhalten im Ereignis shippingaddresschange
const request = new PaymentRequest(methods, details, { requestShipping: true });
request.addEventListener('shippingaddresschange', (event) => {
// Aus Datenschutzgründen ist phone hier meist leer
console.log('phone während der Auswahl:', JSON.stringify(request.shippingAddress.phone));
event.updateWith({ ...details });
});// Wichtig · Fallstricke
- Veraltet:
PaymentAddresswurde aus der Payment-Request-Spezifikation entfernt. Chromium führt das Interface alsContactAddressweiter. Firefox und Safari unterstützen es nicht (Safari bietet nur Apple Pay mit eigener Datenstruktur). Prüfe die Verfügbarkeit mit'PaymentRequest' in windowund plane immer ein normales Formular als Ausweichlösung ein. - Datenschutz: Im Ereignis
shippingaddresschangeentfernen Browser sensible Felder wiephone,recipientundaddressLine, meist bleibt ein leerer String übrig. Die vollständige Nummer ist erst inPaymentResponse.shippingAddressverfügbar. - Das Format ist nicht garantiert. Normalisiere und prüfe die Nummer immer auf dem Server und vertraue dem Wert aus dem Browser nicht blind.
- Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert bzw. löst im Strict Mode einen
TypeErroraus. - Die Payment Request API funktioniert nur in sicheren Kontexten (HTTPS).