Apple Pay avec la SDK Paysafe JS
Veuillez suivre les guides sur l’intégration avec Paysafe JS : Intégration à la plateforme de paiement.
- Obtenez vos clés API publiques (création de jeton à usage unique) et privées (traitement des paiements) à partir du portail des marchands.
- Créez votre formulaire de paiement HTML personnalisé avec le contenu (texte et images) et le style que vous souhaitez.
- Incluez la balise de la SDK Paysafe.js JavaScript (paysafe.min.js) <script> dans l’élément <head> de votre plateforme de paiement HTML.
- Ajoutez des éléments de conteneur vides (habituellement ) à votre HTML pour le bouton Apple Pay (et/ou les champs de paiement).
- Appelez la fonction fields.setup de la SDK avec votre clé API à jeton à usage unique. La fonction de configuration crée le bouton Apple Pay (et tout autre champ) dans les conteneurs fournis.
- Appelez la fonction instance.show de la SDK, sans paramètres. La fonction d’affichage visualise les champs Paysafe JS et renvoie une liste des modes de paiement disponibles.
- Enfin, ajoutez la fonction instance.tokenize à l’événement de clic du bouton Apple Pay. Cela renvoie un jeton de "payment handle" à usage unique (le jeton représentant les données de paiement saisies par l’utilisateur est stocké dans l’API Paiements). Les jetons à usage unique ne sont valides que 15 minutes.
- Envoyez le jeton à votre serveur marchand, où le point de terminaison de paiement standard de l’API Paiements peut être utilisé pour effectuer un paiement.
Exemple de formulaire de paiement
Voici un exemple de code Paysafe.js simple qui crée un formulaire de paiement avec le bouton Apple Pay. Le bouton de paiement déclenche la tokenisation des données saisies par l’utilisateur et (si la tokenisation est réussie) affiche le jeton dans la console du navigateur.
<html><head><script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script></head><body><div id="applePay"></div><p></p><script type="text/javascript">
// Base64-encoded version the Single-Use Token API key.
// Create the key below by concatenating the API username and password
// separated by a colon and Base 64 encoding the result
var apiKey = "Votre clé d’API de jeton à usage unique encodée en Base64";
var options = {
// You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration
currencyCode: "USD
environment: "TEST",
fields: {
applePay: {applePay: {
selector: ’#apple-pay’,
type: ’buy’,
label: ’Demo JS’,
color: ’white-outline’,
}
}
};
let demoInstance;
paysafe.fields
.setup(API_KEY, options)
.then((instance) => {
console.log("Setup insance completed.");
demoInstance = instance;
return instance.show();
})
.then((paymentMethods) => {
if (paymentMethods.applePay && !paymentMethods.applePay.error) {
document.getElementById("apple-pay").addEventListener("click", function(event) {
instance.tokenize({
amount: 1000,amount: 1000,
transactionType: "PAYMENT",
paymentType: "APPLEPAY",
applePay: {
country: 'US',
},
merchantRefNum: 'merchant-ref-num',
})
.then((result) => {
// write the Payment token value to the browser console
console.log(result.token);
// close the Apple Pay window
instance.complete('success');
}).catch(error => {
// display the tokenization error in dialog window
alert(JSON.stringify(error));
// close the Apple Pay window
instance.complete('fail');
})
}, false);
}
}).catch(error => {
// display any setup errors
alert(JSON.stringify(error));
});
</script></body></html>
Les erreurs de Paysafe.js sont numérotées dans l’intervalle 9nnn. Les erreurs dans les autres plages sont générées par l’API Paiement et peuvent résulter de l’utilisation d’une clé API à jeton à usage unique non valide, ou à l’utilisation de votre clé API serveur à serveur plutôt que de la clé API à jeton à usage unique.
Pour plus d’informations sur l’affichage des boutons Apple Pay, veuillez vous référer à Configuration de la SDK Apple Pay Ph.
Pour plus d’informations sur la façon de segmenter en unités un paiement Apple Pay, veuillez vous référer à Segmentation en unités PH → Exemple de segmentation en unités avec ApplePay.