Chrome 62
PaymentDetailsModifier est désormais disponible
Dans certains cas, vous pouvez proposer une remise ou des frais supplémentaires dans une demande de paiement en fonction du mode de paiement choisi par le client.
Pour ce faire, vous pouvez utiliser la fonctionnalité PaymentDetailsModifier.
Ajoutez la propriété modifiers au deuxième argument du constructeur PaymentRequest, ainsi qu'un tableau d'objets PaymentDetailsModifier, qui constitue des règles déclaratives concernant la façon dont les articles et le total d'affichage doivent être modifiés en fonction du mode de paiement choisi par le client.
L'exemple suivant montre comment déclarer qu'un utilisateur doit payer 3 $de frais de traitement pour avoir choisi un paiement par carte de crédit.
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);
Sur la feuille de demande de paiement réelle, dès qu'un utilisateur choisit un paiement par carte de crédit, un élément supplémentaire intitulé "Frais de traitement" s'affiche, avec un débit de 3 $, pour un prix total de 71 $.
PaymentDetailsModifier contient les paramètres suivants:
| Nom de propriété | |
|---|---|
supportedMethods | Indiquez le mode de paiement qui applique cette règle. |
additionalDisplayItems |
Éléments display supplémentaires pour lesquels vous souhaitez ajouter des remises ou des frais supplémentaires. |
total | Prix total après l'ajout des additionalDisplayItems. |
data | Pour le paiement basic-card, cette option permettra de filtrer des types de cartes spécifiques avec supportedTypes. Sinon, l'utilisation de ce paramètre dépend du mode de paiement (application de paiement). Consultez la documentation fournie par chaque mode de paiement. |
Lorsqu'il existe des options de livraison, les choses se compliquent, car le prix total de modifiers ne peut pas être statique et doit être modifié dynamiquement.
Pour ce faire, vous allez modifier additionalDisplayItems et total de la propriété modifiers lors des événements shippingaddresschange et shippingoptionchange, comme vous le feriez pour la propriété displayItems de l'objet PaymentDetails.
La propriété "supportedMethods" accepte désormais une chaîne
La propriété supportedMethods de l'objet PaymentMethodData (premier argument du constructeur PaymentRequest) utilise un tableau de chaînes indiquant un mode de paiement. Elle prend maintenant une seule chaîne comme argument.
Notez qu'un tableau continuera de fonctionner pour le moment.
Ancien : fonctionne toujours pour le moment.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}, {
supportedMethods: ['https://bobpay.xyz']
}];
Nouveau : la nouvelle méthode.
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}, {
supportedMethods: 'https://bobpay.xyz'
}];
Chrome 61
supportedTypes dans la carte de base est disponible
Lorsque supportedMethods est défini sur basic-card, vous pouvez désormais fournir supportedTypes pour indiquer le type de carte accepté parmi credit, debit et prepaid.
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
supportedTypes: ['credit', 'debit', 'prepaid']
}
}];
Veillez à vérifier le type de carte avec votre passerelle de paiement, car ce filtrage peut ne pas fonctionner parfaitement en fonction de sa source.
Chrome 57
PaymentRequest est désormais disponible dans les iFrames
L'API Payment Request peut désormais être appelée à partir d'un élément iframe en ajoutant l'attribut allowpaymentrequest à l'élément iframe.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData accepte les cartes de base
Le premier argument du constructeur PaymentRequest() est un tableau de données de mode de paiement. Le format PaymentMethodData a été modifié dans cette version.
Ancien : fonctionne toujours pour le moment.
var methodData = [{
supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);
Nouveau : la nouvelle structure.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}];
var request = new PaymentRequest(methodData, details, options);
Le format de la propriété data dépend de la valeur indiquée dans supportedMethods et est basé sur la spécification de la carte de base. Notez que la spécification inclut supportedTypes, qui accepte credit, debit ou prepaid, mais Chrome 57 ignore cette propriété et traite toutes les valeurs de supoprtedNetworks comme des cartes de crédit.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay'],
supportedTypes: ['credit'] <= not available
}
}];
Chrome 56
en attente
Dans les informations sur l'élément de paiement, les développeurs peuvent ajouter pending pour indiquer que le prix n'est pas encore entièrement déterminé. Le champ pending accepte une valeur booléenne.
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
Elle est généralement utilisée pour afficher des articles tels que les frais de port ou le montant des taxes qui dépendent de l'adresse de livraison ou des options de livraison sélectionnées. Chrome indique les champs en attente dans l'interface utilisateur pour la demande de paiement.
requestPayerName
Dans le cadre de l'option de livraison (troisième argument de PaymentRequest), les développeurs peuvent désormais ajouter requestPayerName pour indiquer le nom du payeur séparément de l'adresse de livraison.
requestPayerName accepte une valeur booléenne.
shippingType
Dans le cadre de l'option de livraison (troisième argument de PaymentRequest), les développeurs peuvent désormais ajouter shippingType pour demander que l'interface utilisateur affiche "livraison" ou "retrait" au lieu de "livraison".
shippingType accepte les chaînes shipping (par défaut), delivery ou pickup.
Fonctions de sérialiseur disponibles pour PaymentResponse et PaymentAddress
Les objets PaymentResponse et PaymentAddress sont désormais sérialisables au format JSON. Les développeurs peuvent en convertir un en objet JSON en appelant la fonction toJSON() et en évitant de créer des fonctions toDict() fastidieuses.
request.show().then(response => {
let res = response.toJSON();
});
canMakePayment
En plus de la disponibilité de l'API, vous pouvez vérifier si un utilisateur dispose d'un mode de paiement actif avant d'appeler l'API Payment Request. N'oubliez pas que cette étape est facultative, car les utilisateurs peuvent toujours ajouter un mode de paiement dans l'UI de paiement.
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.
});
}