Aperçu
- Payments
- Canada
- Europe & UK
- United States
- Latest
Paysafe JS est un mode de paiement flexible et entièrement personnalisable, qui s’intègre de manière transparente sur votre site Web. Il prend en charge la sécurité de vos données et la conformité PCI tout en vous laissant la liberté d’adapter l’ensemble de l’expérience utilisateur à la conception de votre site Web.
Tous les champs de paiement sensibles (numéro de carte, CVV et date d’expiration, année et mois) sont affichés dans une iframe hébergée sur les serveurs de Paysafe. Paysafe Group gère la saisie de l’utilisateur et le stockage des données. Paysafe JS utilise l’API REST Paiement 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.
- Prise en charge du traitement des cartes et d’Apple Pay.
- Donne des informations sur le taux de refus d’une marque de carte, ce qui permet au marchand de choisir un autre mode de paiement.
Avant de commencer
Veuillez contacter votre responsable des relations avec les entreprises ou vous adresser à integrations@paysafe.com pour obtenir vos authentifants au portail d’entreprise.
Pour obtenir la clé de l’API publique à partir du portail d’entreprise :
-
Connectez-vous au portail d’entreprise.
-
Allez à Intégrer > Clés API.
-
Pour la clé publique, cliquez sur l’icône Copie pour copier la clé API.
-
Votre clé API aura le format suivant :
- Nom d’utilisateur de la clé – MarchandXYZ
- Key Password – B-tst1-0-51ed39e4-312d02345d3f123120881dff9bb4020a89e8ac44cdfdcecd702151182fdc952272661d290ab2e5849e31bb03deede7e
-
Utilisez la même clé API pour tous les modes de paiement.
- Vous devez encoder en Base64 votre clé d’API publique avant de l’utiliser dans la SDK JS Paiements.
- La clé API sensible à la casse est envoyée par le biais de l’authentification de base HTTP.
- Pour utiliser l’authentification de base HTTP, vous devez envoyer les authentifiants de la clé API à l’aide de l’en-tête Autorisation avec chaque requête. Vous devez construire l’en-tête Autorisation comme suit :
-
Combinez le nom d’utilisateur et le mot de passe de la clé dans une chaîne de caractères séparée par deux points, p. ex. « Nom d’utilisateur de la clé:Mot de passe de la clé ».
-
La chaîne littérale résultante est alors codée en Base64.
-
La méthode d’autorisation et un espace (p. ex. « Basic ») sont alors placés devant la chaîne codée.
-
Par exemple, avec les exemples de nom d’utilisateur et de mot de passe de clé ci-dessus, l’en-tête est formé comme suit :
- Authorization: Basic TWVyY2hhbnRYWVo6Qi10c3QxLTAtNTFlZDM5ZTQtMzEyZDAyMzQ1ZDNmMTIzMTIwODgxZGZmOWJiNDAyMGE4OWU4YWM0NGNkZmRjZWNkNzAyMTUxMTgyZmRjOTU yMjcyNjYxZDI5MGFiMmU1ODQ5ZTMxYmIwM2RlZWRlN2U=
De plus amples renseignements se trouvent ici.
Intégrer JS
Paysafe JS recueille les coordonnées de vos clients, comme les informations sur le compte, les données de facturation, etc. Il aide vos clients à finaliser leur commande en traitant les paiements. La trousse de développement logiciel Paysafe JS vous donne la liberté de créer votre intégration personnalisée.
Contactez notre équipe d’assistance aux intégrations à l’adresse integrations@paysafe.com pour créer un compte de test, et indiquez les paiements pris en charge que vous souhaitez ajouter à votre compte de test.
Faites-en l’essai dès maintenant
Pour une brève démonstration de Paysafe.js, saisissez un numéro de carte test ci-dessous (p. ex. 4111 1111 1111 1111), une date d’expiration future valide et un CVV aléatoire à trois chiffres, puis cliquez sur Payer. Une tentative de tokenisation réussie fera apparaître le jeton dans l’exemple cURL ci-dessous, qui montre comment vous pouvez accepter un paiement sur votre serveur (essayez-le dans un terminal Unix/Cygwin pour voir la réponse 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.
Pour voir l’exemple ci-dessus dans CodePen, cliquez ici.
curl -location -request POST 'https://api.test.paysafe.com/paymenthub/v1/payments' \
- u apiKeyId:apiKeyPassword
- header 'Content-Type: application/json' \
- data-raw '{
"merchantRefNum": "payment-token-demo-1",
"amount": 5000,
"currencyCode": "USD",
"settleWithAuth": true,
"paymentHandleToken": "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.
- 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, date d’expiration et/ou Apple Pay.
- Appelez la fonction fields.setup de la SDK avec votre clé API de 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.
- 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 Pay. Cette fonction 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 le paiement.
Les jetons du "payment handle" à usage unique sont valides pendant 15 minutes, après quoi ils expirent. Vous pouvez toutefois les convertir en un moyen de paiement réutilisable et polyvalent, qui vous permet d’effectuer une facturation récurrente, p. ex. de payer un abonnement ou de créer une fonction « se souvenir de moi ».
- Pour savoir comment convertir un jeton de paiement par carte de crédit à usage unique en un jeton à usage multiple, voir Convertir un jeton de paiement à usage unique en un jeton de paiement à usage multiple.
Améliorer le formulaire de paiement
Voici comment vous pouvez améliorer le formulaire de paiement :
- Vous pouvez styliser les champs de paiement à l’aide de commandes CSS spécifiques dans la section style de l’objet options de la fonction fields.setup.
- Vous pouvez utiliser la SDK sur la fonction pour vous abonner aux événements à l’intérieur des iframes de champ hébergé qui correspondent à des actions de l’utilisateur, comme la saisie d’un numéro de carte non valide ou la sélection du champ (focus).
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
Il est recommandé d’inclure la dernière version de la SDK, ce qui vous permettra de recevoir automatiquement toutes les mises à jour et les corrections de bogues.
Inclure la dernière version
Pour inclure la dernière version de la SDK, utilisez ce qui suit :
<head>
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
</head>
Exemple de formulaire de paiement
L’exemple suivant montre l’utilisation de Paysafe.js pour créer un formulaire afin de collecter des données sensibles de manière sécurisée (numéro de carte, CVV & date d’expiration), et contient également le bouton qui initie la demande de segmentation en unités (en cas de succès) qui sera affichée 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 API_KEY = 'Your Base64-encoded Single-use-Token Api Key';
var options = {
// You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration
currencyCode: "'USD"
',
// select the Paysafe test / sandbox environment
environment: "'TEST"
',
// Provide a cards merchant toaccount if you have more than one configured for that same API key
// accounts: {
// default: 0000000000,
// },
// 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
let demoInstance;
paysafe.fields.setup(API_KEY, options).then(instance => {
console.log('Setup instance completed.');
demoInstance = instance;
return instance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.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) {
var tokenizationOptions = {
amount: 1000,
transactionType: 'PAYMENT',
paymentType: 'CARD',
merchantRefNum: 'merchant-ref-num-' + new Date().getTime(),
customerDetails: {
billingDetails: {
country: 'US',
zip: '90210',
street: 'Oak Fields 6',
city: 'ca',
state: 'CA',
},
},
};
demoInstance.tokenize(tokenizationOptions).then(result => {
// write the Payment token value to the browser console
console.log(result.token);
}).catch(error => {
// display the tokenization error in dialog window
alert(JSON.stringify(error));
});
}, 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.
Autres détails
La SDK comporte la fonction de configuration, 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 | Crée l’instance de champs hébergés. Valide les options. |
| instance.show | Précharge les configurations du marchand. Remplit les conteneurs spécifiés (généralement des conteneurs div) sur votre formulaire de paiement 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. Fournit des informations sur les modes de paiement qui ont été chargés avec succès et qui peuvent être utilisés. |
| instance.tokenize | Déclenche le processus de segmentation en unités qui fournit un identifiant de paiement à usage unique à utiliser avec l’API Paiements. |
| 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.badBin | La marque de la carte est activée pour la récupération des transactions et il y a un risque que la transaction soit refusée. |
| instance.unsupportedCardBrand | La marque de la carte n’est pas configurée pour le compte marchand. |
| 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. |
Journal des modifications
| Version | Description |
|---|---|
| 1.13.1 | L’intégration de Paysafe.js avec l’API Paiements a été lancée. |
| 1.14.0 | Ajout de la fonctionnalité d’enregistrement des cartes |