Autres exemples
Cette page contient d’autres exemples de Paysafe Checkout.
Exemples avec 3D Secure activé
3D Secure (3DS) n’est pris en charge que par Visa et Mastercard. 3D Secure 2 (3DS 2) n’est pris en charge que par Visa, Mastercard et American Express.
Pour activer la prise en charge de 3DS, ajoutez une option de comptes à la fonction de configuration et y inclure un paramètre CC contenant l’identifiant de compte activé par 3DS. Il doit être identique à celui qui sera utilisé ultérieurement pour effectuer le paiement sur le serveur du marchand, et il doit permettre le traitement dans la même devise que celle définie dans l’option currency. Voir la rubrique suivante pour plus d’informations sur la gestion de plusieurs devises avec 3DS.
Si la carte du client prend en charge le protocole 3DS, une page supplémentaire de l’émetteur de la carte peut s’afficher dans la superposition pour autoriser le paiement. Dans l’environnement de test du marchand, un simulateur est utilisé au lieu d’un appel à l’émetteur de la carte pour fournir une gamme de réponses 3DS.
Exemple avec 3D Secure
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
accounts: {
CC: 123456789 // 3DS enabled account ID
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Exemple avec 3D Secure 2
3D Secure 2 offre un moyen amélioré et transparent d’authentifier les clients, tout en prenant en charge les applications mobiles et la validation biométrique et par jeton, et en rationalisant le passage en caisse grâce à l’authentification « sans friction ». Voir la documentation 3D Secure 2 pour plus de détails sur la mise en œuvre de 3D Secure 2.
Avec 3D Secure 2, le marchand peut transmettre des paramètres facultatifs supplémentaires dans l’objet ThreeDS de Paysafe Checkout :
- authenticationPurpose – seules deux valeurs sont autorisées : PAYMENT_TRANSACTION (valeur par défaut) et INSTALMENT_TRANSACTION
- maxAuthorizationsForInstalmentPayment
- billingCycle
Voir l’objet authentifications dans la documentation de l’API 3D Secure 2 pour une description de ces paramètres.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
threeDS: {
useThreeDSecureVersion2: true,
authenticationPurpose: "INSTALMENT_TRANSACTION",
maxAuthorizationsForInstalmentPayment: 5,
billingCycle: {
endDate: "2020-01-26",
frequency: 5
}
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Exemple avec des données supplémentaires sur le client
L’ajout d’un paramètre billingAddress lors de la configuration de la caisse associe l’adresse de facturation du client au jeton à usage unique afin que vous n’ayez pas à la fournir dans le cadre de la requête d’autorisation à l’API Paiements par carte lors de l’exécution du paiement sur votre serveur marchand.
Une adresse de facturation est requise si vous avez activé le service de vérification d’adresse (SVA) pour votre compte.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Exemple de gestion de la fermeture de la caisse
Ajoutez une fonction supplémentaire, function(stage) {...}, à la configuration de la caisse afin de gérer les situations où le client ferme la superposition de caisse à différentes étapes du processus de paiement.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
// handle result or error
}, function(stage) {
if (stage === "BeforePayment") {
// No payment has been made
} else if (stage === "DuringPayment") {
// Token has been issued, but the checkout overlay was closed from the user before instance flow control method was invoked
} else if (stage === "AfterPayment") {
// Closed either via instance.close method or by the user from the success screen
}
});
</script>
</body>
</html>
Exemple de sélection d’un mode de paiement
Si vous acceptez les paiements par carte de crédit, par prélèvement automatique ou par Interac, testez paymentMethod et utilisez l’API appropriée pour gérer le jeton.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
if (result.token) {
// If Card payment is selected
if (result.paymentMethod=="Cards") {
// Handle CC payment
}
// If Direct Debit payment is selected
if (result.paymentMethod=="DirectDebit") {
// Handle DD payment
}
// If Interac Online payment is selected
if (result.paymentMethod=="Interac") {
// Handle Interac Online payment
}
} else {
// handle error
}
});
</script>
</body>
</html>
Exemple avec affichage des modes de paiement
Affichez les méthodes de paiement proposées au consommateur.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
displayPaymentMethods: ["directdebit", "interac"]
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>