Cette option permet à l’acheteur de rester sur un environnement connu et de confiance. Le tunnel de paiement est fluide et les abandons paniers plus rares. |
Il est possible d'utiliser un Template personnalisé pour le formulaire de carte qui sera intégré au sein de la page de paiement. Pour plus de détails : Mise en place d'un Template Personnalisé |
L'iframe est web responsive et peut être intégré dans une application mobile. |
Table des matières
URLSuccess
et URLFailure
avec les URL de retour en succès et en erreurData
Data
en paramètre de l'URL fournie à l'attribut src
de l'iframeCustomField14=iframe
pour avoir uniquement l'affichage du bloc de paiementCréation des pages 'Succès' et 'Échec'
Préparation du code HTML de redirect-success
et redirect-failure
postMessage
dans redirect-success
et redirect-failure
Il faut pour cela utiliser la balise <iframe> et spécifier l'URL de la page qu'on souhaite afficher dans l'attribut src. L'URL de la page de paiement doit contenir la valeur suivante : customField14=iframe.
<!DOCTYPE html> <HTML lang="en"> <HEAD> <META charset="UTF-8" /> <META http-equiv="X-UA-Compatible" content="IE=edge" /> <META name="viewport" content="width=device-width, initial-scale=1.0" /> <TITLE>Site marchand - commande</TITLE> </HEAD> <BODY> ... <IFRAME src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" /> ... </BODY> </HTML> |
Attention Il conviendra de passer les paramètres requis au paiement avec cette URL Au minimum : |
En pixel
<IFRAME src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" height="600" width="800" /> |
En CSS
#payment-iframe { height: 600px; width: 800px; } // ou pour un rendu fullscreen #payment-iframe { height: 100vh; width: 100vw; } <IFRAME id="payment-iframe" src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" /> |
Quand le porteur soumet le formulaire de paiement, une requête est envoyée au serveur Axepta.
Si le paiement est validé, une réponse en succès est envoyée. Dans le cas contraire, une réponse Erreur sera émise.
L'objectif est d'afficher une page de succès ou d'échec à la place de l'iFrame en fonction du résultat du paiement.
Remarque : le serveur renvoie une réponse HTTP avec la méthode POST. On doit donc créer une route sur le serveur du site marchand pour traiter cette réponse. |
Si on souhaite rediriger l'utilisateur sur une page du site marchand affichée à la place de l'iframe, il faudra prévoir une page de redirection.
URLSuccess
: https://mon-site.com/redirect-successURLFailure
: https://mon-site.com/redirect-failureLe marchand créé ces pages qui seront affichées lors de la redirection du porteur.
Chacune exécutera un script qui redirigera l'utilisateur vers la page en succès ou en erreur de paiement.
La mise en place de ce script est indiqué dans la section suivante.
postMessage
dans redirect-success
et redirect-failure
La solution postMessage
"permet une communication inter-domaine en toute sécurité".
L'objectif est de "communiquer" avec la page parente. Cette communication se fera grâce à un événement de type MessageEvent
<!DOCTYPE html> <HTML lang="en"> <HEAD> <META charset="UTF-8" /> <META http-equiv="X-UA-Compatible" content="IE=edge" /> <META name="viewport" content="width=device-width, initial-scale=1.0" /> <TITLE>Site marchand - redirection</TITLE> </HEAD> <BODY> <SCRIPT> function sendMessage() { // on cible la page parente avec window.parent // et on lui envoie un postMessage window.parent.postMessage( // message en chaîne de caractère "payment success", // on précise l'origin de ce message "https://mon-site.com" ); } sendMessage(); </SCRIPT> </BODY> </HTML> |
La page d'échec est également à créer. |
Dans la page qui contient l'iframe, on va mettre en place un écouteur d'événement. Celui-ci sera chargé d'exécuter une fonction quand il recevra un événement de type message
.
<!DOCTYPE html> <HTML lang="en"> <HEAD> <META charset="UTF-8" /> <META http-equiv="X-UA-Compatible" content="IE=edge" /> <META name="viewport" content="width=device-width, initial-scale=1.0" /> <TITLE>Site marchand - commande</TITLE> </HEAD> <BODY> <SCRIPT> // sur la page courante // on place un écouteur avec la méthode addEventListener window.addEventListener( // type d'évenement à écouter "message", // fonction de retour (callback) qui sera exécutée // quand un évenement de type "message" sera émis (event) => { // Si l'origin n'est pas la même que celle placée dans le message // on arrête l'exécution de la fonction if (event.origin !== "https://mon-site.com") return; // on redirige l'utilisateur sur la page souhaitée window.location.href = "https://mon-site.com/payment-success"; } ); </SCRIPT> ... <IFRAME src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" /> ... </BODY> </HTML> |
D'autres champs personnalisés peuvent être ajoutés à la requête afin de changer dynamiquement l'iframe.
Veuillez trouver ci-dessous les champs disponibles :
Les valeurs hexadécimales des couleurs doivent être utilisées dans les champs CustomField et le symbole '#' doit être encodé, il sera remplacé par la valeur '%23'. Ainsi pour afficher un bouton rouge (quand celui-ci est activé), il faudra valoriser le CustomField102 de la manière suivante : CustomField102=%23FF0000. |