Lorsqu'un client tente d'acheter un produit 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. Pour ce faire rapidement, utilisez l'API Payment Request.
Structure de paiement de base
La construction d'un objet PaymentRequest nécessite deux paramètres : paymentMethods et paymentDetails. De plus, un troisième paramètre payment options est facultatif. Voici comment créer une requête de base :
const request = new PaymentRequest(paymentMethods, paymentDetails);
Découvrez 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 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 du paiement
Le deuxième paramètre, paymentDetails, est transmis en tant qu'objet et spécifie les détails du paiement pour la transaction. Il contient la valeur requise total, qui spécifie le montant total dû par le client. Ce paramètre peut également lister les articles achetés (facultatif).
L'exemple suivant montre la liste facultative des articles achetés (un seul article dans ce cas) ainsi que le montant total dû obligatoire. Dans les deux cas, l'unité monétaire est spécifiée pour 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érifiez si le mode de paiement est disponible.
Chrome vérifie si l'utilisateur et l'environnement sont prêts à effectuer un 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'invoquer la procédure de paiement. L'appel de canMakePayment() renvoie true 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, 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 a accepté d'effectuer un paiement, un objet JSON est transmis au marchand. Il contient toutes les informations requises pour transférer de l'argent. Le marchand peut ensuite l'envoyer au PSP pour qu'il traite le paiement.
Enfin, vous pouvez fermer l'interface utilisateur de la demande de paiement en terminant le processus avec response.complete('success') ou response.complete('fail'), selon le résultat renvoyé par le PSP.
Étape suivante
En savoir plus sur les paiements Web