PayerResponse.payerPhone — Eigenschaft · JavaScript-Referenz

Signatur

readonly PaymentResponse.payerPhone

Beschreibung

Die schreibgeschützte Eigenschaft payerPhone des Interfaces PaymentResponse enthält die Telefonnummer, die der Benutzer im Bezahldialog des Browsers ausgewählt oder eingegeben hat. Du brauchst sie zum Beispiel für Rückfragen zur Lieferung, für SMS-Benachrichtigungen zum Versand oder als Kontaktangabe bei Buchungen.

Einen Wert gibt es nur, wenn du beim Erstellen des PaymentRequest im Optionsobjekt requestPayerPhone: true übergeben hast. Sonst fragt der Browser keine Telefonnummer ab und die Eigenschaft ist null.

Der Wert ist eine Zeichenkette. Die Browser liefern sie meist im internationalen Format (E.164, z. B. +4930123456). Verlassen solltest du dich darauf aber nicht. Prüfe und normalisiere die Nummer deshalb vor dem Speichern auf dem Server. Ist sie ungültig, kannst du den Benutzer mit PaymentResponse.retry() um eine Korrektur bitten. Ändert er daraufhin seine Angaben, löst das das Ereignis payerdetailchange aus.

Rückgabewert

Typ

string | null

Beschreibung

Die Telefonnummer des Zahlenden als Zeichenkette. null, wenn im PaymentRequest nicht requestPayerPhone: true gesetzt war.

Beispiele

Telefonnummer beim Bezahlen anfordern und auslesen

const methods = [{ supportedMethods: 'https://google.com/pay', data: { /* Konfiguration für Google Pay */ } }];
const details = {
  total: { label: 'Gesamt', amount: { currency: 'EUR', value: '49.90' } }
};
const options = { requestPayerPhone: true, requestPayerName: true };

const button = document.querySelector('#buy');
button.addEventListener('click', async () => {
  const request = new PaymentRequest(methods, details, options);
  try {
    const response = await request.show();
    console.log('Telefon:', response.payerPhone);
    await response.complete('success');
  } catch (err) {
    console.error('Zahlung abgebrochen:', err.name);
  }
});

Telefon: +4930123456

Nummer prüfen und bei Fehler mit retry() korrigieren lassen

const isValidPhone = (phone) => /^\+[1-9]\d{6,14}$/.test(phone?.replace(/[\s-]/g, '') ?? '');

const validateResponse = async (response) => {
  while (!isValidPhone(response.payerPhone)) {
    // Fehlermeldung im Bezahldialog anzeigen
    await response.retry({
      payer: { phone: 'Bitte gib eine gültige internationale Telefonnummer an (z. B. +49 …).' }
    });
  }
  return response;
};

// Verwendung nach request.show():
// const response = await validateResponse(await request.show());
// await fetch('/api/order', { method: 'POST', body: JSON.stringify({ phone: response.payerPhone }) });
// await response.complete('success');

Auf geänderte Kontaktdaten reagieren (payerdetailchange)

const handlePayerChange = (response) => {
  response.addEventListener('payerdetailchange', () => {
    console.log('Neue Telefonnummer:', response.payerPhone);
  });
  // Alternativ über die on-Eigenschaft:
  // response.onpayerdetailchange = () => console.log(response.payerPhone);
};

Neue Telefonnummer: +491701234567

// Wichtig · Fallstricke

Name: Das Interface heißt PaymentResponse. Ein Interface PayerResponse gibt es nicht.
Nur mit Anforderung: Ohne requestPayerPhone: true ist der Wert immer null. Prüfe den Wert deshalb vor der Weiterverarbeitung, z. B. mit response.payerPhone ?? ''.
Format nicht garantiert: Wie die Nummer formatiert ist, hängt vom Browser und von der Zahlungsmethode ab. Prüfe sie deshalb auch auf dem Server.
Datenschutz: Die Telefonnummer ist ein personenbezogenes Datum. Fordere sie nur an, wenn du sie wirklich brauchst (Datensparsamkeit laut DSGVO). Übertrage sie nur verschlüsselt.
Sicherer Kontext: Die Payment Request API gibt es nur über HTTPS. In iframes funktioniert sie nur mit allow="payment".
Kompatibilität: Chromium-Browser und Safari unterstützen die Eigenschaft. Firefox unterstützt die Payment Request API nicht. Prüfe vorher mit 'PaymentRequest' in window und biete ein normales Formular als Ausweichlösung an.

Siehe auch

PaymentAddress.phone PaymentResponse.payerEmail PaymentResponse.methodName PaymentRequest.payerName PaymentResponse.details