Änderungen an der Zahlungsanforderungs-API

Eiji Kitamura

Chrome 62

PaymentDetailsModifier ist jetzt verfügbar

In einer Zahlungsanforderung kann es vorkommen, dass Sie einen Rabatt oder eine Zusatzgebühr anbieten möchten, je nachdem, welche Zahlungsmethode der Kunde gewählt hat. PaymentDetailsModifier ist die Funktion, die Sie dazu verwenden können.

Fügen Sie dem zweiten Argument des Konstruktors PaymentRequest die Eigenschaft modifiers sowie ein Array von PaymentDetailsModifier-Objekten hinzu. Das sind deklarative Regeln, wie Artikel und Gesamtpreis je nach der vom Kunden ausgewählten Zahlungsmethode angezeigt werden sollen.

Das folgende Beispiel zeigt, wie Sie angeben, dass einem Nutzer eine Bearbeitungsgebühr von 3 $für die Auswahl einer Kreditkartenzahlung berechnet wird.

let methods = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard']
   supportedTypes: ['credit', 'debit']
 }
}];

let details = {
 displayItems: [{
   label: 'T-shirt',
   amount: { currency: 'USD', value: '68.00' }
 }],
 total: {
   label: 'Total price',
   amount: { currency: 'USD', value: '68.00' }
 },
 modifiers: [{
   supportedMethods: 'basic-card',
   data: {
     supportedTypes: ['credit']
   },
   additionalDisplayItems: [{
     label: 'Processing fee',
     amount: { currency: 'USD', value: '3.00' }
   }],
   total: {
     label: 'Credit card price',
     amount: {currency: ‘USD’, value: ‘71.00’}}
 }]
};

let options = {};

let request = new PaymentRequest(methods, details, options);

Sobald der Nutzer auf dem Zahlungsanfrage-Tab die Option „Kreditkartenzahlung“ auswählt, wird ihm ein zusätzliches Element namens „Bearbeitungsgebühr“ mit einer Belastung von 3 $angezeigt.Der Gesamtpreis beträgt 71,00 $.

PaymentDetailsModifier enthält die folgenden Parameter:

Bei Versandoptionen wird es etwas knifflig, da der Gesamtpreis von modifiers nicht statisch sein kann und eine dynamische Änderung erfordert.

Dazu ändern Sie die additionalDisplayItems- und total-Werte der modifiers-Eigenschaft bei den Ereignissen shippingaddresschange und shippingoptionchange, genau wie Sie es bei der displayItems-Eigenschaft des PaymentDetails-Objekts tun.

Das Attribut „supportedMethods“ nimmt jetzt einen String an

Für die Property supportedMethods im PaymentMethodData-Objekt (das erste Argument für den PaymentRequest-Konstruktor) wurde bisher ein String-Array verwendet, das eine Zahlungsmethode angibt. Es wird jetzt ein einzelner String als Argument verwendet.

Beachten Sie, dass die Angabe eines Arrays vorerst weiterhin funktioniert.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chrome 61

supportedTypes in basic card is available

Wenn supportedMethods „basic-card“ ist, können Sie jetzt supportedTypes angeben, um anzugeben, welche Kartentypen unterstützt werden: „credit“, „debit“ und „prepaid“.

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

Prüfe den Kartentyp in deinem Zahlungs-Gateway, da diese Filterung je nachdem, woher die Karte stammt, möglicherweise nicht perfekt funktioniert.

Chrome 57

PaymentRequest ist jetzt in Iframes verfügbar

Die Payment Request API kann jetzt innerhalb eines iframe aufgerufen werden, indem dem iframe-Element das Attribut allowpaymentrequest hinzugefügt wird.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData unterstützt „Basiskarte“

Das erste Argument für den PaymentRequest()-Konstruktor ist ein Array mit Zahlungsmethodedaten. In dieser Version wurde das Format PaymentMethodData geändert.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

Das Format des Attributs data hängt vom Wert in supportedMethods ab und basiert auf der Spezifikation für Basiskarten. Die Spezifikation enthält supportedTypes, für das credit, debit oder prepaid zulässig ist. In Chrome 57 wird diese Eigenschaft jedoch ignoriert und alle Werte in supoprtedNetworks werden als Kreditkarten behandelt.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chrome 56

ausstehend

Im Rahmen der Informationen zum Zahlungselement können Entwickler pending hinzufügen, um anzugeben, dass der Preis noch nicht vollständig festgelegt ist. Das Feld pending akzeptiert einen booleschen Wert.

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

Diese Option wird häufig verwendet, um Positionen wie Versand- oder Steuerbeträge anzuzeigen, die von der Auswahl der Versandadresse oder der Versandoptionen abhängen. Chrome kennzeichnet ausstehende Felder in der Benutzeroberfläche für die Zahlungsanfrage.

requestPayerName

Im Rahmen der Versandoption (drittes Argument für PaymentRequest) können Entwickler jetzt requestPayerName hinzufügen, um den Namen des Zahlungspflichtigen getrennt von den Informationen zur Versandadresse anzufordern. requestPayerName akzeptiert einen booleschen Wert.

shippingType

Im Rahmen der Versandoption (drittes Argument für PaymentRequest) können Entwickler jetzt shippingType hinzufügen, um anzugeben, dass auf der Benutzeroberfläche „Lieferung“ oder „Abholung“ anstelle von „Versand“ angezeigt werden soll. Für shippingType sind die Strings shipping (Standard), delivery oder pickup zulässig.

Serializer-Funktionen für „PaymentResponse“ und „PaymentAddress“

Das Objekt „PaymentResponse“ und das PaymentAddress-Objekt können jetzt JSON-serialisiert werden. Entwickler können sie mithilfe der toJSON()-Funktion in ein JSON-Objekt konvertieren und müssen keine umständlichen toDict()-Funktionen erstellen.

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

Zusätzlich zur API-Verfügbarkeit kannst du prüfen, ob ein Nutzer eine aktive Zahlungsmethode hat, bevor du die Payment Request API aufrufst. Diese Option ist optional, da Nutzer auch über die Zahlungsoberfläche eine neue Zahlungsmethode hinzufügen können.

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
     request.canMakePayment().then(result => {
       if (result) {
         // Payment methods are available.
       } else {
         // Payment methods are not available, but users can still add
        // a new payment method in Payment UI.
       }
     }).catch(error => {
       // Unable to determine.
     });
}