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 tente d'effectuer un achat sur votre site Web, celui-ci doit lui demander de fournir des informations de paiement et, éventuellement, d'autres informations telles que ses préférences de livraison. Vous pouvez le faire facilement et rapidement à l'aide de l'API Payment Request (PR).

Structure de base

La construction d'un objet PaymentRequest nécessite deux paramètres: les modes de paiement et les détails de paiement. De plus, un troisième paramètre Options de paiement est facultatif. Une requête de base peut être créée comme suit:

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 de modes de paiement acceptés dans une variable de tableau. Chaque élément du tableau comprend deux composants, supportedMethods et, éventuellement, data.

Pour supportedMethods, le marchand doit spécifier un identifiant de mode de paiement tel que https://bobbucks.dev/pay. L'existence et le contenu de data dépendent du contenu de supportedMethods et de 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 des paiements

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

Dans l'exemple ci-dessous, la liste facultative des articles achetés (un seul article, dans ce cas) est affichée, ainsi que le montant total dû. Dans les deux cas, l'unité monétaire est spécifiée avec chaque montant individuel.

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

Avant d'appeler la procédure de paiement, le marchand peut vérifier si l'utilisateur et l'environnement sont prêts à effectuer un paiement.

L'appel de canMakePayment() vérifie si le navigateur accepte au moins un mode de paiement spécifié 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'interface utilisateur de l'application de paiement.

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 du fournisseur de l'application de paiement. Une fois que le client accepte d'effectuer un paiement, un objet JSON est transmis au marchand. Il contient toutes les informations requises pour le transfert d'argent. Le marchand peut alors l'envoyer au fournisseur de services de paiement pour traiter le paiement.

Enfin, vous pouvez fermer l'interface utilisateur des demandes de paiement en exécutant le processus avec response.complete('success') ou response.complete('fail'), en fonction du résultat renvoyé par la PSP.

Étape suivante

En savoir plus sur les paiements Web