V1

Recommandations pour intégrer l’iframe

2.1 Saisie des informations carte

2.1.1 Dimensions de l’iframe

L’iframe fait 390 px X 400 px, ce sont les dimensions recommandées pour l’affichage du protocole de 3-D Secure, ces valeurs ne doivent pas être modifiées idéalement pour conserver un affichage optimal, elles sont valables pour l’ensemble des pages visionnées dans l’iframe.

Ces valeurs sont spécifiées dans le fichier CSS externe qui cible directement l’iframe pour fixer ses dimensions, ici dans l’exemple, le fichier CSS s’intitule « Site.css »

2.1.2 HTML

Un fichier CSS (ici « Site.css ») doit être appelé dans le code html pour customiser l’iframe. Un conteneur (« cntnr-iframe ») peut être nécessaire pour le centrage de l’iframe sur la 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 à l’extérieur de l’iframe (customisation du conteneur parent du formulaire)

1 - Appliquer le background

Il est possible de mettre un background avec la css sur le body par exemple (derrière l’iframe) et de placer un fond avec effet de transparence sur l’iframe (cf l’exemple ci-dessous)

body {

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

}
#iframe1 {

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

}

2. Centrage de l’iframe

.cntnr-iframe {
position : relative ;
width : 100% ;
height : 100% ;
{
fixer une autre hauteur si l’iframe ne doit pas être
centrée sur l’ensemble de la fenêtre, la hauteur minimale doit être de 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 - Réduire la taille de l’iframe

C’est possible de réduire la taille de l’iframe avec la technique du transform scale. La réduction à 0.82 est vivement recommandée pour les écrans de largeur inférieure à 320px. Cette technique doit être utilisée avec beaucoup de précaution : Il faut éviter de mettre moins de 0.82 pour garder un texte lisible, à l’inverse, une valeur supérieur à 0.82 ne permettrait pas un affichage adapté pour un petit téléphone.

#iframe1 {

transform : scale(0.82,0.82);

}

2.1.4 CSS à l’intérieur de l’iframe (customisation de formulaire)

D’autres styles css sont chargés à l’intérieur de l’iframe, ça permet le bon affichage des différents éléments de la page se trouvant dans l’iframe.

C’est donc dans ces CSS que se trouvent les styles pour modifier les typos, les couleurs, le positionnement des éléments du formulaire, les styles de la tooltip… l’affichage de l’ensemble des éléments de la page chargée dans l’iframe sont gérés par ces CSS.

Ces styles css se trouvent dans les balises head de la page chargée à l’intérieur de l’iframe et peuvent être modifiés. Les modifications doivent être communiquées à l’équipe S-money.

2.2 Validation

Lorsque le paiement ou l’enregistrement CB a été réalisé, 2 scénarios de validation sont envisageables :

  • L’internaute arrive sur une page de validation qui le redirige automatiquement sur la page
    d’arrivée. La page de validation ne sera pas visible par l’utilisateur car la redirection se fait
    directement.
  • L’internaute est dirigé vers une page qui comporte un bouton de retour, il ne lui reste plus qu’à
    cliquer sur ce bouton pour arriver sur une nouvelle page.

2.2.1 Cas 1 : Validation avec redirection automatique

Il suffit pour la redirection automatique d’intégrer dans le code source de la page de validation une redirection automatique avec le JavaScript ci-dessous qui apparaît dans les balises script se trouvant entre les balises head. Il faut mettre l’adresse prévue pour la redirection à la place de « 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 avec redirection manuelle à l’aide d’un bouton

1 - HTML

L’attribut target="_parent" du lien est obligatoire pour que la redirection se fasse correctement dans la fenêtre. Dans cet exemple, il y a une div « container » et une div « inner » pour centrer verticalement et horizontalement le contenu de la 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

Le fichier CSS spécifique à la page pourra être inclus dans le code source directement.
Le css ci-dessous permet un centrage vertical et horizontal de manière fluide sur tous les supports (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;
}