Diese Seite wurde von der Cloud Translation API übersetzt.

Änderungen an der Zahlungsanforderungs-API

Eiji Kitamura

Chrome 62

PaymentDetailsModifier ist jetzt verfügbar

In einer Zahlungsanfrage können Sie je nach ausgewählter Zahlungsmethode einen Rabatt oder eine zusätzliche Gebühr angeben. Mit PaymentDetailsModifier können Sie das erreichen.

Fügen Sie dem zweiten Argument des Konstruktors PaymentRequest die Eigenschaft modifiers sowie ein Array von PaymentDetailsModifier-Objekten hinzu. Diese deklarativen Regeln geben an, wie Artikel und Gesamtpreis je nach Zahlungsmethode des Kunden angezeigt werden sollen.

Im folgenden Beispiel wird gezeigt, wie Sie festlegen, dass einem Nutzer eine Bearbeitungsgebühr von 3 $berechnet wird, wenn er sich für eine Kreditkartenzahlung entscheidet.

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 Blatt „Zahlungsanfrage“ die Option „Kreditkartenzahlung“ auswählt, wird ihm ein zusätzliches Element namens „Bearbeitungsgebühr“ mit einer Gebühr von 3 $angezeigt.Der Gesamtpreis beträgt 71,00 $.

PaymentDetailsModifier enthält die folgenden Parameter:

Property-Name
`supportedMethods`	Geben Sie an, für welche Zahlungsmethode diese Regel gilt.
`additionalDisplayItems`	Zusätzliche Displayelemente, für die Sie entweder Rabatte oder zusätzliche Gebühren hinzufügen möchten.
`total`	Gesamtpreis nach Hinzufügen der zusätzlichenDisplayItems.
`data`	Bei `basic-card`-Zahlungen können Sie damit bestimmte Kartentypen mit `supportedTypes` filtern. Andernfalls hängt die Verwendung dieses Parameters von der Zahlungsmethode (Zahlungs-App) ab. Weitere Informationen finden Sie in der Dokumentation der jeweiligen Zahlungsmethode.

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.

Für das Attribut „supportedMethods“ wird jetzt ein String verwendet

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.

Hinweis: Die Angabe eines Arrays funktioniert vorerst weiterhin.

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']
}];

New – 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 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üfen Sie den Kartentyp bei Ihrem Zahlungsgateway, da diese Filterung je nach Herkunft möglicherweise nicht einwandfrei 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 „basic-card“

Das erste Argument für den PaymentRequest()-Konstruktor ist ein Array mit Zahlungsmethodedaten. Das PaymentMethodData-Format 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);

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 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 zeigt in der Benutzeroberfläche für die Zahlungsanfrage ausstehende Felder an.

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.

shippingType='pickup' — shippingType="pickup"

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

Sie können nicht nur die API-Verfügbarkeit prüfen, sondern auch, ob ein Nutzer eine aktive Zahlungsmethode hat, bevor Sie die Payment Request API aufrufen. 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.
     });
}