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 maintenant disponible

Dans une demande de paiement, il peut arriver que vous souhaitiez appliquer une remise ou un supplément en fonction du mode de paiement choisi par le client. La fonctionnalité PaymentDetailsModifier vous permet de le faire.

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 fiche de demande de paiement, dès qu'un utilisateur sélectionne un paiement par carte de crédit, un élément supplémentaire appelé "Frais de traitement" s'affiche, avec un montant de 3 $et un prix total de 71 $.

PaymentDetailsModifier contient les paramètres suivants:

Nom de propriété
`supportedMethods`	Spécifiez le mode de paiement auquel s'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 ajout des éléments supplémentaires.
`data`	Pour les paiements `basic-card`, il permet 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). Reportez-vous à la documentation fournie par chaque mode de paiement.

Lorsque des options de livraison sont disponibles, les choses se compliquent, car le prix total de modifiers ne peut pas être statique et doit être modifié de manière dynamique.

Pour ce faire, vous devez modifier les valeurs additionalDisplayItems et total de la propriété modifiers lors des événements shippingaddresschange et shippingoptionchange, comme vous le faites 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) a accepté 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 est disponible dans la fiche de base

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

Vérifiez bien le type de carte auprès de votre passerelle de paiement, car ce filtrage peut ne pas fonctionner parfaitement en fonction de la source.

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 : 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 à l'UI d'afficher "livraison" ou "retrait" au lieu de "livraison". shippingType accepte les chaînes shipping (par défaut), delivery ou pickup.

shippingType='pickup' — 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 convertir l'un en objet JSON en appelant la fonction toJSON() et éviter de créer des fonctions toDict() encombrantes.

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.
     });
}