Search Overlay
Searchbox effacer les filtres de recherche ESC
Filter PreferencesClear

No results found

Aperçu

  • Payments
  • Canada
  • Europe & UK
  • United States

Paysafe Checkout permet aux marchands d’accepter des paiements par cartes de crédit, comptes bancaires et autres modes de paiement à l’aide d’une couche sécurisée, tout en offrant le niveau de conformité PCI le moins exigeant : SAQ-A. La saisie et le stockage des données de carte de crédit et de compte bancaire par l’utilisateur sont traités par Paysafe. Paysafe Checkout utilise les API REST de Paysafe Coffre-fort client, Paiements par carte, Paiements alternatifs et Prélèvement automatique.

Avantages

  • Conformité à la norme PCI SAQ-A
  • Intégration simple
  • Paysafe assure la sécurité des données des cartes de crédit et des comptes bancaires
  • Prise en charge du traitement des paiements avec les cartes activées sur 3D Secure
  • Aucune redirection à partir du site Web du marchand n’est requise.

Avant de commencer

Avant de commencer, vous devez obtenir votre clé API standard serveur à serveur et une clé API générant des jetons à usage unique à partir du Portail Paysafe. Si vous souhaitez utiliser le flux de prélèvement automatique, Interac ou PayPal, vous devrez contacter le service de soutien de Paysafe Group pour activer la clé API pour le prélèvement automatique et/ou l’API Paiements alternatifs. Vous devrez également contacter le service de soutien de Paysafe Group pour configurer votre compte de manière à ce que le prélèvement automatique, Interac et/ou PayPal soient visibles en tant que modes de paiement dans le formulaire de paiement de Paysafe Group.

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 :

  1. INSCRIVEZ-VOUS pour obtenir un compte de test, si vous ne l’avez pas déjà fait.
  2. Connectez-vous au Portail Paysafe de test 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.
  3. Dans la zone du jeton à usage unique, cliquez sur le bouton Créer.
  4. 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.
  5. 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 Checkout 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.

Comment utiliser la SDK

  1. Incluez la SDK Paysafe Checkout dans votre formulaire de paiement HTML.
  2. Appelez la fonction de configuration de la caisse avec votre clé API générant des jetons à usage unique. La fonction de configuration crée une superposition iframe comportant le formulaire de paiement sécurisé hébergé sur les serveurs de Paysafe. Vous aurez besoin de transmettre une fonction de rappel lors de la configuration pour gérer le succès et l’échec de la tokenisation.
  3. Le rappel doit utiliser AJAX pour envoyer le jeton représentant les détails du paiement du client à votre serveur marchand pour effectuer le paiement. Le choix du point de terminaison dépend du mode de paiement :
  • Actuellement, Paysafe accepte les devises suivantes :
    • pour PayPal : USD, CAD, GBP, EUR
    • pour Interac : CAD seulement

Faites-en l’essai dès maintenant

Cliquez sur le bouton ci-dessous pour afficher la superposition de la démo de passage à la caisse. Dans la superposition, sélectionnez l’une des options de paiement suivantes :

  • CARTE - Si vous sélectionnez cette option, saisissez une valeur 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 pour générer un jeton à usage unique.
  • PRÉLÈVEMENT AUTOMATIQUE - Si vous sélectionnez cette option, saisissez une adresse, une ville et un code postal, puis cliquez sur SUIVANT : Détails du compte; tapez un numéro de compte et un numéro d’acheminement valides (tous les numéros d’acheminement ne fonctionneront pas dans l’environnement TEST; nous vous recommandons donc d’utiliser 02100000021); sélectionnez le type de compte, puis cliquez sur Payer pour générer un jeton à usage unique.
  • INTERAC - Si vous sélectionnez cette option, vous êtes invité à effectuer le paiement. Dans l’environnement de production (LIVE), le consommateur serait redirigé vers Interac Online pour autoriser le paiement. Dans l’environnement TEST, vous accédez au simulateur de réacheminement des modes de paiement alternatifs, où vous pouvez soumettre SUCESS ou ERROR pour imiter la réponse d’Interac et générer ensuite le jeton à usage unique Paysafe.
  • PAYPAL - Si vous sélectionnez cette option, vous êtes invité à effectuer le paiement.

Le jeton sera affiché ci-dessous et dans l’exemple correspondant de requête cURL, qui montre comment vous pouvez accepter un paiement sur votre serveur.

Exemple de demande de paiement par carte

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"

    }

   } '

Exemple de demande de paiement par prélèvement automatique

curl -X POST https://api.test.paysafe.com/directdebit/v1/accounts/1001134830/purchases \

  -u test_vniezsai:B-qa2-0-59564dfa-0-302c021426a55dde98dc2a052cccc1ddc8daa776a7a4fe2e0214080388fded986767abc445e58af123c01003cb8b \

  -H 'Content-Type: application/json' \

  -d ' {

    "merchantRefNum" : "payment-token-demo-2",

    "amount" : 5000,

    "ach": {

       "paymentToken": "DD PAYMENT TOKEN RECEIVED FROM CLIENT BROWSER",

       "payMethod": "WEB",

       "paymentDescriptor": "Transaction"

    }

   } '

Exemple de demande de paiement Interac

curl -X POST https://api.test.paysafe.com/alternatepayments/v1/accounts/1001134830/payments \

  -u test_vniezsai:B-qa2-0-59564dfa-0-302c021426a55dde98dc2a052cccc1ddc8daa776a7a4fe2e0214080388fded986767abc445e58af123c01003cb8b \

  -H 'Content-Type: application/json' \

  -d ' {

   "merchantRefNum":"payment-token-demo-3",

   "amount":5000,

   "settleWithAuth": false,

   "returnLinks":[

      {

         "rel":"default",

         "href":"https://mysite.com/return"

      }

   ],

   "paymentType":"INTERAC",

   "paymentToken":"INTERAC PAYMENT TOKEN RECEIVED FROM CLIENT BROWSER"

   }

  } '

Exemple de requête de paiement par PayPal

curl -X POST https://api.test.paysafe.com/alternatepayments/v1/accounts/1001134830/payments \

  -u test_vniezsai:B-qa2-0-59564dfa-0-302c021426a55dde98dc2a052cccc1ddc8daa776a7a4fe2e0214080388fded986767abc445e58af123c01003cb8b \

  -H 'Content-Type: application/json' \

  -d ' {

   "merchantRefNum":"payment-token-demo-4",

   "amount":5000,

   "settleWithAuth": false,

   "returnLinks":[

      {

         "rel":"default",

         "href":"https://mysite.com/return"

      }

   ],

   "paymentType":"PAYPAL",

   "paymentToken":"PAYPAL PAYMENT TOKEN RECEIVED FROM CLIENT BROWSER"

   }

  } '

Essayez le cURL 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 pour formater la réponse JSON | python -mjson.tool.

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, ce qui vous permet de faire des choses comme la facturation récurrente, notamment payer un abonnement.

Inclure la SDK

La SDK se trouve au : https://hosted.paysafe.com/checkout/version/paysafe.checkout.min.js. Vous devez l’inclure dans votre formulaire HTML en ajoutant un élément <script> dans l’en-tête ou le corps.

Il y a deux façons d’inclure la SDK :

  • Inclure la dernière version officielle – Paysafe recommande vivement cette approche.
  • Inclure une version spécifique

Inclure la dernière version officielle

Pour inclure la dernière version officielle de la SDK, utilisez ce qui suit :

<head>

	<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>

</head>

Paysafe recommande cette approche car vous recevrez automatiquement toutes les dernières mises à jour et correctifs.

Exemple de formulaire de paiement

L’exemple de code suivant représente un paiement minimal Paysafe Checkout pour les paiements par carte qui crée une superposition de paiement permettant à l’utilisateur de saisir son numéro de carte, sa date d’expiration et son CVV. La superposition comporte un bouton de paiement qui permet de segmenter en unités les données saisies par l’utilisateur et d’afficher le jeton (en cas de succès) dans la console du navigateur.

<html>



	<head>

		<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>

	</head>



	<body>

		<button onclick="checkout()">Create Token</button>

		...

		<script>

			function checkout() {

			     paysafe.checkout.setup("my Base64 encoded single-use-token API key", {

				     amount: 5000,

				     currency: "USD",

				     environment: "TEST",

				     companyName: "Example Inc."

			     }, function(instance, error, result) {



				     if (result.token) {

				       console.log(result.token);

                       console.log(result.paymentMethod);



			             if (result.paymentMethod=="Cards") {



					         // use AJAX to send result.token to your merchant server to take CC payment

			             }



			             if (result.paymentMethod=="DirectDebit") {



		    	             // use AJAX to send result.token to your merchant server to take DD payment

		    	         }



			             if (result.paymentMethod=="Interac") {



		    	             // use AJAX to send result.token to your merchant server to take Interac payment

		    	         }



						 if (result.paymentMethod=="PayPal") {



							// use AJAX to send result.token to your merchant server to take PayPal payment

						 }



					     	                     

				     } else {



					     // error handling

				     }        

			     });

			}

		</script>

	</body>



</html>

Voir d’autres exemples de code Paysafe Checkout, y compris le soutien 3DS et la gestion de l’écran de fermeture, sur la page Autres exemples.

Améliorer le formulaire de paiement

Vous pouvez améliorer le formulaire de paiement de ces façons :

  • Fournissez le logo de votre magasin en utilisant le paramètre imageUrl, et le nom de votre magasin avec le paramètre companyName.
  • Fournissez le nom du client en utilisant le paramètre holderName pour personnaliser le formulaire de paiement et associer le nom du client au jeton à usage unique.
  • Changez la couleur des boutons de paiement pour qu’ils correspondent à la palette de couleurs de votre site Web en utilisant le paramètre buttonColor.
  • Modifiez le texte du bouton de paiement pour qu’il corresponde aux besoins commerciaux de votre site Web en utilisant le paramètre buttonLabel.
  • Masquez l’étiquette du « total de la commande » et le montant en utilisant le paramètre hideAmount.
  • Masquez le CVV dans tous les écrans de paiement pour qu’il corresponde aux besoins commerciaux de votre site web en utilisant le paramètre maskCvv.
  • Ajoutez la gestion des succès et des échecs avec des pages de succès et d’échec en superposition affichant les messages appropriés. Voir showSuccessScreen et showFailureScreen. Vous pouvez également rediriger les utilisateurs vers des pages de succès ou d’échec sur votre site en utilisant un code similaire à window.location.href = "success.html". Vous devez vérifier l’état du paiement avant d’offrir des biens ou des services - ne vous fiez pas entièrement à une redirection.

Les erreurs de Paysafe Checkout 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. Les erreurs de la plage 2nnnn sont causées par l’API Prélèvement automatique

Journal des modifications

VersionDescription
1.0.0
  • Paysafe Checkout est lancé.
1.0.1
  • Correction de l’erreur « Failed to initialize Paysafe Checkout iframe. » (échec de l’initialisation de l’iframe Paysafe Checkout) renvoyée incorrectement par la fonction de configuration.
1.1.0
  • Ajout de la prise en charge de l’émission de jetons de prélèvement automatique.
1.2.0
  • Ajout de correlationId dans l’objet d’erreur renvoyé par Paysafe Checkout. correlationId représente un identifiant unique qui peut être fourni à l’équipe de soutien Paysafe comme référence pour l’analyse.
  • Correction d’un bogue lié à l’affichage du logo de la marque de la carte pour certaines cartes Discover et Maestro.
  • Améliorations mineures de l’interface utilisateur et correctifs.
1.2.1
  • Ajout d’une validation plus stricte pour la clé de l’API marchand.
1.2.2
  • Améliorations de l’interface utilisateur pour le Prélèvement automatique sur les appareils MacOS et iOS.
1.2.3
  • Correction de la validation du paramètre holderName pour la fonction setup.
  • L’erreur « Invalid apiKey parameter. » renvoyée lors du rappel de configuration au lieu de « Failed to initialize Paysafe Checkout. » lorsqu’une clé API non configurée est utilisée.
1.3.0
  • Ajout de la possibilité d’émettre des jetons de paiement à usage unique Interac Online.
1.3.1
  • Correction de petits problèmes d’interface utilisateur sous Internet Explorer.
  • Correction d’un problème d’erreur lorsque preferredPaymentMethod est Interac Online.
1.4.0
  • Ajout d’une validation plus stricte du montant.
  • Changement de marque Paysafe – la couleur par défaut des boutons a changé.
  • Performances améliorées sous Internet Explorer 11 et Edge.
1.5.0
  • Ajout de la prise en charge pour ThreatMetrix
1.6.0
  • Ajout de la prise en charge de l’émission de jetons de paiement PayPal à usage unique.
  • Ajout d’une fonctionnalité de gestion des modes de paiement. L’utilisateur peut exprimer son intention d’enregistrer la carte dans son profil. L’utilisateur peut modifier la date d’expiration de la carte ou la supprimer.
  • Ajout d’une validation plus stricte pour les champs « billingAddress.country » et « currency ».
  • Ajout d’une propriété permettant de contrôler la visibilité de l’étiquette du « total de la commande ».
  • Ajout de la possibilité de spécifier le libellé du bouton de paiement.
1.7.0
  • Ajout de la possibilité de spécifier le titre de l’écran de réussite/échec.
  • Ajout de la possibilité de spécifier des options d’adresse de livraison pour PayPal.
1.8.0
  • Ajout de la prise en charge de la version 2 de 3D Secure avec des champs minimums requis.
1.9.0
  • Ajout de la prise en charge de tous les champs liés à la version 2 de 3D Secure.
  • Amélioration de la validation de la date d’expiration.
  • Amélioration de la reconnaissance de la marque de la carte.
  • Ajout de la prise en charge du formatage du montant en fonction de la région définie.
  • Mise à jour des traductions en français canadien.
1.10.0
  • Ajout de la prise en charge du masquage du CVV. Correction d’un bogue IE et Edge avec 3ds v1.
1.10.1
  • Mises à jour des performances et de la stabilité.
  • Traçage amélioré.
1.10.2
  • Corrections de bogues sur MS Edge
1.10.3
  • Corrections de bogues
1.10.4
1.10.5
  • Ajout du marqueur force3DS1.
1.10.6
  • Ajout de nouvelles devises prises en charge
1.10.8
  • Mise à jour de la traduction française d’Interac
1.11.0
  • Accessibilité accrue
1.12.0
  • Créer la possibilité pour PS Checkout v1 d’acheminer les requêtes 3DS2 vers un compte dédié Amex.
1.12.1
  • Améliorations en matière d’accessibilité.
1.12.2
  • Amélioration de la traçabilité des erreurs
1.12.3
  • Corrections de bogues
1.12.4
  • Ajout d’un délai d’initialisation
1.13.0
  • Amélioration de la sécurité et des performances

Pour télécharger une copie PDF de ce document en français, cliquez ici.

Sur cette page