PaymentRequest.abort() — Methode · JavaScript-Referenz

Signatur

PaymentRequest.prototype.abort()

Beschreibung

Mit abort() beendet die Webseite von sich aus eine Zahlungsanforderung, die mit PaymentRequest.prototype.show() gestartet wurde. Der Browser schließt dann das Zahlungsfenster. Das Promise, das show() zurückgegeben hat, wird mit einer DOMException vom Typ AbortError abgelehnt.

Typische Einsatzfälle:

Zeitlimit: Ein Warenkorb oder eine reservierte Ware ist nur eine begrenzte Zeit gültig.
Änderung im Hintergrund: Der Lagerbestand ist erschöpft oder der Preis hat sich geändert.
Navigation innerhalb einer SPA: Der Nutzer verlässt die Kasse, bevor er die Zahlung abgeschlossen hat.

Die Methode gibt selbst ein Promise zurück. Es wird erfüllt, sobald der Abbruch geklappt hat. Es wird abgelehnt, wenn der Abbruch nicht mehr möglich ist, zum Beispiel weil die Zahlung schon verarbeitet wird. Nach einem erfolgreichen Abbruch lässt sich dasselbe PaymentRequest-Objekt nicht noch einmal verwenden. Für einen neuen Versuch braucht man eine neue Instanz.

Rückgabewert

Typ

Promise<undefined>

Beschreibung

Ein Promise, das mit undefined erfüllt wird, wenn der Abbruch geklappt hat. Es wird abgelehnt mit InvalidStateError, wenn die Anforderung nicht angezeigt wird (show() wurde nicht aufgerufen oder ist schon abgeschlossen). Mit InvalidStateError wird es auch abgelehnt, wenn der Browser den Abbruch nicht mehr zulässt, etwa weil die Zahlung bereits verarbeitet wird.

Beispiele

Zahlung nach Zeitlimit automatisch abbrechen

const methods = [{ supportedMethods: 'https://google.com/pay', data: { /* ... */ } }];
const details = {
  total: { label: 'Gesamt', amount: { currency: 'EUR', value: '49.90' } }
};

const request = new PaymentRequest(methods, details);

// Nach 5 Minuten abbrechen
const timer = setTimeout(async () => {
  try {
    await request.abort();
    console.log('Zahlung wegen Zeitüberschreitung abgebrochen');
  } catch (err) {
    console.warn('Abbruch nicht möglich:', err.name);
  }
}, 5 * 60 * 1000);

try {
  const response = await request.show();
  clearTimeout(timer);
  await response.complete('success');
} catch (err) {
  clearTimeout(timer);
  if (err.name === 'AbortError') {
    console.log('show() wurde abgebrochen');
  }
}

Zahlung wegen Zeitüberschreitung abgebrochen show() wurde abgebrochen

Abbruch, wenn der Artikel ausverkauft ist

const startCheckout = async (methods, details, productId) => {
  const request = new PaymentRequest(methods, details);

  // Serverseitige Bestandsänderungen empfangen
  const events = new EventSource(`/api/stock/${productId}`);
  events.addEventListener('soldout', () => {
    request.abort()
      .then(() => alert('Leider ausverkauft – Zahlung abgebrochen.'))
      .catch(() => { /* Zahlung läuft bereits, Abbruch nicht möglich */ });
  });

  try {
    const response = await request.show();
    await response.complete('success');
    return response;
  } finally {
    events.close();
  }
};

Abbruch beim Verlassen der Kasse in einer SPA

let activeRequest = null;

const pay = async (methods, details) => {
  activeRequest = new PaymentRequest(methods, details);
  try {
    const response = await activeRequest.show();
    await response.complete('success');
  } catch (err) {
    console.log('Zahlung beendet:', err.name);
  } finally {
    activeRequest = null;
  }
};

// Wird vom Router aufgerufen, wenn die Kasse verlassen wird
const onLeaveCheckout = async () => {
  if (activeRequest) {
    await activeRequest.abort().catch(() => {});
  }
};

Zahlung beendet: AbortError

// Wichtig · Fallstricke

Immer mit catch absichern: Wenn abort() aufgerufen wird, bevor show() läuft oder nachdem die Zahlung abgeschlossen ist, wird das Promise mit InvalidStateError abgelehnt. Ohne catch entsteht eine unbehandelte Ablehnung.
Abbruch ist nicht garantiert: Hat der Nutzer die Zahlung schon bestätigt und der Zahlungsdienst verarbeitet sie bereits, kann der Browser den Abbruch verweigern.
Nicht wiederverwendbar: Nach einem Abbruch lässt sich dieselbe Instanz nicht erneut mit show() anzeigen. Für einen neuen Versuch eine neue Instanz erzeugen.
AbortError gezielt behandeln: Der Abbruch lässt das Promise von show() scheitern. AbortError sollte man deshalb von echten Fehlern unterscheiden und nicht als Zahlungsfehler anzeigen.
Kompatibilität: Die Payment Request API gibt es in Chromium-Browsern und Safari. In Firefox ist sie standardmäßig deaktiviert. Sie funktioniert nur in sicheren Kontexten (HTTPS) und in iframes nur mit dem Attribut allow=\"payment\". Vorher die Unterstützung prüfen: 'PaymentRequest' in window.

Siehe auch

PaymentAddress.toJSON() PaymentRequest.show() PaymentRequest.canMakePayment() PaymentRequest.securePaymentConfirmationAvailability() PaymentRequest.getSecurePaymentConfirmationCapabilities()