Methods of integrating the payment form

Recommendations for iframe integration

2.1 Enter the card data

2.1 iframe dimensions

The iframe is 390 pixels x 400 pixels, these are the dimensions recommended for the 3-D Secure protocol display, these values should not be modified to keep the ideal display, they are valid for all the pages viewed in the iframe.

These values specified in the external CSS file, which targets directly the iframe to fix its dimensions, here in the example, the name of the CSS file is « Site.css »

2.1.2 HTML

A CSS file (here « Site.css ») must be called in the html code to customise the iframe. A container (« cntnr-iframe ») may be necessary for centering the iframe on the page.

<link rel="stylesheet" type="text/css" href=" Site.css">
<div class="cntnr-iframe">
  <iframe src="url" id="iframe1" frameborder="0"
scrolling="no"></iframe>
</div>

2.1.3 CSS to the outside iframe (customisation of the parent container of the form)

1 - Apply the background

It is possible to put a background with the css on the body, for example (behind the iframe) and to place a background with a transparency effect on the iframe (example below)

body {

background:url('background.gif') no-repeat center center;
background-size: cover;
height:100%;

}
#iframe1 {

background-color: rgba(0, 0, 0, 0.2);

}

2. 2. Centering the iframe

.cntnr-iframe {
position : relative ;
width : 100% ;
height : 100% ;
{
set a different height, if the iframe should not be
centered on the entire window, the minimum height should be 400
pixels
}
#iframe1 {

width: 390px;
height: 400px;
position: absolute;
left:50%;
top: 50%;
margin-top: -200px; (équivalent à la moitié de la hauteur spécifiée en css (400px))
margin-left:-195px; (équivalent à la moitié de la largeur spécifiée en css (390px))

}

3 - Reduce the size of the iframe

It is possible to reduce the size of the iframe using the transform scale technique. It is recommended to reduce to 0.82 for sreen width less than 320px. This technique should be used with a lot of precaution: it is recommended to avoid setting less than 0.82 to keep a text readable. Otherwise, a value greater than 0.82 will not allow a display adapted for a small phone.

#iframe1 {

transform : scale(0.82,0.82);

}

2.1.4CSS within iframe (form customisation)

Other css styles are loaded within iframe, which allows to display properly different elements of the page in the iframe.

It is then within these CSS where yu can find styles to modify typos, colours, the positioning of the form elements, styles of the tooltip… the display of all the elements of the page loaded within iframe are managed by these CSS.

These css styles can be found in the head tags of the page loaded within iframe and can be modified. Modifications should be communicated to the S-money team.

2.2 Validation

Once a payment or bank card registration has been completed, 2 validation scenarios are possible:

  • Internet user arrives on the validation page which redirects automatically to the landing page.
    The validation page will not be visible to the user because the redirection is done directly.
  • Internet user is redirected to a page which contains a return button. He/she only needs to click on this button to arrive a new page.

2.2.1 Case 1: Validation with automatic redirection

To obtain automatic redirection, it is necessary to integrate in the source code of the validation page, automatic redirection with JavaScript below which appears in the script tags script, which can be found in the head tags. It is necessary to enter the address intended for redirection instead of « http://www.example.com »

<head>
    …
   <script>
       function RedirectionJavascript() {
          window.top.location.href = "http://www.example.com";
       }
    RedirectionJavascript();
    </script>
</head>

2.2.2 Cas 2 : Validation with manual redirection using a button

1 - HTML

The target attribute="_parent" of the link is mandatory for the correct redirection in the window. In this example, there is a div « container » and a div « inner » for centering vertically and horizontally the content of the page.

<body>
 <div class="container">
   <div class="inner ">
     <strong class="title">Bravo !</strong>
     <p class="text">Votre paiement a été effectué avec succès.</p>
           <a  href="http://www.example.com"  target="_parent" class="button">Retour à l'accueil</a>
     </div>
 </div>
</body>

2 - CSS

The CSS file specific to the page could be included directly in the source code.
The css below allows horizontal and vertical centering in smooth way on all types of media (mobiles, tablettes…).

body {
   text-align :center ;
}
.container {
   display:table;
   height:100%;
   width:80%;
   margin:0 auto;
}
.inner {
   display:table-cell;
   padding:50px 0;
   text-align:center;
   vertical-align:middle;
}