Änderungen an der Zahlungsanforderungs-API

Eiji Kitamura
Eiji Kitamura

Chrome 62

PaymentDetailsModifier ist jetzt verfügbar

Es gibt Fälle, in denen Sie bei einer Zahlungsanforderung einen Rabatt oder eine zusätzliche Gebühr gewähren möchten, je nach der vom Kunden gewählten Zahlungsmethode. Dazu können Sie die Funktion PaymentDetailsModifier verwenden.

Fügen Sie dem zweiten Argument des PaymentRequest-Konstruktors die Property modifiers zusammen mit einem Array von PaymentDetailsModifier-Objekten hinzu. Dabei handelt es sich um deklarative Regeln dazu, wie Anzeigeelemente und die Gesamtsumme geändert werden sollen, je nachdem, welche Zahlungsmethode der Kunde verwendet.

Das folgende Beispiel zeigt, wie Sie erklären, dass einem Nutzer für die Auswahl einer Kreditkartenzahlung eine Bearbeitungsgebühr in Höhe von 3 $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);

Wenn ein Nutzer eine Kreditkartenzahlung auswählt, wird auf dem Tabellenblatt mit den Zahlungsanforderungen ein zusätzlicher Anzeigeelement namens „Bearbeitungsgebühr“ in Höhe von 3 $mit einem Gesamtpreis von 71,00 $angezeigt.

PaymentDetailsModifier enthält die folgenden Parameter:

Property-Name
supportedMethods Geben Sie an, auf welche Zahlungsmethode diese Regel angewendet wird.
additionalDisplayItems Zusätzliche Displayelemente, um die Sie entweder Rabatte oder zusätzliche Gebühren hinzufügen können.
total Gesamtpreis nach dem Hinzufügen der additionalDisplayItems.
data Bei Zahlungen mit basic-card wird dies verwendet, um bestimmte Kartentypen mit supportedTypes zu filtern. Andernfalls hängt die Verwendung dieses Parameters von der Zahlungsmethode (Zahlungs-App) ab. Weitere Informationen findest du in der Dokumentation der jeweiligen Zahlungsmethode.

Bei Versandoptionen ist das ein bisschen kompliziert, da der Gesamtpreis für modifiers nicht statisch sein darf und dynamisch geändert werden muss.

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

unterstützteMethods-Eigenschaft jetzt einen String

Das Attribut supportedMethods im Objekt PaymentMethodData (das erste Argument für den Konstruktor PaymentRequest) verwendet ein Array von Strings, das eine Zahlungsmethode angibt. Jetzt wird ein einzelner String als Argument verwendet.

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

Don'ts

Alt: Funktioniert vorerst noch.

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

Neu – die neue Art.

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

Chrome 61

„supportedTypes“ auf der Basiskarte ist verfügbar

Wenn supportedMethodsbasic-card“ ist, kannst du jetzt supportedTypes angeben, um anzugeben, welche Kartentypen unter „credit“, „debit“ und „prepaid“ unterstützt werden.

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

Überprüfe den Kartentyp bei deinem Zahlungs-Gateway noch einmal, da diese Filterung je nach Quelle möglicherweise nicht perfekt funktioniert.

Chrome 57

PaymentRequest ist jetzt in iFrames verfügbar

Die Payment Request API kann jetzt aus einem iframe heraus aufgerufen werden. Dazu muss dem iframe-Element das Attribut allowpaymentrequest hinzugefügt werden.

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

PaymentMethodData unterstützt „basic-card“

Das erste Argument für den Konstruktor PaymentRequest() ist ein Array von Zahlungsmethodendaten. Das Format PaymentMethodData wurde in dieser Version geändert.

Don'ts

Alt: Funktioniert vorerst noch.

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

Neu : Die neue Struktur.

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 Basic Card. Die Spezifikation enthält supportedTypes, das credit, debit oder prepaid akzeptiert. Chrome 57 ignoriert dieses Attribut und behandelt alle Werte in supoprtedNetworks als Kreditkarten.

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

Chrome 56

Ausstehend

Als Teil der Informationen zur Zahlungsposition können Entwickler pending hinzufügen, um anzuzeigen, 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
    },

Dies wird häufig verwendet, um Positionen wie Versandkosten oder Steuern anzuzeigen, die von der Auswahl der Versandadresse oder Versandoptionen abhängen. Chrome zeigt auf der Benutzeroberfläche ausstehende Felder für die Zahlungsanforderung an.

requestPayerName

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

shippingType

Als Teil der Versandoption (drittes Argument für PaymentRequest) können Entwickler jetzt shippingType hinzufügen, um anzufordern, dass die UI „Lieferung“ oder „Abholung“ anstelle von „Versand“ anzeigt. shippingType akzeptiert die Strings shipping (Standard), delivery oder pickup.

shippingType=&#39;delivery&#39;
shippingType="delivery"
shippingType=&#39;pickup&#39; [Abholoption]
shippingType="pickup"

Für PaymentResponse und PaymentAddress verfügbare Serializer-Funktionen

Das PaymentResponse-Objekt und das PaymentAddress-Objekt sind jetzt JSON-serialisierbar. Entwickler können eines in ein JSON-Objekt konvertieren, indem sie die Funktion toJSON() aufrufen und lästige toDict()-Funktionen vermeiden.

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

canMakePayment

Zusätzlich zur API-Verfügbarkeit können Sie prüfen, ob ein Nutzer eine aktive Zahlungsmethode hat, bevor Sie die Payment Request API aufrufen. Dies ist optional, da Nutzer weiterhin auf der Zahlungs-UI 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.
     });
}