Cette page a été traduite par l'API Cloud Translation.

Modifications apportées à l'API de demande de paiement

Eiji Kitamura

Chrome 62

PaymentDetailsModifier est désormais disponible

Dans une demande de paiement, vous pouvez être amené à proposer une remise ou un supplément en fonction du mode de paiement choisi par le client. PaymentDetailsModifier est la fonctionnalité que vous pouvez utiliser pour y parvenir.

Ajoutez la propriété modifiers au deuxième argument du constructeur PaymentRequest, ainsi qu'un tableau d'objets PaymentDetailsModifier, qui correspond à des règles déclaratives sur la façon dont les éléments d'affichage et le total doivent être modifiés en fonction du mode de paiement choisi par le client.

L'exemple suivant montre comment déclarer que des frais de traitement de 3 $seront facturés à un utilisateur s'il choisit de payer 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 sélectionne un paiement par carte de crédit, un élément d'affichage supplémentaire intitulé "Frais de traitement" s'affiche : 3 $, avec 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 d'affichage supplémentaires que vous souhaitez ajouter (remises ou frais supplémentaires)
`total`	Prix total après l'ajout des éléments supplémentairesDisplayItems.
`data`	Pour les paiements `basic-card`, il s'agit d'un moyen 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, la procédure est un peu délicate, car le prix total de modifiers ne peut pas être statique et nécessite une modification dynamique.

Pour ce faire, vous allez modifier les 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. Il accepte désormais une seule chaîne comme argument.

Notez que vous pouvez toujours utiliser un tableau pour le moment.

À éviter

Ancienne méthode, qui fonctionne toujours pour le moment.

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

À faire

Nouveau : la nouvelle façon de faire.

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

Assurez-vous de vérifier le type de carte auprès de votre passerelle de paiement, car ce filtrage peut ne pas fonctionner parfaitement selon la source des cartes.

Chrome 57

PaymentRequest est désormais disponible dans les iFrames

L'API Payment Request peut désormais être appelée à partir d'un iframe en ajoutant l'attribut allowpaymentrequest à l'élément iframe.

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

PaymentMethodData est compatible avec "basic-card"

Le premier argument du constructeur PaymentRequest() est un tableau de données sur la méthode de paiement. Le format PaymentMethodData a été modifié dans cette version.

À éviter

Ancienne méthode, qui fonctionne toujours pour le moment.

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

À faire

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 dans supportedMethods et est basé sur les spécifications de la fiche de base. Notez que la spécification inclut supportedTypes, qui accepte credit, debit ou prepaid, mais que 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 les articles de paiement, les développeurs peuvent ajouter pending pour indiquer que le prix n'est pas encore totalement déterminé. Le champ pending accepte une valeur booléenne.

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

Cette option est couramment utilisée pour afficher des éléments de campagne tels que les frais de port ou les montants des taxes qui dépendent de la sélection de l'adresse de livraison ou des options de livraison. Chrome indique les champs en attente dans l'UI de 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 demander le nom du payeur séparément des informations sur 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.

shippingType='pickup' [retrait_en_magasin] — shippingType="pickup"

Fonctions de sérialisation disponibles pour PaymentResponse et PaymentAddress

L'objet PaymentResponse et l'objet PaymentAddress sont désormais sérialisables en 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 nouveau 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.
     });
}