PaymentRequest.canMakePayment() — Methode · JavaScript-Referenz

Signatur

PaymentRequest.prototype.canMakePayment()

Beschreibung

Mit canMakePayment() findest du heraus, ob ein zuvor erzeugtes PaymentRequest-Objekt so konfiguriert ist, dass der User-Agent mindestens eine der übergebenen Zahlungsarten (supportedMethods, z. B. "https://google.com/pay" oder "https://apple.com/apple-pay") verarbeiten kann. Die Methode öffnet keine Bezahloberfläche und braucht keine Nutzeraktion.

Typisch ist der Einsatz vor dem Aufruf von show(): Nur wenn das Promise zu true aufgelöst wird, zeigst du etwa einen „Schnell bezahlen“-Button an. Ist das Ergebnis false, leitest du auf einen klassischen Checkout mit Formular weiter.

Wichtig: true bedeutet nur, dass die Zahlungsart grundsätzlich unterstützt wird (bzw. ein passender Payment Handler installiert werden kann). Ob der Nutzer tatsächlich eine Karte oder ein Konto hinterlegt hat, verrät die Methode aus Datenschutzgründen nicht zuverlässig. Dafür gibt es in Chromium das nicht standardisierte hasEnrolledInstrument().

Rückgabewert

Typ

Promise<boolean>

Beschreibung

Ein Promise, das zu true aufgelöst wird, wenn der User-Agent mindestens eine der angegebenen Zahlungsarten unterstützt, sonst zu false. Es wird mit einer DOMException abgelehnt, z. B. InvalidStateError, wenn die Anfrage bereits angezeigt oder abgeschlossen wurde, oder NotAllowedError bei zu häufigen Aufrufen.

Beispiele

Unterstützung vor dem Anzeigen prüfen

const methods = [{
  supportedMethods: 'https://google.com/pay',
  data: {
    environment: 'TEST',
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: { allowedAuthMethods: ['PAN_ONLY'], allowedCardNetworks: ['VISA', 'MASTERCARD'] }
    }]
  }
}];

const details = {
  total: { label: 'Gesamt', amount: { currency: 'EUR', value: '19.99' } }
};

const request = new PaymentRequest(methods, details);

const supported = await request.canMakePayment();
console.log('Zahlung möglich:', supported);

Zahlung möglich: true

Express-Button nur bei Unterstützung einblenden

const payButton = document.querySelector('#express-pay');
const fallbackLink = document.querySelector('#classic-checkout');

const setupCheckout = async () => {
  if (!('PaymentRequest' in window)) {
    fallbackLink.hidden = false;
    return;
  }

  const request = new PaymentRequest(
    [{ supportedMethods: 'https://apple.com/apple-pay', data: { version: 3, merchantIdentifier: 'merchant.de.example', merchantCapabilities: ['supports3DS'], supportedNetworks: ['visa', 'masterCard'], countryCode: 'DE' } }],
    { total: { label: 'Warenkorb', amount: { currency: 'EUR', value: '42.00' } } }
  );

  try {
    const ok = await request.canMakePayment();
    payButton.hidden = !ok;
    fallbackLink.hidden = ok;
  } catch (err) {
    console.warn('Prüfung fehlgeschlagen:', err.name);
    fallbackLink.hidden = false;
  }
};

setupCheckout();

Prüfung und anschließendes show() im Klick-Handler

const buy = async () => {
  const request = new PaymentRequest(
    [{ supportedMethods: 'https://bobbucks.dev/pay' }],
    { total: { label: 'Abo', amount: { currency: 'EUR', value: '9.00' } } }
  );

  if (!(await request.canMakePayment())) {
    location.href = '/checkout';
    return;
  }

  const response = await request.show();
  // Zahlungsdaten an den Server senden …
  await response.complete('success');
};

document.querySelector('#buy').addEventListener('click', buy);

// Wichtig · Fallstricke

Browser-Kompatibilität: In Chromium-Browsern und Safari verfügbar, in Firefox standardmäßig deaktiviert. Frag vorher mit 'PaymentRequest' in window ab, ob die API überhaupt existiert, und plane immer einen klassischen Checkout als Ausweichlösung ein.
Nur in sicheren Kontexten (HTTPS) verfügbar. In iframes muss das Attribut allow="payment" gesetzt sein.
Browser begrenzen die Aufrufrate, damit Seiten keinen Fingerabdruck erstellen können. Zu viele Aufrufe mit unterschiedlichen Zahlungsarten können zu NotAllowedError oder zu einem pauschalen false/true führen.
Rufst du die Methode nach show() auf, wird das Promise mit InvalidStateError abgelehnt. Für jeden Prüf- und Bezahlvorgang ein eigenes PaymentRequest erzeugen.
true heißt nicht, dass der Nutzer ein Zahlungsmittel hinterlegt hat. In Chromium kann hasEnrolledInstrument() genauer prüfen, es ist aber nicht standardisiert.
Safari unterstützt über diese API nur Apple Pay. Dort gibt es zusätzlich ApplePaySession.canMakePayments().

Siehe auch

PaymentRequest.abort() PaymentRequest.show() PaymentRequest.securePaymentConfirmationAvailability() PaymentRequest.getSecurePaymentConfirmationCapabilities() PaymentRequestEvent.respondWith()