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.
Alt: Funktioniert vorerst noch.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
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 supportedMethods
„basic-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.
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 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
.
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.
});
}