Start · Sprachen · JavaScript · Referenz · PaymentRequest.getSecurePaymentConfirmationCapabilities()

PaymentRequest.getSecurePaymentConfirmationCapabilities()

Methode

Statische Methode, die per Promise ein Objekt liefert, das angibt, welche Fähigkeiten von <em>Secure Payment Confirmation</em> (SPC) der aktuelle Browser unterstützt.

seit JavaScript Experimentell: nur Chromium-basierte Browser, kein Kategorie: webapi

Signatur

PaymentRequest.getSecurePaymentConfirmationCapabilities()

Beschreibung

PaymentRequest.getSecurePaymentConfirmationCapabilities() ist eine statische Methode. Du rufst sie direkt auf dem Konstruktor PaymentRequest auf, nicht auf einer Instanz. Sie gibt ein Promise zurück. Dieses wird mit einem einfachen Objekt erfüllt, in dem jede Eigenschaft eine Fähigkeit der Funktion Secure Payment Confirmation (SPC) beschreibt. Der Wert ist jeweils ein boolean und zeigt, ob der Browser diese Fähigkeit unterstützt.

SPC ist eine Erweiterung der Payment Request API. Damit bestätigen Nutzer eine Zahlung mit WebAuthn, also etwa mit Fingerabdruck, Gesichtserkennung oder Geräte-PIN. Ein zusätzlicher Bestätigungsschritt wie 3-D Secure mit SMS-Code entfällt dann. Mit dieser Methode kann ein Händler oder ein Payment Service Provider (PSP) vorab prüfen, ob sich der SPC-Ablauf lohnt oder ob er gleich einen anderen Weg anbieten sollte.

Typische Nutzung: Beim Laden des Checkouts einmal die Fähigkeiten abfragen. Nur wenn die benötigten Fähigkeiten vorhanden sind, baust du einen PaymentRequest mit der Zahlungsmethode "secure-payment-confirmation" auf. Andernfalls greifst du auf den klassischen Ablauf zurück (Weiterleitung, SMS-TAN o. ä.). Der Aufbau ähnelt PublicKeyCredential.getClientCapabilities() aus WebAuthn.

Rückgabewert

Typ
Promise<Object<string, boolean>>
Beschreibung
Ein Promise, das mit einem Objekt erfüllt wird. Die Schlüssel sind die Namen der SPC-Fähigkeiten, die Werte zeigen mit true/false, ob der Browser die jeweilige Fähigkeit unterstützt. Fehlt eine Fähigkeit im Objekt, ist ihre Unterstützung unbekannt. Behandle sie dann wie false.

Beispiele

Unterstützung sicher prüfen und Fähigkeiten auflisten

const logSpcCapabilities = async () => {
  // Existiert die Methode überhaupt?
  if (typeof PaymentRequest?.getSecurePaymentConfirmationCapabilities !== 'function') {
    console.log('SPC-Fähigkeitsabfrage wird nicht unterstützt.');
    return;
  }

  const capabilities = await PaymentRequest.getSecurePaymentConfirmationCapabilities();

  for (const [name, supported] of Object.entries(capabilities)) {
    console.log(`${name}: ${supported ? 'ja' : 'nein'}`);
  }
};

logSpcCapabilities();
// Je nach Browser, z. B.: // <fähigkeit-a>: ja // <fähigkeit-b>: nein

Checkout: SPC nur anbieten, wenn eine Fähigkeit vorhanden ist

// Hilfsfunktion: Ist eine bestimmte Fähigkeit vorhanden?
const hasSpcCapability = async (name) => {
  if (!window.PaymentRequest?.getSecurePaymentConfirmationCapabilities) return false;
  try {
    const caps = await PaymentRequest.getSecurePaymentConfirmationCapabilities();
    return caps[name] === true; // Fehlender Schlüssel = nicht unterstützt
  } catch (err) {
    console.warn('Abfrage fehlgeschlagen:', err);
    return false;
  }
};

const chooseAuthFlow = async (requiredCapability) => {
  const useSpc = await hasSpcCapability(requiredCapability);
  document.querySelector('#pay-button').dataset.flow = useSpc ? 'spc' : 'redirect';
  return useSpc ? 'spc' : 'redirect';
};

// Den Fähigkeitsnamen gibt dein PSP bzw. die Spezifikation vor
chooseAuthFlow('beispielFaehigkeit').then((flow) => console.log('Gewählter Ablauf:', flow));
Gewählter Ablauf: redirect

Fähigkeiten einmal abfragen und zwischenspeichern

let spcCapsPromise = null;

const getSpcCaps = () => {
  spcCapsPromise ??= (window.PaymentRequest?.getSecurePaymentConfirmationCapabilities
    ? PaymentRequest.getSecurePaymentConfirmationCapabilities().catch(() => ({}))
    : Promise.resolve({}));
  return spcCapsPromise;
};

// Mehrere Komponenten nutzen dasselbe Ergebnis
const [a, b] = await Promise.all([getSpcCaps(), getSpcCaps()]);
console.log(a === b);
true

// Wichtig · Fallstricke

  • Experimentell: Die Methode gehört zur Secure Payment Confirmation-Spezifikation, die noch nicht abgeschlossen ist. Bisher unterstützen sie nur Chromium-basierte Browser (Chrome, Edge), und das je nach Version und Plattform verschieden. Firefox und Safari unterstützen SPC nicht. Prüfe vor jedem Aufruf, ob die Methode existiert.
  • Namen der Fähigkeiten können sich ändern: Welche Schlüssel das Objekt enthält, legt die Spezifikation fest, und diese entwickelt sich weiter. Schreibe Namen nicht fest in den Code, ohne sie gegen die aktuelle Spezifikation zu prüfen. Werte einen fehlenden Schlüssel immer als „nicht unterstützt“.
  • Nur in sicherem Kontext: Die Payment Request API funktioniert nur über HTTPS (oder auf localhost). In iframes muss zusätzlich die Permissions Policy payment erlaubt sein.
  • Keine Garantie für Erfolg: Eine unterstützte Fähigkeit heißt nicht, dass auch ein passender WebAuthn-Schlüssel für den Nutzer registriert ist. PaymentRequest.show() kann trotzdem fehlschlagen. Halte deshalb immer einen anderen Ablauf bereit.
  • Datenschutz: Das Ergebnis beschreibt nur, was der Browser kann. Es verrät nichts über Nutzerdaten oder hinterlegte Zugangsdaten.