Intégration de cartes enregistrées
Aperçu
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.
Enregistrer une carte dans un profil client
Après avoir émis avec succès un jeton de paiement à usage unique pour un mode de paiement par carte à partir de Paysafe.js, le marchand a la possibilité de l’ajouter à un profil client en fonction des intentions du client.
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.
Voir la Référence API Coffre-fort client et Référence API Cartes pour de plus amples renseignements.
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 le Coffre-fort client et que des cartes sont associées à ce profil, le marchand peut maintenant demander à Paysafe.js d’effectuer une tokenisation pour une carte enregistrée sélectionnée en transmettant un jeton de profil à usage unique et un jeton de carte à usage unique à la fonction tokenise. Le jeton de profil à usage unique est un jeton temporaire représentant le profil du client. L’objectif principal du jeton de profil à usage unique est d’empêcher l’exposition de l’identifiant du profil du client et du jeton de paiement à usage multiple au niveau du serveur frontal. Le jeton de carte à usage unique est un jeton temporaire représentant les données de la carte du client situées dans l’objet carte à partir de la réponse à la création du profil à usage unique. Si le profil contient plusieurs cartes, le marchand doit transmettre le bon jeton de carte à usage unique en fonction des intentions du client.
Avant d’effectuer une tokenisation, le marchand doit passer par les étapes suivantes :
Créez un jeton de profil à usage unique sur le serveur dorsal.
Récupérez le jeton de paiement du profil et le jeton de paiement de la carte sélectionnée dans la réponse.
Envoyez les deux jetons à leur 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 d’une carte existante à 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. |