PaymentResponse.shippingOption — Eigenschaft · JavaScript-Referenz

Signatur

get PaymentResponse.shippingOption

Beschreibung

Die Eigenschaft shippingOption eines PaymentResponse-Objekts gibt die id der Versandoption zurück, die der Benutzer im Zahlungsdialog ausgewählt hat. Die MDN-Kurzbeschreibung nennt das PaymentRequest-Interface, gemeint ist hier aber das PaymentResponse-Objekt. Dieses bekommen Sie, wenn das Promise von PaymentRequest.prototype.show() erfüllt wird. Der Wert stimmt mit einer der id-Angaben überein, die Sie in details.shippingOptions an den PaymentRequest-Konstruktor übergeben haben.

Sie brauchen die Eigenschaft, wenn Sie nach dem Bezahlvorgang wissen müssen, welche Versandart (z. B. Standard, Express, Abholung) gewählt wurde. So können Sie die Bestellung richtig abwickeln und auf dem Server den Endpreis prüfen.

Ein Wert wird nur gesetzt, wenn Sie beim Erzeugen des Requests in den Optionen requestShipping: true angegeben haben. Ohne diese Option ist shippingOption immer null. Solange der Dialog geöffnet ist, finden Sie die aktuelle Auswahl in PaymentRequest.shippingOption. Auf Änderungen reagieren Sie über das Ereignis shippingoptionchange.

Rückgabewert

Typ

string | null

Beschreibung

Die id der ausgewählten Versandoption als Zeichenkette. null, wenn keine Versanddaten angefordert wurden (requestShipping nicht gesetzt) oder keine Option ausgewählt ist.

Beispiele

Gewählte Versandoption nach dem Bezahlen auslesen

const methods = [{ supportedMethods: 'https://google.com/pay', data: { /* Konfiguration des Zahlungsanbieters */ } }];

const details = {
  total: { label: 'Summe', amount: { currency: 'EUR', value: '49.90' } },
  shippingOptions: [
    { id: 'standard', label: 'Standardversand (3–5 Tage)', amount: { currency: 'EUR', value: '0.00' }, selected: true },
    { id: 'express', label: 'Expressversand (1 Tag)', amount: { currency: 'EUR', value: '9.90' } }
  ]
};

const request = new PaymentRequest(methods, details, { requestShipping: true });

const checkout = async () => {
  const response = await request.show();
  console.log('Versandart:', response.shippingOption);
  await response.complete('success');
};

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

Versandart: express

Gesamtpreis bei Wechsel der Versandoption anpassen

const prices = { standard: '0.00', express: '9.90' };
const subtotal = 49.90;

request.addEventListener('shippingoptionchange', (event) => {
  const id = request.shippingOption; // aktuelle Auswahl im Dialog
  const shipping = Number(prices[id]);

  event.updateWith({
    total: { label: 'Summe', amount: { currency: 'EUR', value: (subtotal + shipping).toFixed(2) } },
    shippingOptions: details.shippingOptions.map((opt) => ({ ...opt, selected: opt.id === id }))
  });
});

Versandoption zur Prüfung an den Server senden

const submitOrder = async (response) => {
  const res = await fetch('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      shippingOption: response.shippingOption, // z. B. 'standard'
      shippingAddress: response.shippingAddress?.toJSON(),
      payment: response.toJSON()
    })
  });
  await response.complete(res.ok ? 'success' : 'fail');
};

const response = await request.show();
if (response.shippingOption === null) {
  console.warn('Keine Versandoption gewählt – wurde requestShipping gesetzt?');
}
await submitOrder(response);

// Wichtig · Fallstricke

Nur mit requestShipping: true: Ohne diese Option im dritten Konstruktor-Argument ist der Wert immer null.
Schreibgeschützt: Eine Zuweisung hat keine Wirkung. Im strikten Modus wird ein TypeError ausgelöst.
Nicht mit PaymentRequest.shippingOption verwechseln: Die Eigenschaft am Request zeigt die aktuelle Auswahl, solange der Dialog geöffnet ist. Die Eigenschaft an der Response enthält die endgültige Auswahl.
Auf dem Server prüfen: Der Wert kommt vom Client. Vertrauen Sie ihm bei der Preisberechnung nicht blind, sondern prüfen Sie die ID und die Versandkosten auf dem Server.
Nach retry(): Wenn Sie response.retry() aufrufen, kann sich der Wert ändern. Lesen Sie ihn deshalb danach neu aus.
Kompatibilität: Die Payment Request API gibt es nur in sicheren Kontexten (HTTPS). Chromium-basierte Browser und Safari unterstützen sie, Safari im Zusammenspiel mit Apple Pay. Firefox unterstützt sie standardmäßig nicht. Prüfen Sie die Unterstützung vorher mit 'PaymentRequest' in window.

Siehe auch

PaymentAddress.organization PaymentResponse.shippingAddress PaymentResponse.payerEmail PaymentResponse.requestId PaymentResponse.details