Table of Contents |
---|
Info | ||
---|---|---|
| ||
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. |
Tip |
---|
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é |
Tip |
---|
L'iframe est web responsive et /ou intégration dans app mobilepeut être intégré dans une application mobile. |
Table des matières
Table of Contents |
---|
Synthèse de la mise en place de l'iframe
- Mise en place de l'iframe dans la page de paiement du marchand
- Configuration de l'URL passée à l'atttribut src
- Préparation des paramètres
URLSuccess
etURLFailure
avec les URL de retour en succès et en erreur - Placement de ces 2 paramètres dans le hash du paramètre
Data
- Passage de
Data
en paramètre de l'URL fournie à l'attributsrc
de l'iframe - Ajout du paramètre
CustomField14=iframe
pour avoir uniquement l'affichage du bloc de paiement
- Préparation des paramètres
Création des pages 'Succès' et 'Échec'
Préparation du code HTML de
redirect-success
etredirect-failure
- Mise en place de la redirection en JavaScript
- Intégration de la méthode
postMessage
dansredirect-success
etredirect-failure
- Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement du marchand
- Intégration de la méthode
Mise en place de l'iframe et configuration de l'URL passée à l'atttribut src
Balise iframe & customField14
Il faut pour cela utiliser la balise <iframe> et spécifier l'URL de la page qu'on souhaite afficher dans l'attribut src avec l'utilisation du attribut src. L'URL de la page de paiement doit contenir la valeur suivante :customField14=iframe.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!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> |
Warning |
---|
Attention Il conviendra de passer les paramètres requis au paiement avec cette URL Au minimum : |
Réglages
: Hauteur
et largeur& Largeur
En pixel
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<IFRAME src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" height="600" width="800" /> |
En CSS
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
#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" /> |
Création des pages 'Succès' et 'Échec'
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.
Paramètres
Il faut intégrer 2 paramètres à la requête pour indiquer au serveur quelle URL utiliser en cas de succès ou d'erreur.
URLSuccess
: URL de retour en succès (ex: https://mon-site.com/payment-success)URLFailure
: URL de retour en erreur (ex: https://mon-site.com/payment-failure)
Ces deux paramètres font partie des paramètres chiffrés de la requête. Ils seront donc intégrés au paramètre Data
Tip |
---|
Les pages 'payment-success' |
Les URL de retours sont maintenant configurées. Il s'agit de faire correspondre ces URL avec des pages sur le site marchand. Si on reprend nos exemples ci-dessus, nous aurons, en fonction du site, 2 routes à configurer payment-succes
et payment-failure
.
Tip |
---|
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. |
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!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>
<H1>Paiement réussi</H1>
<P>Merci pour votre commande</P>
</BODY>
</HTML> |
Warning |
---|
Attention la page s'affichera dans l'iframe ! En effet, quand la requête de paiement s'effectue depuis l'iframe, la réponse du serveur est aussi renvoyée dans l'iframe. Dans notre cas, on aura donc 2 pages du site marchand qui seront affichées, la page de paiement qui insére l'iframe et la page de succès afficher dans l'iframe. Il est donc nécessaire de mettre en place la redirection permettant d'afficher la page de succès ou d'échec à la place de l'iframe. |
Mise en place de la redirection en JavaScript
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. Modifier dans un premier temps les paramètres URLSuccess
et URLFailure
pour les faire pointer vers ces pages de redirection
URLSuccess
: https://mon-site.com/redirect-successURLFailure
: https://mon-site.com/redirect-failure
Ensuite, il s'agira de créer Le 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. Mais cette fois elles ne s'afficheront plus dans l'iframe mais bien dans la fenêtre principale.
La mise en place de ce script est indiqué dans la section suivante.
Mise en place de la redirection en JavaScript
Intégration de la méthode postMessage
dans redirect-success
et redirect-failure
La solution postMessage
qui "permet une communication inter-domaine en toute sécurité".
Plutôt que de modifier directement l'URL depuis la page chargée dans l'iframe, il s'agit L'objectif est de "communiquer" avec la page parente. Cette communication se fera grâce à un événement de type MessageEvent
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!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> |
Tip |
---|
La page d'échec est également à créer. |
Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement
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 évenement événement de type message
.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!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> |
Customisation dynamique
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 :
- CustomField100 : couleur du background
- CustomField101 : couleur du texte des boutons lorsqu'ils est actif
- CustomField102 : couleur du background des boutons lorsqu'il est actif
- CustomField103 : couleur au hover du texte des boutons lorsque le bouton est actif
- CustomField104 : couleur au hover du background des boutons lorsque le bouton est actif
- CustomField105 : couleur du texte des bouton lorsqu’ils sont inactifs
- CustomField106 : couleur du fond des boutons lorsqu’ils sont inactifs
Tip |
---|
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. |