PaymentRequest.id — Eigenschaft · JavaScript-Referenz

Signatur

PaymentRequest.id

Beschreibung

Die Eigenschaft id liefert die Kennung einer Zahlungsanfrage. Du kannst sie beim Erzeugen über details.id im Konstruktor new PaymentRequest(methodData, details) selbst festlegen, zum Beispiel mit deiner internen Bestell- oder Transaktionsnummer. Gibst du keine Kennung an, erzeugt der Browser selbst eine eindeutige Zeichenkette, in der Praxis meist eine UUID.

Wichtig wird die Kennung beim Abgleich einer Zahlung: Das PaymentResponse-Objekt, das show() nach der Bestätigung durch den Nutzer zurückgibt, hat die Eigenschaft requestId mit genau demselben Wert. So kannst du eine Antwort eindeutig einer Anfrage und damit einer Bestellung zuordnen. Das ist vor allem bei der serverseitigen Prüfung und beim Protokollieren nützlich, oder wenn mehrere Anfragen nacheinander entstehen.

Die Eigenschaft ist schreibgeschützt. Nach dem Erzeugen des Objekts lässt sich die Kennung nicht mehr ändern. Auch über updateWith() kannst du sie nicht nachträglich neu setzen.

Rückgabewert

Typ

string

Beschreibung

Die eindeutige Kennung der Zahlungsanfrage. Das ist entweder der Wert aus details.id oder eine vom Browser erzeugte Kennung, meist eine UUID.

Beispiele

Eigene Bestellnummer als Kennung setzen

const methodData = [{ supportedMethods: 'https://google.com/pay' }];

const details = {
  id: 'order-2024-000815', // eigene Transaktionsnummer
  total: {
    label: 'Gesamtsumme',
    amount: { currency: 'EUR', value: '49.90' }
  }
};

const request = new PaymentRequest(methodData, details);
console.log(request.id);

order-2024-000815

Vom Browser erzeugte Kennung auslesen

const request = new PaymentRequest(
  [{ supportedMethods: 'https://google.com/pay' }],
  {
    total: {
      label: 'Abo Monat 1',
      amount: { currency: 'EUR', value: '9.99' }
    }
  }
);

// Ohne details.id vergibt der Browser eine eindeutige Kennung
console.log(request.id);

z. B. 3f2b8c1e-7a4d-4e1b-9c6a-2d5f0e8b7a11

Antwort mit der Anfrage abgleichen und an den Server senden

const bezahlen = async (bestellung) => {
  const request = new PaymentRequest(
    [{ supportedMethods: 'https://google.com/pay' }],
    {
      id: bestellung.nummer,
      total: {
        label: 'Summe',
        amount: { currency: 'EUR', value: bestellung.betrag }
      }
    }
  );

  const response = await request.show();

  // requestId der Antwort entspricht request.id
  if (response.requestId !== request.id) {
    await response.complete('fail');
    throw new Error('Antwort passt nicht zur Anfrage');
  }

  const res = await fetch('/api/zahlung', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      bestellId: request.id,
      zahlung: response.toJSON()
    })
  });

  await response.complete(res.ok ? 'success' : 'fail');
};

// Aufruf in einem Klick-Handler, da show() eine Nutzeraktion benötigt
document.querySelector('#kaufen').addEventListener('click', () => {
  bezahlen({ nummer: 'order-4711', betrag: '19.95' }).catch(console.error);
});

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie request.id = 'x' wird ignoriert, im Strict Mode wirft sie einen TypeError. Lege die Kennung deshalb immer über details.id im Konstruktor fest.
Eindeutigkeit: Bei eigenen Kennungen prüft der Browser nicht, ob sie eindeutig sind. Du musst selbst sicherstellen, dass keine Bestellnummer doppelt vorkommt.
Keine Sicherheitsgarantie: Die Kennung kommt vom Client und lässt sich manipulieren. Prüfe Betrag und Bestellung immer serverseitig und verlasse dich nicht allein auf id bzw. requestId.
Keine sensiblen Daten: Die Kennung kann an den Zahlungsdienstleister weitergegeben werden. Personenbezogene Daten gehören deshalb nicht hinein.
Kompatibilität: Die Payment Request API gibt es in Chromium-Browsern (Chrome, Edge, Opera) und in Safari. Firefox unterstützt sie standardmäßig nicht. Sie ist nur in sicheren Kontexten (HTTPS) verfügbar. Prüfe die Unterstützung mit 'PaymentRequest' in window.

Siehe auch

NotRestoredReasons.id PaymentRequest.payerName PaymentRequest.shippingType PaymentRequest.shippingAddress PaymentRequest.shippingOption