PaymentRequest.shippingType — Eigenschaft · JavaScript-Referenz

Signatur

PaymentRequest.shippingType

Beschreibung

Die schreibgeschützte Eigenschaft shippingType eines PaymentRequest-Objekts sagt, wie die Ware zum Kunden kommt. Der Browser passt danach die Texte im Zahlungsdialog an. Beim Wert "delivery" steht dort zum Beispiel „Lieferadresse“ statt „Versandadresse“, bei "pickup" „Abholadresse“.

Den Wert legst du im dritten Argument des Konstruktors fest, also in options.shippingType. Er wird nur übernommen, wenn gleichzeitig options.requestShipping auf true steht. Fehlt shippingType dann, gilt der Standardwert "shipping". Ohne requestShipping: true liefert die Eigenschaft immer null.

"shipping": Die Ware wird an eine Adresse verschickt (Standardwert).
"delivery": Die Ware wird zugestellt, meist schneller als beim Versand, etwa bei Essenslieferungen.
"pickup": Der Kunde holt die Ware selbst ab. Die angegebene Adresse gilt dann z. B. als Treffpunkt oder Rechnungsadresse.

Sinnvoll ist die Eigenschaft vor allem, um in Ereignis-Handlern wie shippingaddresschange zu prüfen, welche Versandart gerade gilt. So kannst du etwa Versandkosten je nach Art berechnen.

Rückgabewert

Typ

"shipping" | "delivery" | "pickup" | null

Beschreibung

Die im Konstruktor gesetzte Versandart. Wurde requestShipping: true ohne shippingType gesetzt, ist es "shipping". Ohne Versandanforderung ist es null.

Beispiele

Versandart auslesen

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

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

console.log(request.shippingType);

delivery

Standardwert und null

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

// Versand angefordert, aber keine Versandart angegeben
const mitVersand = new PaymentRequest(methods, details, { requestShipping: true });
console.log(mitVersand.shippingType);

// Kein Versand angefordert: shippingType wird ignoriert
const ohneVersand = new PaymentRequest(methods, details, { shippingType: 'pickup' });
console.log(ohneVersand.shippingType);

shipping null

Versandkosten je nach Versandart berechnen

const kosten = { shipping: '4.90', delivery: '7.50', pickup: '0.00' };
const methods = [{ supportedMethods: 'https://example.com/pay' }];
const details = {
  total: { label: 'Summe', amount: { currency: 'EUR', value: '30.00' } }
};

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

request.addEventListener('shippingaddresschange', (event) => {
  const art = request.shippingType ?? 'shipping';
  const gebuehr = kosten[art];
  event.updateWith({
    ...details,
    shippingOptions: [{
      id: art,
      label: art === 'pickup' ? 'Abholung im Laden' : 'Versand',
      amount: { currency: 'EUR', value: gebuehr },
      selected: true
    }],
    total: {
      label: 'Summe',
      amount: { currency: 'EUR', value: (30 + Number(gebuehr)).toFixed(2) }
    }
  });
});

// Muss durch eine Nutzeraktion ausgelöst werden, z. B. einen Klick
document.querySelector('#kaufen').addEventListener('click', async () => {
  try {
    const response = await request.show();
    await response.complete('success');
  } catch (err) {
    console.warn('Zahlung abgebrochen:', err.name);
  }
});

// Wichtig · Fallstricke

Veraltet: Die Funktionen für Versand und Adressen wurden aus der Payment-Request-Spezifikation des W3C entfernt. shippingType gilt daher als veraltet und nicht standardisiert. Chromium-Browser und Safari unterstützen die Eigenschaft noch, Firefox hat sie nie ausgeliefert. Prüfe vorab, ob sie verfügbar ist, z. B. mit 'shippingType' in PaymentRequest.prototype.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie request.shippingType = 'pickup' wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Wer die Versandart ändern will, muss ein neues PaymentRequest-Objekt erzeugen.
Ein ungültiger Wert in options.shippingType löst im Konstruktor einen TypeError aus.
Die Eigenschaft ändert nur die Beschriftung im Dialog des Browsers. Die Versandlogik selbst musst du weiterhin auf dem Server umsetzen.
Die Payment Request API gibt es nur in sicheren Kontexten (HTTPS). show() muss durch eine Nutzeraktion ausgelöst werden.

Siehe auch

PaymentRequest PaymentRequest.shippingAddress PaymentRequest.shippingOption PaymentRequest.prototype.show() PaymentAddress.country