Utiliser la SDK Requête Paysafe
Cette section décrit comment utiliser la SDK Requête Paysafe avec ApplePay.
Les étapes de base sont les suivantes :
- Incluez la SDK Requête Paysafe dans votre formulaire de paiement HTML.
- Ajoutez ou similaire à votre formulaire de paiement. La SDK a besoin d’un élément div avec un identifiant pour pouvoir le remplacer par le bouton de paiement Apple Pay. La fonction showButtons fait référence à ce div par l’intermédiaire de son paramètre buttonOptions.selector.
- Appelez init function de la requête avec votre clé API à usage unique. Cette fonction initialise l’instance de Requête Paysafe, valide les options de Requête Paysafe et envoie une requête en arrière-plan pour obtenir les informations de paiement du marchand correspondant à la clé API.
- Spécifiez la fonction de rappel onTokenization qui reçoit le jeton de paiement Paysafe à usage unique généré par l’API Coffre-fort client. onTokenization est appelée lorsque la fiche de paiement est autorisée par l’utilisateur (à l’aide de l’empreinte digitale ou de l’identification faciale). Si aucune erreur n’est renvoyée, le jeton est envoyé au marchand, qui l’utilisera pour finaliser l’achat.
- Appelez la fonction showButtons pour afficher le bouton de paiement pour le paymentMethod spécifié. Dès que l’on clique sur le bouton de paiement, une session Apple Pay est créée, au cours de laquelle le marchand est validé par Apple et, si tout est conforme, la fiche de paiement s’affiche, prête à recevoir le paiement.
En option, vous pouvez effectuer les opérations suivantes avant d’appeler showButtons :
- Appelez la fonction canMakePayment pour vérifier que l’appareil du client est en mesure d’utiliser Apple Pay avant de tenter d’encaisser le paiement. Un rappel renvoie ces informations, que vous pouvez ensuite utiliser pour décider de la suite à donner à votre flux de paiement, comme l’affichage d’une erreur ou l’affichage des boutons de paiement. La fonction showButtons effectue également cette vérification, mais si elle échoue, le paiement échouera également.
- Mettez à jour les options spécifiées dans la fonction init en appelant la fonction updateOptions. Vous pourriez vouloir faire cela parce que, par exemple, inita déjà été appelée avec un montant, mais votre client décide de sélectionner un autre article; en appelant updateOptions, vous pouvez mettre à jour le montant.
Toutes ces fonctions peuvent renvoyer des erreurs, qui sont décrites ici.
La manière dont Apple Pay interagit avec l’API Paiements par carte de Paysafe pour traiter le paiement est décrite ici.
Inclure la SDK
Il y a deux façons d’inclure la SDK :
- Inclure la dernière version officielle – Paysafe recommande vivement cette approche.
- Inclure une version spécifique
Inclure la dernière version officielle
Pour inclure la dernière version officielle de la SDK, utilisez ce qui suit :
<head>
<script src="https://hosted.paysafe.com/request/v1/latest/paysafe.request.min.js"></script>
</head>
Paysafe recommande cette approche car vous recevrez automatiquement toutes les dernières mises à jour et correctifs.
Exemple minimal Apple Pay
L’exemple de code suivant montre le JavaScript de Requête Paysafe pour n’invoquer que les éléments essentiels : initialisation de l’instance (init), définition de la manière de renvoyer le jeton de paiement (onTokenization), et affichage du bouton de paiement qui démarre la session Apple Pay (showButtons).
<html>
<head>
<script type="text/javascript" src="https://hosted.paysafe.com/request/v1/latest/paysafe.request.min.js"></script>
</head>
<body>
...
<div id="x-paysafe-apple-pay-button"></div>
...
<script>
paysafe.request.init("my API key", {
country: "US",
currency: "USD",
amount: 1234,
label: "My label",
environment: "TEST"
});
paysafe.request.onTokenization(function (event, error) {
if (event) {
// Process the token - event.result.token
// Acknowledge - event.showSuccess() or reject event.showFailure()
event.showSuccess();
} else {
// handle error
}
});
paysafe.request.showButtons(function (displayedPaymentMethods, error) {
if (error) {
// handle error
}
});
</script>
</body>
</html>