PaymentResponse.toJSON() — Methode · JavaScript-Referenz

Signatur

PaymentResponse.prototype.toJSON()

Beschreibung

toJSON() ist der Standard-Serialisierer des Interfaces PaymentResponse. Die Methode erzeugt ein einfaches JavaScript-Objekt mit den wichtigsten Eigenschaften der Zahlungsantwort, etwa requestId, methodName, details, shippingAddress, shippingOption, payerName, payerEmail und payerPhone.

Meist ruft man die Methode nicht direkt auf. JSON.stringify() nutzt sie automatisch, sobald eine PaymentResponse serialisiert wird. So kann man die Antwort des Browsers mit wenig Code per fetch() an das eigene Backend oder den Zahlungsdienstleister schicken, damit dort die Zahlung abgewickelt wird.

Ohne toJSON() würde JSON.stringify() nur {} liefern. Die Eigenschaften liegen nämlich als Getter auf dem Prototyp und nicht als eigene aufzählbare Eigenschaften auf dem Objekt. Der Serialisierer macht aus diesen Gettern echte Datenfelder.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit den serialisierbaren Eigenschaften der PaymentResponse (z. B. requestId, methodName, details, shippingAddress, payerEmail). Verschachtelte Objekte wie PaymentAddress werden über ihr eigenes toJSON() ebenfalls umgewandelt.

Beispiele

Zahlungsantwort an das Backend senden

const methods = [{ supportedMethods: 'https://example.com/pay' }];
const details = {
  total: { label: 'Summe', amount: { currency: 'EUR', value: '19.99' } }
};

const checkout = async () => {
  const request = new PaymentRequest(methods, details, { requestPayerEmail: true });
  const response = await request.show();

  try {
    // JSON.stringify ruft response.toJSON() automatisch auf
    const res = await fetch('/api/zahlung', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(response)
    });
    await response.complete(res.ok ? 'success' : 'fail');
  } catch (err) {
    await response.complete('fail');
    console.error('Zahlung fehlgeschlagen:', err);
  }
};

document.querySelector('#kaufen').addEventListener('click', checkout);

toJSON() direkt aufrufen und Felder auslesen

const request = new PaymentRequest(
  [{ supportedMethods: 'https://example.com/pay' }],
  { total: { label: 'Abo', amount: { currency: 'EUR', value: '9.00' } } },
  { requestPayerName: true, requestPayerEmail: true }
);

const response = await request.show();
const daten = response.toJSON();

console.log(Object.keys(daten));
console.log(daten.methodName, daten.payerEmail);
await response.complete('success');

["requestId", "methodName", "details", "shippingAddress", "shippingOption", "payerName", "payerEmail", "payerPhone"] https://example.com/pay max@example.com

Unterschied zu Object.keys auf der Instanz

const response = await new PaymentRequest(
  [{ supportedMethods: 'https://example.com/pay' }],
  { total: { label: 'Test', amount: { currency: 'EUR', value: '1.00' } } }
).show();

// Getter liegen auf dem Prototyp – keine eigenen Eigenschaften
console.log(Object.keys(response).length);
// toJSON liefert echte Datenfelder
console.log(Object.keys(response.toJSON()).length > 0);
await response.complete('success');

0 true

// Wichtig · Fallstricke

Sensible Daten: Das Ergebnis kann Zahlungs-Tokens, Namen, E-Mail-Adressen, Telefonnummern und Lieferadressen enthalten. Diese Daten nur per HTTPS übertragen, nicht im Klartext protokollieren und nicht in localStorage speichern.
Nur ein Abbild: toJSON() liefert eine Momentaufnahme. Ändert sich die Antwort später, etwa durch retry(), muss man die Methode erneut aufrufen.
Methodenspezifische Details: Wie details aufgebaut ist, hängt von der Zahlungsmethode ab (z. B. Google Pay oder Apple Pay). Das Backend muss dieses Format kennen.
Sicherer Kontext: Die Payment Request API gibt es nur unter HTTPS. show() muss durch eine Nutzeraktion ausgelöst werden.
Kompatibilität: Wird von Chromium-Browsern (Chrome, Edge, Opera) und Safari unterstützt. In Firefox ist die API nicht standardmäßig aktiviert. Vorher mit 'PaymentRequest' in window prüfen.
Nach dem Senden immer response.complete() aufrufen, sonst bleibt die Zahlungsoberfläche des Browsers offen.

Siehe auch

JSON.stringify() PannerNode.setPosition() PaymentResponse.retry() PaymentResponse.complete() PaymentAddress.toJSON()