Intégration de cartes enregistrées
La fonctionnalité de cartes enregistrées de Paysafe.js permet aux clients d’effectuer leurs paiements plus rapidement en utilisant une carte enregistrée dans leur profil client.
Enregistrement d’une carte dans un profil client
Après avoir émis avec succès un "payment handle" à usage unique pour un mode de paiement par carte de Paysafe.js, le marchand a la possibilité de l’ajouter au profil d’un client en fonction de ses intentions.
Pour un nouveau client, le marchand peut utiliser la fonction Créer un profil à l’aide d’un jeton à usage unique qui créera un nouveau profil client et ajoutera les données de la carte à partir du jeton de paiement.
Pour un client existant, la fonction Créer une carte à l’aide d’un jeton à usage unique ajoutera les données de la carte du jeton de paiement à un profil client existant.
Paysafe recommande d’effectuer un paiement réussi à l’aide du jeton ou de vérifier que le jeton correspond à une carte valide avant de l’ajouter au profil client.
Configurer Paysafe.js avec des champs facultatifs
Paysafe.js doit être configuré avec un numéro de carte et une date d’expiration facultatifs. De plus, le marchand doit masquer les conteneurs de champ sur son site Web. En fonction des intentions du marchand, le champ CVV peut être défini comme facultatif, si nécessaire.
Si le client souhaite payer avec une nouvelle carte, le marchand peut commencer à visualiser le numéro de la carte et la date d’expiration. Ils deviendront obligatoires si singleUseCustomerToken et paymentTokenFrom ne sont pas transmis lors de l’appel à la fonction de segmentation en unités.
<html>
...
<body>
<div hidden id="cardNumber"></div>
<div hidden id="expiryDate"></div>
<div id="cvv"></div>
<script>
paysafe.fields.setup("my API key", {
fields: {
cardNumber: {
selector: "#cardNumber",
optional: true
},
expiryDate: {
selector: "#expiryDate",
optional: true
}
cvv: {
selector: "#cvv"
}
}
}, function (instance, error) {...});
</script>
</body>
</html>
Segmentation en unités avec une carte enregistrée
Si le client a déjà un profil créé dans l’API Paiements et que des cartes sont associées à ce profil, le marchand peut maintenant demander à Paysafe.js d’effectuer une segmentation en unités pour une carte enregistrée sélectionnée en transmettant un jeton client à usage unique et un "payment handle" à usage unique à la fonction de tokenisation. Le jeton client à usage unique est un jeton temporaire représentant le profil client. L’objectif principal du jeton client à usage unique est d’empêcher l’exposition de l’identifiant du client et du jeton de paiement à usage multiple au niveau du serveur frontal. Le "payment handle" à usage unique est un jeton temporaire représentant les données de la carte du client qui se trouvent dans l’objet paymentHandles de la réponse à la création d’un jeton client à usage unique. Si le client possède plusieurs cartes, le marchand doit transmettre le "payment handle" à usage unique en fonction des intentions du client.
Avant d’effectuer une tokenisation, le marchand doit passer par les étapes suivantes :
Créer un jeton client à usage unique sur son serveur dorsal.
Récupérer singleUseCustomerToken et le paymentHandleToken de la carte sélectionnée dans la réponse.
Envoyer les deux jetons au serveur frontal.
Les transmette à la fonction de segmentation en unités avec les paramètres singleUseCustomerToken et paymentTokenFrom dans l’objet des options.
<html>
...
<body>
...
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", {...}, function(instance, error) {
if (error) {
console.log(error);
} else {
var payButton = document.getElementById("payButton");
payButton.addEventListener("click", function (event) {
var singleUseProfile = createSingleUseProfile();
var options = {
...
singleUseCustomerToken: singleUseProfile.paymentToken,
paymentTokenFrom: singleUseProfile.cards[0].paymentToken
}
instance.tokenize(options , function(instance, error, result) {
if (error) {
console.log(error);
} else {
// handle result
}
});
});
}
});
</script>
</body>
</html>
Réinitialiser les données de la carte
Cette fonction permet au marchand d’effacer les données de la carte précédemment insérées dans les champs de Paysafe.js. Elle doit être utilisée lorsque le client passe du paiement avec la carte sauvegardée à une nouvelle carte.
Il est possible de remplir la date d’expiration au préalable en la transmettant en tant qu’argument au format suivant (« MM », « AAAA »). Dans ce cas, le marchand doit visualiser et verrouiller le conteneur de la date d’expiration, en gardant à l’esprit que cette fonction ne permet que de visualiser la date d’expiration et non de la modifier.
<html>
...
<body>
...
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", {...}, function(instance, error) {
if (error) {
console.log(error);
} else {
var payButton = document.getElementById("selectSavedCard");
payButton.addEventListener("click", function (event) {
instance.resetCardDetails()
});
}
});
</script>
</body>
</html>
Erreurs
| Code | Message affiché | Message détaillé | Description |
|---|---|---|---|
| 9127 | Il y a eu une erreur (9127), veuillez contacter notre service de soutien. | resetCardDetails n’est disponible que si les champs de la carte sont initialisés. | S’utilise lorsque les champs de la carte ne sont pas initialisés. |