Fonctionnement de l'API Payment Request

Découvrez le fonctionnement général de l'API Payment Request.

Eiji Kitamura

API Payment Request

Lorsqu'un client essaie d'effectuer un achat sur votre site Web, celui-ci doit demander au client de fournir des informations de paiement et, éventuellement, d'autres informations telles que les préférences de livraison. Vous pouvez y parvenir facilement et rapidement à l'aide du API Payment Request (API PR)

Structure de base

La création d'un objet PaymentRequest nécessite deux paramètres: payment modes de paiement et les détails de paiement. Un troisième paramètre d'options de paiement est également disponible. est facultatif. Vous pouvez créer une requête de base comme ceci:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Voyons comment chaque paramètre est créé et utilisé.

Modes de paiement

Le premier paramètre, paymentMethods, est une liste des modes de paiement acceptés dans une variable de tableau. Chaque élément du tableau comporte deux composants, supportedMethods et, éventuellement, data.

Pour supportedMethods, le marchand doit spécifier un mode de paiement. Identifiant comme https://bobbucks.dev/pay. L'existence et le contenu de data dépendent de : le contenu de supportedMethods et la conception du fournisseur de l'application de paiement.

Ces deux informations doivent être fournies par le fournisseur de l'application de paiement.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Détails du paiement

Le deuxième paramètre, paymentDetails, est transmis en tant qu'objet et spécifie détails du paiement de la transaction. Elle contient la valeur obligatoire total, qui spécifie le montant total dû du client. Ce paramètre peut également et lister éventuellement les articles achetés.

Dans l'exemple ci-dessous, la liste des articles achetés en option (un seul article, dans ce cas) s'affiche, de même que le montant total dû. Dans les deux cas, la devise est spécifiée avec chaque montant.

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

Vérifier si le mode de paiement est disponible

Chrome vérifie si l'utilisateur et l'environnement sont prêts à effectuer le paiement lors de la construction d'un objet PaymentRequest.

Pour vérifier si l'utilisateur et l'environnement sont prêts à effectuer un paiement, appelez canMakePayment() avant d'appeler la procédure de paiement. Appel en cours canMakePayment() renvoie true si le navigateur accepte au moins un paiement spécifiée dans l'objet.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

En savoir plus sur PaymentRequest.canMakePayment() sur MDN

La méthode show()

Après avoir défini les deux paramètres et créé l'objet request comme indiqué ci-dessus, vous pouvez appeler la méthode show(), qui affiche l'utilisateur de l'application de paiement de commande.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

L'apparence de l'interface utilisateur de l'application de paiement dépend entièrement de l'application de paiement. un fournisseur de services agréé. Une fois que le client accepte d'effectuer un paiement, un objet JSON est transmis au marchand. Elle contient toutes les informations requises pour transférer de l'argent. Le marchand peut ensuite l'envoyer au fournisseur de services de paiement pour traiter le paiement.

Enfin, vous pouvez fermer l'interface de demande de paiement en suivant la procédure avec response.complete('success') ou response.complete('fail') selon le résultat renvoyé par la PSP.

Étape suivante

En savoir plus sur les paiements Web