Aperçu
- Payments
- Canada
- Europe & UK
- United States
Paysafe.js permet aux marchands de créer un formulaire de paiement personnalisé conforme au niveau de conformité PCI le moins exigeant, SAQ-A. Tous les champs de paiement sensibles (numéro de carte, CVV, date d’expiration ou année et mois d’expiration) sont affichés dans un iframe hébergé sur les serveurs de Paysafe, et la saisie et le stockage des données par l’utilisateur sont gérés par Paysafe Group. Paysafe.js utilise les API REST Coffre-fort client et Paiements par carte pour gérer les paiements.
Avantages
- Conforme à la norme PCI SAQ-A, parce que Paysafe Group gère la sécurité des champs sensibles.
- Des options de personnalisation étendues vous permettent de créer votre propre formulaire de paiement qui correspond à votre site Web.
- Créez autant de versions traduites ou localisées de votre formulaire de paiement que nécessaire.
- Temps de chargement rapide des pages.
- Aucune redirection requise.
- S’intègre naturellement et reste invisible.
- Prise en charge du traitement des paiements avec les cartes 3D Secure.
Avant de commencer
Avant de commencer, vous devez obtenir votre clé API standard de serveur à serveur et une clé API à usage unique générant des jetons à partir du Portail Paysafe.
La clé API générant des jetons à usage unique est utilisée dans votre code JavaScript sur le client pour générer des jetons à usage unique à partir des cartes de crédit et comptes bancaires des clients. Contrairement à la clé API serveur à serveur, cette clé n’a pas la capacité d’accepter les paiements ou d’effectuer toute autre opération et peut donc être exposée en toute sécurité dans votre code côté client.
Pour obtenir une clé générant des jetons à usage unique :
- INSCRIVEZ-VOUS pour obtenir un compte de test, si vous ne l’avez pas déjà fait.
- Connectez-vousau Portail Paysafe avec le nom d’utilisateur et le mot de passe que vous avez utilisés lors de votre connexion au compte de test. Vous devriez maintenant être en mesure de voir la page Paramètres > Clé API.
- Dans la zone du jeton à usage unique, cliquez sur le bouton Créer.
- Vous recevrez un jeton de sécurité par courriel. Saisissez ce jeton et cliquez sur Suivant.
La zone de jeton à usage unique de la page Clé API se met à jour pour afficher le nom d’utilisateur et le mot de passe de la clé API générant des jetons à usage unique. - Si vous ne l’avez pas encore fait, prenez également une copie du nom d’utilisateur et du mot de passe de la clé API de serveur à serveur. Vous en aurez besoin (ainsi que de l’identifiant de votre compte indiqué dans votre courriel d’inscription) pour effectuer des paiements avec les jetons générés.
Paysafe.js utilise la version encodée en Base64 de la clé API générant des jetons à usage unique. Celle-ci est créée comme suit : le nom d’utilisateur et le mot de passe sont concaténés et séparés par deux points, et le résultat est ensuite encodé en Base64. Vous pouvez utiliser un site comme https://www.base64encode.org/ pour effectuer le codage en Base64. Voir authentication pour de plus amples renseignements.
Essayer dans CodePen
Vous pouvez voir une brève démonstration de Paysafe.js dans CodePen.
Saisissez un numéro de carte test (p. ex. 4111 1111 1111 1111), une date d’expiration future valide et un CVV aléatoire à trois chiffres, puis cliquez sur Payer.
L’exemple cURL suivant montre comment vous pouvez prendre des paiements sur votre serveur (essayez-le dans un terminal Unix/Cygwin pour voir la réponse de l’API). Si vous avez installé Python, nous vous recommandons d’ajouter ce qui suit à la fin de la requête cURL pour formater clairement la réponse JSON :
| python -mjson.tool
curl -X POST https://api.test.paysafe.com/cardpayments/v1/accounts/1001134830/auths \
-u test_vniezsai:B-qa2-0-59564dfa-0-302c021426a55dde98dc2a052cccc1ddc8daa776a7a4fe2e0214080388fded986767abc445e58af123c01003cb8b \
-H 'Content-Type: application/json' \
-d ' {
"merchantRefNum" : "payment-token-demo-1",
"amount" : 5000,
"settleWithAuth":true,
"card" : {
"paymentToken" : "CARDS PAYMENT TOKEN RECEIVED FROM CLIENT BROWSER"
}
} '
Comment utiliser la SDK
- Créez votre formulaire de paiement HTML personnalisé avec le contenu (texte et images) et le style que vous souhaitez. La vidéo ci-dessous décrit comment créer un tel formulaire.
- 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 chacun des champs de paiement sensibles : numéro de carte, cvv et date d’expiration.
- Appelez la fonction SDK fields.setup avec votre clé API à jeton à usage unique. La fonction de configuration insère des iframes hébergés sur les serveurs de Paysafe Group à l’intérieur de ces conteneurs. Ces iframes contiennent des champs de saisie pour les données de paiement.
- Enfin, ajoutez la fonction instance.tokenize à l’événement de clic du bouton Payer. Cela renvoie un jeton de paiement à usage unique (le jeton représentant les données de la carte saisies par l’utilisateur est stocké dans le coffre-fort client). Les jetons à usage unique ne sont valides que 5 minutes et ne sont pas consommés par la vérification.
- Envoyez le jeton à votre serveur marchand, où le point de terminaison d’autorisation standard de l’API Paiements par carte peut être utilisé pour effectuer le paiement.
Les jetons à usage unique sont valides 5 minutes après quoi ils expirent. Vous pouvez les convertir en jetons de paiement réutilisables et permanents, qui vous permettent d’effectuer des opérations comme la facturation récurrente, p. ex. le paiement d’un abonnement, ou de créer une fonctionnalité « se souvenir de moi ».
- Pour de plus amples renseignements sur la conversion d’un jeton de carte de crédit à usage unique en jeton permanent, voir Convertir un jeton à usage unique en jeton permanent.
- Pour de plus amples renseignements sur la conversion d’un jeton de prélèvement automatique à usage unique en jeton permanent, voir Convertir un jeton à usage unique en jeton permanent.
Améliorer le formulaire de paiement
Vous pouvez améliorer le formulaire de paiement de ces façons :
- Vous pouvez personnaliser les champs de paiement en transmettant certaines commandes CSS dans la section style de l’objet options de la fonction fields.setup.
- En utilisant la fonction « on » SDK pour vous inscrire à des événements dans les iframes de champ hébergé qui correspondent à des actions de l’utilisateur, telles que la saisie d’un numéro de carte non valide ou la sélection du champ (focus); vous pouvez alors répondre à ces événements dans votre formulaire de paiement.
Inclure la SDK
Lors de l’inclusion de la balise <script> de la SDK dans l’élément <head>, vous devez soit :
- Inclure la dernière version
- Inclure une version spécifique
<head>
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
</head>
Exemple de formulaire de paiement
Ce qui suit est un simple exemple de code Paysafe.js qui crée un formulaire de paiement avec trois champs de données sensibles : Numéro de carte, date d’expiration et CVV; il comporte un bouton de paiement qui déclenche la tokenisation des données saisies par l’utilisateur et (si la tokenisation a réussi) affiche le jeton dans la console du navigateur.
<html>
<head>
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
<style>
.inputField {
border: 1px solid #E5E9EC;
height: 40px;
padding - left: 10px;
}
</style>
</head>
<body>
<div id="cardNumber" class="inputField"></div>
<p></p>
<div id="expiryDate" class="inputField"></div>
<p></p>
<div id="cvv" class="inputField"></div>
<p></p>
<button id="payNow" type="button"> Pay now </button>
<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 = "Your Base64-encoded Single-use-Token Api Key";
var options = {
// select the Paysafe test / sandbox environment
environment: "TEST",
// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
cardNumber: {
selector: "#cardNumber",
placeholder: "Card number",
separator: " "
},
expiryDate: {
selector: "#expiryDate",
placeholder: "Expiry date"
},
cvv: {
selector: "#cvv",
placeholder: "CVV",
optional: false
}
}
};
// initalize the hosted iframes using the SDK setup function
paysafe.fields.setup(apiKey, options, function(instance, error) {
// When the customer clicks Pay Now,
// call the SDK tokenize function to create
// a single-use payment token corresponding to the card details entered
document.getElementById("payNow").addEventListener("click", function(event) {
instance.tokenize(function(instance, error, result) {
if (error) {
// display the tokenization error in dialog window
alert(JSON.stringify(error));
} else {
// write the Payment token value to the browser console
console.log(result.token);
}
});
}, false);
});
</script>
</body>
</html>
Vous pouvez essayer l’exemple de code HTML ci-dessus en utilisant le premier CodePen ci-dessous. Saisissez une valeur de carte test, une date d’expiration future valide et un CVV aléatoire, puis cliquez sur Payer pour déclencher la tokenisation. Les CodePens 2 et 3 incluent le style de base des formulaires et la gestion des événements.
1. Exemple simple
Reportez-vous à l’exemple de code.
2. Exemple simple avec style de base
Reportez-vous à l’exemple de code.
Exemple simple avec un style de base et la gestion d’événements
Reportez-vous à l’exemple de code.
Les erreurs de Paysafe.js sont numérotées dans la plage 9nnn. Les erreurs de la plage 7nnn sont générées par le coffre-fort client et peuvent être causées par l’utilisation d’une clé API de jeton à usage unique non valide ou par l’utilisation de votre clé API de serveur à serveur plutôt que la clé API de jeton à usage unique. Les erreurs de la plage 3xxx sont causées par l’API Cartes.
Autres détails
La SDK comporte la fonction de configuration et plusieurs fonctions d’instance (incluant plusieurs fonctions de champ). Cliquez sur les liens ci-dessous pour les détails complets.
Fonction | Champ d’application |
---|---|
Fonctions principales | |
setup | Remplit les conteneurs spécifiés (généralement des conteneurs div) sur votre formulaire de paiement avec des iframes pour chacun des champs sensibles. Définit le style et le texte du caractère de remplacement (p. ex. numéro de carte) pour ces champs ainsi qu’un séparateur facultatif de numéro de carte. Permet d’accéder à l’objet d’instance utilisé par les fonctions ci-dessous dans un rappel, une fois la configuration terminée. |
instance.tokenize | Déclenche le processus de tokenisation qui fournit un jeton de paiement à usage unique à utiliser avec l’API Paiements par carte. |
instance.on | Inscrit aux événements émis par l’instance. |
instance.fields.<fieldname>.on</fieldname> | Inscrit aux événements émis par un champ en particulier. |
Fonctions supplémentaires | |
instance.fields.<fieldname>.<event type></event></fieldname> | Inscription abrégée aux événements – méthode abrégée d’inscription aux événements. Il s’agit d’une alternative à la fonction « on ». |
instance.getCardBrand | Récupère la marque actuelle de la carte. |
instance.cardBrandRecognition | Inscrit à l’événement cardBrandRecognition. |
instance.submit | Inscrit à l’événement submit. |
instance.fields.<fieldname>.isEmpty</fieldname> | Vérifie si le champ nommé est vide. |
instance.fields.<fieldname>.isValid</fieldname> | Vérifie si le champ nommé est valide. |
instance.areAllFieldsValid | Vérifie si tous les champs sont valides. |
instance.resetCardDetails | Efface les données de la carte précédemment insérées dans tous les champs. En option, il est possible de préremplir la date d’expiration en la transmettant en tant qu’argument. |
Version | Description |
---|---|
1.0.0 | Lancement de Paysafe.js |
1.1.0 | Ajout de la prise en charge du traitement des paiements pour les cartes (Visa et Mastercard) enregistrées dans 3D Secure. |
1.1.1 |
|
1.1.2 | Améliorations en matière de sécurité |
1.2.0 | Ajout de la prise en charge de l’assignation de l’adresse de facturation et du nom du détenteur au jeton émis. |
1.2.1 | Refonte de la superposition 3DS |
1.3.0 | Ajout de correlationId dans l’objet d’erreur renvoyé par Paysafe Group. Le correlationId représente un identifiant unique qui peut être fourni à l’équipe de soutien Paysafe comme référence pour l’analyse. |
1.3.1 | Correction de l’émission d’événements de mise au point et de flou dans Safari sous MacOS et iOS. |
1.3.2 | Ajout d’une validation plus stricte pour la clé de l’API marchand. |
1.4.0 |
|
1.4.1 | Correction de la prise en charge des logiciels de lecture d’écran (NVDA) sous Internet Explorer 11. |
1.5.0 | Ajout de la prise en charge pour |
1.6.0 | Ajout d’une validation plus stricte du montant. |
1.7.0 | Ajout de la prise en charge de la saisie automatique des numéros de carte. |
1.8.0 | Ajout de la prise en charge pour ThreatMetrix |
1.9.0 | Ajout d’une validation plus stricte pour les champs « billingAddress.country » et « currency ». |
1.10.0 | Ajout de la prise en charge de la version 2 de 3D Secure avec des champs minimums requis. |
1.10.1 | Correction d’un problème d’autocomplétion; la date d’expiration n’était pas remplie par le navigateur. |
1.11.0 |
|
1.12.0 | Ajout de la prise en charge du masquage du CVV. |
1.14.0 | Ajout de la fonctionnalité d’enregistrement des cartes |