This option allows the buyer to stay on a known and trusted environment. The payment is fluid and cart abandonment are rare. |
It is possible to use a custom template if payment page integration is used. For more details: Implementation of a Custom Template |
The iframe is web responsive and can be integrated in a mobile application. |
Table of Contents
An iframe is an HTML tag that allows you to embed one HTML page into another.
To do this, you must use the <iframe> tag and specify the URL of the page you want to display in the src attribute. The checkout page URL must contain the following value: 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> |
Warning It will be necessary to pass the parameters required to the payment with this URL At a minimum: MerchantID, Data, and Len |
In pixel
<IFRAME src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe" height="600" width="800" /> |
In 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" /> |
When the bearer submits the payment form, a request is sent to the Axepta server.
If the payment is validated, a successful response is sent. Otherwise, an Error response will be issued.
The goal is to display a success or failure page instead of the iFrame based on the payment result.
Note: The server returns an HTTP response with the POST method. We must therefore create a route on the server of the merchant site to process this answer. |
If you want to redirect the user to a page of the merchant site displayed instead of the iframe, it will be necessary to provide a redirect page.
The merchant creates these pages that will be displayed when the bearer is redirected.
Each will run a script that will redirect the user to the page in success or payment error.
The implementation of this script is indicated in the next section.
postMessage
method in redirect-success
and redirect-failure
The postMessage solution "enables secure cross-domain communication".
The goal is to "communicate" with the parent page. This communication will be done through a MessageEvent type event
<!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() { // we target the parent page with window.parent // and send it a postMessage window.parent.postMessage( // message in character string "payment success", // we specify the message origin "https://my-website.com" ); } sendMessage(); </SCRIPT> </BODY> </HTML> |
The failure page must also be created. |
In the page that contains the iframe, we will set up an event listener. It will be responsible for performing a function when it receives a message event.
<!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> |
Other custom fields can be added to the request in order to dynamically change the look and feel of the iframe.
Please find below the fields available :
The hexadecimal colour values must be used in the CustomField fields and the '#' symbol must be encoded so it will be replaced by the value '%23'. For example, to display a red button (when the button is enabled), the Customer Field102 must be enhanced as follows: CustomField102=%23FF0000. |