- Directives d'intégration
- Mise en œuvre d'une intégration Hosted Checkout
Mise en œuvre dune intégration {0}
- Demander une interaction Hosted Checkout
- Obtenir le résultat du paiement
- Personnaliser l'expérience de paiement
- Configurer l'accessibilité des champs hébergés
- Proposer des échéanciers de paiement
- Vérification des détails du paiement
- Prise en charge des transactions non liées au commerce électronique
- Contourner les fonctionnalités de sécurité
- Test et passage en ligne
Fonctionnalités Mastercard Gateway prises en charge
Sécurité des paiements et prévention des fraudes
- Mots de passe et certificats
- Authentification 3-D Secure EMV
- Gestion des risques
- Service de vérification d'adresse
- Jetons de cartes stockées de la passerelle
Opérations de paiement
Méthodes de paiement
- Carte de crédit
- Carte de débit
- Alipay
- Giropay
- iDEAL
- PayPal
- POLi
- Sofortbanking
- UnionPay SecurePay
- Automated Clearing House
- Cartes-cadeaux
Options de paiement
- Demande d'options de paiement
- Échéanciers de paiement
- Conversion de devise dynamique
- Paiements récurrents
- Paiements échelonnés
- Paiements non planifiés
Données supplémentaires
- Données de la compagnie aérienne
- Données Internet du client
- Données de commande et de poste
- Données personnalisées de l'acquéreur
- Données personnalisées du commerçant
- Données de remboursement de dette
- Données du descripteur de déclaration
- Reporting
Reporting
Autres fonctionnalités
Mise en œuvre d'une intégration Hosted Checkout
Conditions préalables
Obligatoire :
Assurez-vous que votre profil de commerçant est activé pour le service Hosted Checkout. Si ce n'est pas le cas, veuillez contacter votre prestataire de services. Pour activer Hosted Checkout pour le profil du commerçant, consultez le portail Merchant Manager et le Guide de l'utilisateur Merchant Manager.Facultatif :
Si le paiement est effectué, nous vous recommandons d'opter pour le service de notifications afin de recevoir des notifications par e-mail ou Webhook. En choisissant ce service, vous permettez à la passerelle d'envoyer des notifications par e-mail au payeur en votre nom.Conseil :
Avant de commencer le processus d'intégration de la fonctionnalité Hosted Checkout, consultez la rubrique Bonnes pratiques et conseils.
Demander une interaction Hosted Checkout
Sélectionnez les étapes ci-dessous pour demander une interaction Hosted Checkout :
Demandez une session de paiement via l'opération Initiate Checkout
(Lancer le paiement).
La demande doit inclure les données de paiement et d'interaction ainsi que les instructions pour le paiement. Un extrait de code pour l'opération Initiate Checkout
(Lancer le paiement) est illustré ci-dessous.
curl https://ap-gateway.mastercard.com/api/nvp/version/73 \ -d "apiOperation=INITIATE_CHECKOUT" \ -d "apiPassword=$PWD" \ -d "apiUsername=merchant.<your_merchant_id>" \ -d "merchant=<your_merchant_id>" \ -d "interaction.operation=AUTHORIZE" \ -d "interaction.merchant.name=<your_merchant_name>" \ -d "order.id=<unique_order_id>" \ -d "order.amount=100.00" \ -d "order.currency=USD" \ -d "order.description=<description_of_order>"
Si l'opération réussit, la réponse contient les paramètres session.id
et successIndicator
. Vous pouvez enregistrer la valeur retournée dans le paramètre successIndicator
dans le système de votre magasin, afin de vérifier si le paiement a réussi ou échoué. Voir Obtenir le résultat du paiement.
Référence de l'API Initiate Checkout (Lancer le paiement) [REST][NVP]
Référencez le fichier checkout.min.js des serveurs de passerelle. Cela place un objet Checkout
dans le périmètre global.
<script src="https://ap-gateway.mastercard.com/static/checkout/checkout.min.js" data-error="errorCallback" data-cancel="cancelCallback"></script>
Référence checkout.js[JavaScript]
Appelez Checkout.configure()
, en transmettant un objet JSON qui inclut le session.id
retourné et les autres paramètres de la demande.
Checkout.configure({ session: { id: '<your_initiate_checkout_ID>' } });
Checkout.configure()
ne remplaceront jamais les données que vous avez indiquées dans l'opération Initiate Checkout
(Lancer le paiement).Lancez le traitement de paiement en appelant l'un des traitements suivants :
Checkout.showEmbeddedPage('#embed-target')
Checkout.showPaymentPage()
Exemple de code HTML pour demander une interaction de paiement
<html> <head> <script src="https://ap-gateway.mastercard.com/static/checkout/checkout.min.js" data-error="errorCallback" data-cancel="cancelCallback"></script> <script type="text/javascript"> function errorCallback(error) { console.log(JSON.stringify(error)); } function cancelCallback() { console.log('Payment cancelled'); } Checkout.configure({ session: { id: '<your_initiate_checkout_session_ID>' } }); </script> </head> <body> ... <div id="embed-target"> </div> <input type="button" value="Pay with Embedded Page" onclick="Checkout.showEmbeddedPage('#embed-target');" /> <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" /> ... </body> </html>
Checkout.configure()
en tant que :- Littéraux – par exemple
quantity : 300
- Fonctions qui retournent une valeur, par exemple
quantity : function() { return 100 + 200 }
.
Les fonctions sont exécutées lors du déclenchement du traitement de paiement.
Exemple de code HTML simulant une interaction modale de paiement
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id="hco-embedded"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="https://ap-gateway.mastercard.com/static/checkout/checkout.min.js" ></script> <script> // Configure Checkout first Checkout.configure({ session: { id: "<your_initiate_checkout_ID>" } }) // after the modal is shown, then call Checkout.showEmbeddedPage('#hco-embedded') $('#exampleModal').on('shown.bs.modal', function (e) { Checkout.showEmbeddedPage('#hco-embedded', () => { $('#exampleModal').modal() } // tell Checkout how to launch the modal ) }); $('#exampleModal').on('hide.bs.modal', function (e) { sessionStorage.clear(); // tell Checkout to clear sessionStorage when I close the modal }); </script> </body> </html>
Caractéristiques de la fonctionnalité Hosted Checkout
Rappels
Les rappels sont fournis pour gérer les événements survenant au cours de l'interaction de paiement.
L'utilisation de rappels est facultative, mais vous devez définir ceux dont vous avez besoin dans le corps de la même balise <script>
qui fait référence au fichier checkout.js.
Tous les rappels définis doivent avoir une implémentation. Ils seront appelés lors du déclenchement de l'événement approprié.
<script src="https://ap-gateway.mastercard.com/static/checkout/checkout.min.js" data-cancel="cancelCallback" data-beforeRedirect="Checkout.saveFormFields" data-afterRedirect="Checkout.restoreFormFields"> </script> <script> function cancelCallback() { confirm('Are you sure you want to cancel?'); // code to manage payer interaction } // or if you want to provide a URL: // cancelCallback = "someURL" </script>
Il existe deux types de méthodes de rappel :
Les rappels de base permettent de gérer les événements suivants :
cancel
: le payeur annule l'interaction de paiement.L'annulation d'un rappel ne peut être utilisée qu'avec la page de paiement, elle ne fonctionnera pas avec la page intégrée.error
: une erreur est survenue.complete
: le payeur termine l'interaction de paiement.timeout
: le paiement n'est pas terminé dans les temps impartis pour que le payeur puisse effectuer le paiement.
Il peut s'agir de fonctions ou d'URL. Si vous indiquez une URL à la place d'une fonction dans un rappel, le payeur est redirigé vers cette URL lors du déclenchement de l'événement.
Étant donné que Hosted Checkout prend en charge les interactions de paiement qui requièrent la redirection du payeur vers d'autres sites Web afin de faire progresser le paiement (par exemple PayPal), les rappels permettent de gérer ce qui se passe avant la redirection et après le retour à Hosted Checkout pour finaliser le traitement de la transaction.
beforeRedirect
: avant que l'interface de paiement ne soit présentée au payeur. Retourne les données requises pour restaurer l'état de la page pour une utilisation parafterRedirect
.afterRedirect
: lors du retour du payeur une fois l'interaction de paiement terminée. Utilise les données enregistrées parbeforeRedirect
pour rétablir l'état enregistré de l'interface de paiement.
L'objet Checkout
fournit également deux fonctions qui vous aident à implémenter les rappels beforeRedirect
et afterRedirect
:
saveFormFields
: enregistre tous les champs de formulaire actuels pour une utilisation parrestoreFormFields
. Utilisez cette fonction dans votre implémentation debeforeRedirect
ou implémentezbeforeRedirect
en tant queCheckout.saveFormFields
.restoreFormFields
: restaure les champs de formulaire enregistrés parsaveFormFields
. Utilisez cette fonction dans votre implémentation deafterRedirect
ou implémentezafterRedirect
en tant queCheckout.restoreFormFields
.
Référence checkout.js[JavaScript]
Obtenir le résultat du paiement
Une fois l'interaction de paiement effectuée, vous pouvez rediriger le payeur vers le site de votre magasin et lui présenter votre propre page de reçu. Vous pouvez également mettre à jour le système de votre magasin avec les détails du paiement.
Pour rediriger le payeur vers le site de votre magasin, vous devez :
- indiquer
interaction.returnUrl
dans l'opérationInitiate Checkout
(Lancer le paiement) OU - définir le rappel
complete
dans la demande Hosted Checkout. Cela s'applique aux rappels de base et de redirection. Voir Rappels.
La passerelle transmet le résultat du paiement dans un paramètre resultIndicator
, qui :
- est ajouté à l’URL (
interaction.returnUrl
) utilisée pour rediriger le payeur vers le site de votre magasin, OU - est fourni en tant que paramètre d'entrée de la fonction fournie dans le rappel
complete
ou ajouté à l'URL fournie dans le rappelcomplete
.
Vous pouvez savoir si le paiement a réussi en comparant le paramètre resultIndicator
et le paramètre successIndicator
retourné dans la réponse Initiate Checkout
(Lancer le paiement). Une correspondance indique que le paiement a réussi.
resultIndicator
ne doit jamais être utilisée comme numéro de reçu.En cas de paiement réussi, présentez un reçu du paiement au payeur sur le site de votre magasin et mettez à jour le système de votre magasin avec les détails du paiement. Vous pouvez extraire ces éléments au moyen de l'opération Retrieve Order
(Extraire la commande).
Via Merchant Administration
Les détails du paiement sont enregistrés dans Merchant Administration, sur la page Détails de la commande et de la transaction. Vous pouvez rechercher le paiement et effectuer des opérations ultérieures.
Utilisation de Reporting
Si vous vous inscrivez à Reporting, vous pouvez télécharger les données de paiement Hosted Checkout dans un rapport formaté depuis Mastercard Gateway.
Via les notifications par e-mail ou Webhook
Si vous vous abonnez aux notifications par e-mail dans Merchant Administration, vous recevez une notification par e-mail pour chaque paiement réussi.
Personnaliser l’expérience de paiement
Hosted Checkout vous permet de contrôler l’affichage des informations relatives à votre activité et à l’interaction avec le payeur au moyen de l'opération Initiate Checkout
(Lancer le paiement).
URL | https://ap-gateway.mastercard.com/api/rest/version/72/merchant/{merchantId}/session |
Méthode HTTP | POST |
{ "apiOperation": "INITIATE_CHECKOUT", "interaction": { "merchant": { "name": "The Company Co", "url": "https://www.merchant-site.com", "logo": "https://upload.wikimedia.org/wikipedia/commons/2/21/Verlagsgruppe_Random_House_Logo_2016.png" }, "displayControl": { "billingAddress": "MANDATORY", "customerEmail": "MANDATORY" }, "timeout": 1800, "timeoutUrl": "https://www.google.com", "cancelUrl": "http://www.google.com", "operation": "PURCHASE", "style": { "accentColor": "#30cbe3" } }, "billing": { "address": { "city": "St Louis", "stateProvince": "MO", "country": "USA", "postcodeZip": "63102", "street": "11 N 4th St", "street2": "The Gateway Arch" } }, "order": { "amount": "123.60", "currency": "EUR", "description": "This is the order description", "id": "ORDER-4142773a-ac2e" }, "customer": { "email": "peteMorris@mail.us.com", "firstName": "John", "lastName": "Doe", "mobilePhone": "+1 5557891230", "phone": "+1 1234567890" } }
interaction.merchant
seront affichés sur la page de réception pour l'intégration de la page Paiements hébergés uniquement, et non pour la page intégrée. Vous pouvez personnaliser l'expérience de paiement avec les options suivantes :
- Afficher les informations relatives à la marque
Cela inclut votre logo et les coordonnées.
Voir : Tous les paramètres : Initiate Checkout (Lancer le paiement) pour les détails ci-dessous :
- Référence du logo
- Champs d'informations relatifs au commerçant
- Gérer l'affichage des adresses e-mail et de facturation du payeur
Après avoir obtenu les adresses e-mail et de facturation auprès du payeur, vous pouvez les afficher et contrôler leurs possibilités de modification en définissant les champs
interaction.displayControl.billingAddress
etinteraction.displayControl.customerEmail
selon l'une des valeurs suivantes :HIDE
: si vous ne voulez pas que Hosted Checkout affiche les champs.MANDATORY
: si vous voulez que Hosted Checkout affiche les champs et rende la saisie de données obligatoire pour le payeur.OPTIONAL
: si vous voulez que Hosted Checkout affiche les champs, mais permette au payeur de choisir de ne pas les renseigner.READ_ONLY
: si vous voulez que Hosted Checkout affiche les champs, mais ne permette pas au payeur de les modifier.
- Gérer l'affichage des détails d'expédition
Après avoir obtenu les détails d'expédition auprès du payeur, vous pouvez contrôler leur affichage en définissant le champ
interaction.displayControl.shipping
selon l'une des valeurs suivantes :HIDE
: si vous ne voulez pas que Hosted Checkout affiche les champs.READ_ONLY
: si vous voulez que Hosted Checkout affiche les champs, mais ne permette pas au payeur de les modifier.
Le payeur ne pourra pas modifier les détails d'expédition précédemment fournis.
La fonctionnalité de la case à cocher Identique à l'adresse d'expédition n'est pas disponible si les détails d'expédition requis n'ont pas été renseignés. - Gérer la langue et le thème
Par défaut, la langue affichée avec Hosted Checkout est déterminée à partir du navigateur du payeur. Toutefois, vous pouvez remplacer ce comportement en précisant un identifiant de langue ou une balise de langue IETF dans le champ
locale
, par exempleen_US
,es
,fr_CA
. Si la langue que vous indiquez n’est pas prise en charge par Mastercard Gateway, Hosted Checkout s’affiche dans la langue qui y correspond le mieux.Le thème défini par défaut par votre prestataire de services de paiement contrôle l’apparence de Hosted Checkout. Si le prestataire de services de paiement prend en charge plusieurs thèmes, vous pouvez choisir de remplacer le thème par défaut en renseignant le champ
interaction.style.theme
dans votre demande.Le thème disponible actuellement est
default
. - Identifiant de la commande
Nous vous recommandons d'inclure
order.id
dans votre demande afin d'identifier facilement un paiement initié à partir de Hosted Checkout. Vous pouvez utiliser un identifiant généré par votre panier d'achat ou fournir le vôtre. Vérifiez toutefois qu'il est unique. - Numéro de carte
Lorsqu'un payeur choisit de payer avec sa carte, il peut saisir les détails de sa carte de crédit ou de débit lors de l'interaction de paiement. Cependant, si au moins un de vos acquéreurs prend en charge les cartes combinées, c'est-à-dire les cartes qui peuvent être utilisées comme carte de débit ou comme carte de crédit, le payeur devra sélectionner la méthode de paiement sur la page de paiement — carte de débit ou carte de crédit — pour spécifier le mode de fonctionnement de la carte pour ce paiement.
Authentification 3-D Secure
Pour utiliser l'authentification 3-D Secure avec votre intégration Hosted Checkout, contactez votre prestataire de services de paiement pour activer les privilèges nécessaires pour votre compte commerçant.
Pour tester le fonctionnement de votre intégration avec l'authentification 3-D Secure, vous pouvez utiliser votre profil de commerçant TEST dans l'environnement de production.
Utilisez les cartes de test suivantes pour tester l'intégration
Type de carte | Statut de l'authentification | Carte de test |
---|---|---|
Mastercard | 3DS2 - Authentification | 5123450000000008 |
Mastercard | 3DS1 - Non inscrit à l'authentification 3DS2 entraînant un retour vers l'authentification 3DS1 | 5506900140100305 |
Visa | 3DS2 - Authentification | 4440000009900010 |
Visa | 3DS1 - Non inscrit à l'authentification 3DS2 entraînant un retour vers l'authentification 3DS1 | 4508750015741019 |
Pour plus d'informations sur l'authentification, voir Questions fréquentes sur l'authentification.
Activer l'authentification EMV 3DS
EMV 3-D Secure (EMV 3DS) est une norme du secteur d'activité mondial conçue pour aider les commerçants et les émetteurs à authentifier les transactions sans carte présente. La dernière génération des normes d'authentification EMVCo (appelée EMV 3-D Secure ou EMV 3-D Secure 2.0) du secteur d'activité est un protocole plus robuste et une authentification plus forte que la version actuelle (3-D Secure 1). L'activation de l'authentification EMV 3DS améliore votre expérience de paiement numérique en réduisant la fraude, les faux refus et les frictions inutiles.
Conditions préalables pour les commerçants (Inde et Bangladesh uniquement)
- L'acquéreur du commerçant doit remplir les conditions préalables de son acquéreur.
- Une configuration supplémentaire est requise sur le profil du commerçant sur la passerelle de paiement, pour chaque système pris en charge par son acquéreur.
- Mastercard, Visa et Amex nécessitent un privilège de commerçant supplémentaire. Ce privilège peut être configuré dans Profil du commerçant > page Détails du paiement > section Vérification du titulaire de la carte sur le portail Merchant Manager.
Intégration du commerçant
- L'intégration s'effectue via l'API Web Services (Services Web) (WS-API) v57 et versions ultérieures.
- Suivez les étapes décrites sur la page d'aide ci-dessous :
- Activez l'authentification EMV 3DS via Merchant Administration en accédant à : Admin > Paramètres d'intégration > Hosted Checkout
Respecter la conformité à la norme WCAG (Web Content Accessibility Guidelines)
Hosted Checkout peut être configuré de manière à proposer une expérience utilisateur conforme à la norme WCAG 2.0 Niveau AA. Reportez-vous aux directives WCAG 2.0 et assurez-vous que votre site Web est conforme à cette norme technique.
Définir l'attribut lang
Ajoutez l'attribut lang à l'élément html.
<html lang="en"> <head></head> <body></body> </html>
Proposer des échéanciers de paiement
Si des échéanciers de paiement sont configurés sur votre profil de commerçant, par défaut, tous les échéanciers de paiement de votre configuration de commerçant sont affichés au payeur au cours de Hosted Checkout. Toutefois, les échéanciers de paiement disponibles pour le payeur sont déterminés par le numéro de carte entré par le payeur et la devise de la commande.
Vous pouvez limiter les échéanciers de paiement proposés en indiquant des contraintes sur les échéanciers pour chaque transaction. Cela est utile pour garantir que les options de paiement proposées au payeur sont conformes aux critères prédéfinis, ce qui empêche le paiement si le payeur modifie les données de l'échéancier de paiement. Vous pouvez utiliser les champs suivants de la demande pour préciser les contraintes :
constraints.paymentPlans.supported[n]
: échéanciers de paiement proposés pour cette transaction.constraints.paymentPlans.numberOfPayments
: nombre autorisé de paiements échelonnés pour l'échéancier de paiement.constraints.paymentPlans.numberOfDeferrals
: nombre autorisé de mois de report pour l'échéancier de paiement.
Par défaut, les conditions de paiement d'un échéancier de paiement sont affichées sur Hosted Checkout, si disponibles. Vous pouvez les masquer en définissant interaction.displayControl.paymentTerms=HIDE
dans Checkout.configure()
.
Assistance pour la vérification des détails de paiement
Pour les cartes-cadeaux et les paiements Automated Clearing House, Hosted Checkout ne prend en charge que la vérification des détails de paiement.
Pour ce faire, définissez interaction.operation=VERIFY
dans la demande Initiate Checkout (Lancer le paiement).
Hosted Checkout utilise les méthodes de vérification prises en charge par l'acquéreur configuré et les données fournies dans la demande.
Vous pouvez savoir si l'opération de vérification a réussi en comparant les paramètres resultIndicator
et successIndicator
.
Si l'interaction échoue, Hosted Checkout affiche un message indiquant que la vérification a échoué et invite le payeur à réessayer.
Prise en charge des intégrations non liées au commerce électronique
Vous pouvez utiliser Hosted Checkout avec n'importe quelle source de transaction configurée sur le profil du commerçant (Internet, centre d'appel, commande par téléphone, etc.).
Pour ce faire, indiquez transaction.source
dans la demande Initiate Checkout (Lancer le paiement).
Si Hosted Checkout est demandé avec une valeur transaction.source
autre que INTERNET
, les options de paiement qui demandent la présence du payeur ne sont pas prises en charge.
Si vous n'indiquez pas de valeur pour transaction.source
dans la demande :
- La valeur
INTERNET
par défaut est utilisée si cette source est prise en charge par le lien d'acquéreur du commerçant. - Dans le cas contraire, la source de transaction spécifiée dans votre profil de commerçant est utilisée.
Contrôler le code de sécurité de la carte
Vous pouvez contrôler l'obligation pour les payeurs d'indiquer le code de sécurité de la carte pour traiter le paiement en définissant interaction.displayControl.cardSecurityCode
dans la demande Initiate Checkout (Lancer le paiement) selon l'une des valeurs suivantes :
OPTIONAL
: si vous voulez que Hosted Checkout affiche le champ de saisie du code de sécurité de la carte, mais ne rende pas ce champ obligatoire.MANDATORY
(par défaut) : si vous voulez que Hosted Checkout affiche le champ de saisie du code de sécurité de la carte et le rende obligatoire.
Référence de l'API Initiate Checkout (Lancer le paiement) [REST][NVP]
Contourner les fonctionnalités de sécurité
Si votre configuration prévoit l'utilisation de l'authentification 3-D Secure ou d'un service de gestion des risques, vous pouvez contourner cette fonctionnalité si vous le souhaitez.
- Contournement de l'authentification du paiement : définissez
interaction.action.3DSecure=BYPASS
dans la demande Initiate Checkout (Lancer le paiement). - BYPASS : ne pas proposer l'authentification 3DS au payeur.
- MANDATORY : proposer l'authentification 3DS au payeur si elle est disponible.
- Contournement de l'évaluation des risques : définissez
risk.bypassMerchantRiskRules=ALL
dans la demande Initiate Checkout (Lancer le paiement).
Le champ interaction.action.3DSecure
de la demande CREATE_CHECKOUT_SESSION
peut prendre les valeurs suivantes :
Click To Pay
Pour utiliser l'option Click To Pay avec votre intégration Hosted Checkout, contactez votre prestataire de services de paiement pour activer les privilèges nécessaires pour votre compte commerçant.
Activation de l'option Click to Pay
L'option Click to Pay est une option de paiement en ligne intelligente et sans mot de passe qui offre une expérience de paiement rapide et simple conçue pour rendre le « paiement invité » plus rapide et plus facile sur tous les appareils. L'option Click to Pay propose un flux de paiement standardisé pour tous les systèmes de cartes participants. L'option Click to Pay est basée sur la spécification SRC d'EMVCo et remplace Masterpass, Visa Checkout et Amex Express Checkout.
Si vous utilisez la page de paiement de la passerelle (Hosted Checkout), l'option Click to Pay sera automatiquement proposée à vos payeurs si vous avez activé l'option Click to Pay pour votre profil de commerçant.
Conditions préalables pour les commerçants
- L'acquéreur du commerçant doit remplir les conditions préalables de son acquéreur.
- Inscrivez-vous pour l'option Click To Pay via Merchant Administration. Vous pouvez voir les informations ici.
- L'intégration s'effectue via l'API Web Services (Services Web) (WS-API) v63 et versions ultérieures.
Autres éléments à prendre en considération
- Adresse d’expédition : les payeurs ne pourront sélectionner d'adresse d'expédition lors de l'interaction Click to Pay. Si une adresse d'expédition est requise, le commerçant doit demander ces informations avant de lancer Hosted Checkout.
- Adresse de facturation : une adresse de facturation sera toujours collectée au cours de l'interaction Click to Pay.
- Authentification 3-D Secure : si vous êtes configuré pour l'authentification 3-D Secure (3DS), Hosted Checkout effectuera automatiquement l'authentification 3DS après l'interaction Click to Pay.
Certains paramètres supplémentaires doivent être pris en considération lors de l'envoi de la demande Initiate Checkout (Lancer le paiement) pour l'option Click to Pay avec Hosted Checkout.
Paramètres de l'opération Initiate Checkout (Lancer le paiement) pour l'option Click to Pay avec Hosted Checkout :
Champ | Description | Obligatoire |
---|---|---|
interaction.country |
Pour une interaction SRC, le pays de l'interaction détermine le contenu spécifique au pays présenté au payeur au cours de l'interaction SRC, comme par exemple, les Conditions générales. La valeur que vous avez configurée par rapport à votre profil de commerçant sur la passerelle est utilisée par défaut. Ajoutez le champ interaction.country à la demande Initiate Checkout (Lancer le paiement) si vous souhaitez remplacer cette valeur pour cette interaction. | Facultatif |
interaction.locale |
Pour une interaction SRC, les paramètres régionaux de l'interaction déterminent la langue d'affichage. Par défaut, la langue configurée dans le navigateur du payeur est utilisée. Si la langue du payeur ne peut pas être déterminée ou n'est pas prise en charge, en_US est utilisé. Si vous souhaitez remplacez cette valeur, ajoutez le champ interaction.locale à la demande Initiate Checkout (Lancer le paiement). Actuellement, les langues prises en charge sont l'anglais (Royaume-Uni) (en_UK), l'espagnol (Espagne) (es_ES), le français (Canada) (fr_CA), le portugais (Brésil) (pt_BR) et le chinois (Hong Kong) (zh_HK). | Facultatif |
merchant.name |
Indiquez votre nom commercial, c'est-à-dire le nom connu par votre payeur. Le nom peut être affiché au cours de l'interaction SRC. | Obligatoire |
merchant.url |
Indiquez l'URL de votre site Web que le payeur utilise. L'URL peut être affichée au cours de l'interaction SRC. | Obligatoire |
customer.email |
L'adresse e-mail du payeur sera toujours collectée au cours de l'interaction SRC. Si vous connaissez déjà l'adresse e-mail du payeur, ajoutez customer.email : « l'adresse e-mail de votre payeur » à la demande Initiate Checkout (Lancer le paiement) pour permettre au payeur d'éviter de saisir son adresse e-mail lors de l'interaction SRC. | Facultatif |
Pour plus d'informations sur l'option Click To Pay, voir Questions fréquentes.
Test de votre intégration
Avant de la mettre en ligne, vous devez tester votre intégration pour vous assurer qu'elle fonctionne correctement.
Test de votre intégration avec l'option Click To Pay
Avant de la mettre en ligne, vous devez tester votre intégration pour vous assurer qu'elle fonctionne correctement.
Dépannage et questions fréquentes
Hosted Checkout peut retourner un certain nombre d'erreurs d'intégration. Voir Test de votre intégration.
Une page d'erreur s'affiche lors d'une tentative de demande de Hosted Checkout incorrecte. Les causes courantes d'erreur sont notamment :
- Les champs obligatoires n'ont pas été renseignés.
- Les URL fournies dans la demande ne sont pas absolues.
Si le payeur clique deux fois sur le bouton « Payer », cela n'entraîne pas une double transaction pour vous ou la banque du payeur.
Oui, EDGE 113 est pris en charge.
Bonnes pratiques et conseils
Le modèle Hosted Checkout est sécurisé car il vous oblige à vous authentifier auprès de la passerelle, et les détails de paiement collectés sur la page de paiement sont soumis directement du navigateur du payeur à la passerelle.
Il n'y a aucune restriction sur la taille du fichier ou la largeur du logo. Quant à la hauteur, la recommandation minimale est de 144 px.
Oui, vous pouvez héberger l’image de votre logo chez n’importe quel prestataire, mais il est impératif que l’URL soit sécurisée (HTTPS). Si votre prestataire d’hébergement ne prend pas en charge une URL sécurisée, voici une liste de prestataires qui peuvent vous proposer un hébergement HTTPS gratuit : https://www.google.com.au/search?q=secure+image+hosting+providers
Cette case à cocher n’est visible que si tous les champs obligatoires dans l’adresse d’expédition ont été renseignés. Assurez-vous que le payeur les a remplis ou que vous indiquez les champs manquants (comme shipping.country
, dans le cas où les marchandises ne font pas l’objet d’une expédition internationale).
Si vous souhaitez proposer à vos clients une bonne expérience mobile, notamment en optimisant votre expérience Hosted Checkout sur appareil mobile, il est conseillé d'ajouter une balise meta « viewport » à la page de votre site. Par exemple :
<meta name="viewport" content="width=device-width, initial-scale=1">
Veuillez noter qu'il est important de choisir les valeurs viewport correctes pour vos pages et de tester votre propre site avec ces modifications.