Signatur
Beschreibung
Die Eigenschaft recipient des Interfaces PaymentAddress ist schreibgeschützt und enthält den Namen der Person oder Organisation, an die bei einer Zahlung über die Payment Request API geliefert werden soll, zum Beispiel „Erika Mustermann“ oder „Muster GmbH, z. Hd. Einkauf“.
Das PaymentAddress-Objekt bekommt man normalerweise über PaymentResponse.shippingAddress, nachdem der Nutzer den Zahlungsdialog bestätigt hat, oder im Handler des Events shippingaddresschange über PaymentRequest.shippingAddress. Damit eine Lieferadresse abgefragt wird, muss beim Erstellen des PaymentRequest die Option requestShipping: true gesetzt sein.
Solange die Adresse noch nicht endgültig bestätigt ist, also etwa während shippingaddresschange, kann der Browser aus Datenschutzgründen persönliche Felder wie recipient schwärzen. Die Eigenschaft ist dann ein leerer String. Den vollständigen Namen gibt es erst im PaymentResponse nach show().
Wenn kein Name angegeben wurde, liefert die Eigenschaft einen leeren String "" und nicht null.
Rückgabewert
"".Beispiele
Empfängernamen nach Abschluss der Zahlung auslesen
const methods = [{ supportedMethods: 'https://example.com/pay' }];
const details = {
total: { label: 'Gesamt', amount: { currency: 'EUR', value: '49.90' } },
shippingOptions: [{
id: 'standard', label: 'Standardversand', selected: true,
amount: { currency: 'EUR', value: '0.00' }
}]
};
const checkout = async () => {
const request = new PaymentRequest(methods, details, { requestShipping: true });
const response = await request.show();
const address = response.shippingAddress;
console.log(`Lieferung an: ${address.recipient || '(kein Name angegeben)'}`);
await response.complete('success');
};
document.querySelector('#buy').addEventListener('click', checkout);Geschwärzte Adresse bei shippingaddresschange
const request = new PaymentRequest(methods, details, { requestShipping: true });
request.addEventListener('shippingaddresschange', (event) => {
const { country, city, recipient } = request.shippingAddress;
// recipient ist hier meist leer (Datenschutz)
console.log({ country, city, recipient });
event.updateWith(details);
});
request.show().then((res) => res.complete('success'));Mit Feature-Erkennung an den Server senden
const toOrderPayload = (address) => ({
name: 'recipient' in address ? address.recipient.trim() : '',
street: address.addressLine?.join(', ') ?? '',
postalCode: address.postalCode,
city: address.city,
country: address.country
});
const response = await request.show();
await fetch('/api/orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(toOrderPayload(response.shippingAddress))
});
await response.complete('success');// Wichtig · Fallstricke
- Veraltet:
PaymentAddressund die OptionenrequestShippingbzw.shippingAddresswurden aus der aktuellen Payment-Request-Spezifikation entfernt. Unterstützt wurden sie nur in älteren Chromium-Browsern und in Safari; Firefox hat die API nie freigeschaltet. Für neue Projekte sollte man Adressen besser über ein eigenes Formular (mitautocomplete="shipping name") abfragen. - Während
shippingaddresschangeistrecipientoft ein leerer String. Den vollständigen Wert gibt es erst imPaymentResponse. - Die API funktioniert nur in einem sicheren Kontext (HTTPS), und
show()muss durch eine Nutzeraktion ausgelöst werden. - Der Wert kommt vom Nutzer. Vor der Ausgabe im DOM darum escapen (z. B.
textContentstattinnerHTMLverwenden) und auf dem Server prüfen. - Personennamen sind personenbezogene Daten im Sinne der DSGVO. Sie sollten nur so lange gespeichert werden, wie es für die Lieferung nötig ist.