Signatur
Beschreibung
Die Eigenschaft userHint des PaymentManager-Interfaces ist ein Text, den man lesen und schreiben kann. Eine webbasierte Zahlungs-App (Payment Handler) gibt damit dem Nutzer einen zusätzlichen Hinweis in der Zahlungsauswahl des Browsers. Das kann zum Beispiel die letzten vier Ziffern einer hinterlegten Karte sein ("**** 4242") oder der Name des verknüpften Kontos.
Man erreicht die Eigenschaft über registration.paymentManager. Das ist die ServiceWorkerRegistration des Service Workers, der die Zahlungs-App bereitstellt. Man setzt den Wert typischerweise direkt nach der Registrierung des Service Workers oder wenn sich die hinterlegten Zahlungsdaten ändern. Zum Beispiel, wenn sich der Nutzer anmeldet oder eine neue Karte hinzufügt.
Der Hinweis dient nur der Anzeige. Er hat keinen Einfluss darauf, ob die App ausgewählt oder die Zahlung ausgeführt wird. Wie und ob der Browser den Text tatsächlich darstellt, hängt von der Implementierung ab.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: der Hinweistext, der neben der Zahlungs-App erscheinen soll. Andere Werte werden in einen String umgewandelt. |
Rückgabewert
Beispiele
Hinweis nach der Service-Worker-Registrierung setzen
const registerPaymentApp = async () => {
if (!('serviceWorker' in navigator)) return;
const registration = await navigator.serviceWorker.register('/payment-sw.js');
if (!registration.paymentManager) {
console.log('Payment Handler API wird nicht unterstützt.');
return;
}
// Letzte Kartenziffern als Orientierung für den Nutzer
registration.paymentManager.userHint = '**** 4242';
console.log('Hinweis gesetzt:', registration.paymentManager.userHint);
};
registerPaymentApp();Hinweis nach Login dynamisch aktualisieren
const updatePaymentHint = async (user) => {
const registration = await navigator.serviceWorker.ready;
const manager = registration.paymentManager;
if (!manager) return;
manager.userHint = user
? `Konto: ${user.email}`
: '';
console.log(`Aktueller Hinweis: "${manager.userHint}"`);
};
updatePaymentHint({ email: 'anna@example.com' });Hinweis zusammen mit enableDelegations setzen
const setupPaymentManager = async () => {
const registration = await navigator.serviceWorker.ready;
const manager = registration.paymentManager;
if (!manager) return;
manager.userHint = 'Visa ···· 1234';
if (typeof manager.enableDelegations === 'function') {
await manager.enableDelegations(['shippingAddress', 'payerEmail']);
}
console.log('PaymentManager konfiguriert:', manager.userHint);
};
setupPaymentManager();// Wichtig · Fallstricke
- Experimentell: Die Payment Handler API gibt es nur in Chromium-basierten Browsern (Chrome, Edge). Firefox und Safari unterstützen sie nicht. Prüfe vorher, ob sie verfügbar ist, z. B. mit
if (registration.paymentManager). - Nur in einem sicheren Kontext (HTTPS) mit registriertem Service Worker verfügbar.
- Datenschutz: Schreibe keine vollständigen Kartennummern, IBANs oder andere sensible Daten in den Hinweis. Der Text erscheint in der Browser-Oberfläche und kann auf fremden Seiten sichtbar werden, die eine Zahlungsanfrage stellen.
- Ob der Browser den Wert dauerhaft speichert, ist nicht zuverlässig festgelegt. Setze den Hinweis daher bei Bedarf erneut, z. B. nach jeder Registrierung.
- Halte den Text kurz. Lange Hinweise schneidet der Browser möglicherweise ab.