Dernière mise à jour 2/05/2014

Contenu

6. Aspect de la page de paiement

APPARENCE : Créez votre page de paiement de manière à ce qu’elle reflète votre marque et les besoins de vos clients au moment de payer pour obtenir un entonnoir d’achat cohérent et augmenter votre taux de conversion. On distingue deux types d'informations sur la page de paiement hébergée :

  • Informations statiques (par ex. votre logo)
  • Informations de paiement (par ex. référence de la commande, champs dans lesquels le client saisit les informations de sa carte, etc.).

Les informations statiques proviennent de la présentation commune de notre système ou d'une page de modèle d'un commerçant spécifique. Notre système ajoute les informations de paiement de manière dynamique pour chaque transaction. Le commerçant a toutefois la possibilité d'adapter l'aspect de ces informations de paiement au moyen de styles HTML.

Vous pouvez personnaliser votre page de paiement en appliquant des fichiers HTML et CSS personnalisés à votre contenu. Il vous suffit de nous dire où intégrer la « ZONE DE PAIEMENT », qui prendra en charge le paiement sur votre page.

HÉBERGEMENT SÉCURISÉ: PostFinance propose un hébergement sécurisé de votre modèle de page de paiement pour vous permettre de respecter la norme PCI.

Remarque: vous pouvez sauter la section suivante de personnalisation du modèle de démonstration si vous n’avez pas l’intention de personnaliser votre page de paiement.

6.1 Modèle de Responsive Payment Page PostFinance

Notre modèle de page de paiement entièrement réactive est la solution parfaite et la plus simple pour une expérience de shopping en ligne à plusieurs écrans pour vos clients. Il vous garantit une conversion optimisée aussi bien sur les ordinateurs de bureau que sur les appareils mobiles.

  • Pour activer le modèle de Responsive Payment Page depuis le back office, allez sur Configuration >Modèle > Sélecteur de modèle et cliquez sur « Activer » la Responsive Payment Page.
  • Pour personnaliser le modèle en ajoutant votre logo, allez sur Configuration > Modèle > Gestionnaire de fichiers et téléchargez votre logo auquel vous aurez donné le nom : « logo.png ».

6.2 Adaptez et téléchargez votre propre modèle personnalisé

Commencez par télécharger ci-dessous le fichier source du modèle de Responsive Payment Page PostFinance pour le personnaliser librement et qu’il réponde aux besoins spécifiques de votre marque. Vous pouvez concevoir votre propre page modèle de A à Z en ne laissant qu’un espace sur cette page qui sera rempli par notre système. Vous pouvez aussi héberger votre page et vos fichiers modèles dans notre environnement sécurisé auquel nous faisons référence sous le nom de « modèle statique ».

Télécharger notre modèle de démo pour les pages de paiement e-commerce

Vous pouvez essayer nos modèles de démo prenant en charge les navigateurs d’ordinateurs fixes et de portables. Vous pouvez les utiliser tels quels ou les personnaliser facilement selon vos besoins. Adaptez simplement les différentes valeurs avec les fichiers css du modèle pour obtenir la page que vous souhaitez.

Si vous ne voulez pas personnaliser les fichiers css fournis, vous pouvez également compléter le code HTML en ajoutant vos propres informations d’en-tête et de pied de page. Veuillez vous reporter au Chapitre 6.2.2 pour de plus amples informations. Pour des raisons de sécurité, n’ajoutez pas de données/fichiers externes non autorisés. Tous les fichiers et toutes les données doivent être téléchargés vers le Gestionnaire de fichiers pour pouvoir être utilisés.

Après avoir réalisé ces étapes, suivez ces étapes pour télécharger et appliquer gratuitement les modèles :

  1. Téléchargez le fichier compressé.
  2. À partir du Back Office, allez dans Configuration > Modèle > Configuration avancée pour autoriser l'utilisation d'un modèle dynamique > Oui pour activer le modèle dynamique.
  3. Allez dans Configuration > Modèle > Gestionnaire de fichiers pour envoyer les différents fichiers contenus dans le fichier compressé (pas de dossier).
  4. Allez dans Configuration > Modèle > Selection du  modèle pour sélectionner votre « Modèle du commerçant par défaut » pour votre e-commerce.

IMPORTANT:

  • Les méthodes de paiements sur notre modèle responsive de page de paiement doivent être placés de manière verticale.  Afin d’obtenir le résultat requis, veillez à envoyer les paramètres additionnels suivant PMLISTTYPE=2
  • Vous pouvez vous arrêter ici si vous choisissez de ne pas personnaliser votre page de e-commerce. Pour davantage d’informations sur la personnalisation de votre page de e-commerce avec notre modèle de démo, passez à la section suivante.
  • La plateforme prend en charge plusieurs modèles. Vous pouvez rejeter le modèle par défaut pour toute transaction et en sélectionner un en particulier à l’aide du paramètre « TP » dans votre demande en POST (TP=<nom complet du fichier HTML avec extension>).

Personnalisation importante : concevez votre propre page de paiement. 

En dehors de la personnalisation des fichiers css fournis, vous pouvez compléter le fichier HTML en ajoutant vos propres informations d’en-tête et de bas de page. Veuillez consulter le Chapitre 6.2.2 pour plus d’informations. Pour une question de sécurité, n’appliquez pas de données/fichiers externes non autorisés. Tous les fichiers et données doivent être envoyés dans le Gestionnaire de fichiers afin d’être utilisés.

6.2.1 Champs cachés

Le champ masqué utilisé pour transmettre l’URL de votre modèle de page est le suivant :

<input type="hidden" name="TP" value="">

Champ
Objet
TP Nom de fichier du modèle hébergé par PostFinance.

Exemple:

<input type="hidden" name="TP" value="mytemplatefile.html">

6.2.2 Zone de paiement (Payment zone)

Vous pouvez concevoir l’ensemble du modèle de page selon vos préférences. La seule condition à observer est qu’il doit contenir la chaîne « $$$PAYMENT ZONE$$$ », qui indique l’endroit où notre module e-Commerce peut ajouter ses champs de manière dynamique. Il doit par conséquent contenir au moins les champs suivants :

<html>
$$$PAYMENT ZONE$$$
</html>

Important

N’utilisez pas de balises BASE, de cadres ou de balises FORM pour encapsuler la chaîne $$$PAYMENT ZONE$$$.

6.2.3 Feuille de style

Vous pouvez personnaliser l’aspect de vos pages de paiement en ajoutant des feuilles de style à votre modèle de page.

Nous avons défini une catégorie pour les différents types de tableaux et de cellules contenues dans nos tableaux, ainsi qu’une catégorie pour les boutons d’envoi. Ajoutez les blocs de codage suivants entre les balises <head></head> et modifiez les propriétés de ces catégories pour les adapter à l’aspect de votre site (voir l’exemple du modèle de page mentionné plus haut) :

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

Lors de la saisie de vos instructions de mise en page, vous devez respecter la syntaxe de la feuille de style en cascade. Nous vous conseillons vivement de tester votre présentation dans différents navigateurs. La façon dont ils traitent les styles peut en effet énormément varier.

6.3 Mise en page basée sur le modèle (modèle dynamique)

La page de modèle dynamique vous permet de personnaliser la conception des pages de paiement de façon plus évoluée qu'avec le modèle statique.

Lorsque vous utilisez une page de modèle dynamique, vous concevez totalement votre propre page de modèle, en y laissant simplement une section destinée à être complétée par notre système. L'adresse URL de votre page de modèle doit nous être envoyée dans les champs cachés pour chaque transaction.

Veuillez garder à l'esprit que le fait d'utiliser une page de modèle dynamique implique une demande supplémentaire auprès de notre système pour consulter votre page de modèle. Ceci accroît le temps nécessaire au processus de paiement.

Important

Pour rester en conformité avec la dernière version de PCI-DSS, vous devez héberger votre modèle (et les fichiers associés) dans un environnement ayant la plus haute certification PCI.

6.3.1 Champs masqués

Le champ masqué utilisé pour transmettre l’URL de votre modèle de page est le suivant :

<input type="hidden" name="TP" value="">

Champ
Objet
TP URL du modèle de page dynamique du marchand (la page doit être hébergée du côté du marchand). L’URL doit être absolu (il doit contenir le chemin complet), et non relatif. Ne précisez aucun port dans votre URL : nous n’acceptons que les ports 443 et 80. Toute composante incluse dans le modèle de page tout aussi avoir un URL absolu.

6.3.2 Zone de paiement (Payment zone)

Vous pouvez concevoir l’ensemble du modèle de page dynamique selon vos préférences. La seule condition à observer est qu’il doit contenir la chaîne « $$$PAYMENT ZONE$$$ », qui indique l’endroit où notre module e-Commerce  peut ajouter ses champs de manière dynamique. Il doit par conséquent contenir au moins les champs suivants :

<html>

$$$PAYMENT ZONE$$$

</html>

Important

N’utilisez pas de balises BASE, de cadres ou de balises FORM pour encapsuler la chaîne $$$PAYMENT ZONE$$$.

Vous trouverez un exemple de modèle de page dynamique à l’adresse suivante : https://e-payment.postfinance.ch/ncol/template_standard.htm  

6.3.3 Comportement dynamique

Le marchand peut opter pour un même modèle de page pour toutes les commandes ou pour un modèle produit de manière dynamique par son application en fonction des paramètres de la commande.

Pour produire le modèle de page de façon dynamique, le marchand a deux possibilités : créer une page propre à la commande, dont l’URL est transmis dans les champs masqués, ou utiliser un URL fixe mais produisant un résultat découlant du numéro de commande. Pour cela, notre système ajoute les principales données de paiement (y compris le numéro de référence de la commande du marchand) (cf. Traitement après paiement) lorsqu’il récupère le modèle de page :

HTTP request = url_page_template ?ORDERID=...&AMOUNT=...&CURRENCY=…

6.3.4 Feuille de style

Vous pouvez personnaliser l’aspect de vos pages de paiement en ajoutant des feuilles de style à votre modèle de page.

Nous avons défini une catégorie pour les différents types de tableaux et de cellules contenues dans nos tableaux, ainsi qu’une catégorie pour les boutons d’envoi. Ajoutez les blocs de codage suivants entre les balises <head></head> et modifiez les propriétés de ces catégories pour les adapter à l’aspect de votre site (voir l’exemple du modèle de page mentionné plus haut) :

<style type="text/css">
<!--
td.ncolh1 {background-color : #006600; color : yellow; font-family : verdana}
td.ncoltxtl {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtl2 {background-color : #ffffcc; color : black; text-align : right; font-weight : bold}
td.ncoltxtr {background-color : #ffffcc; color : black; text-align : left; font-weight : bold}
td.ncoltxtc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
td.ncolinput {background-color : #ffffcc; color : black}
td.ncolline1 {background-color : #ffffff; color : black}
td.ncolline2 {background-color : #ffffcc; color : black}
input.ncol {background-color : #006600; color : white}
td.ncollogoc {background-color : #ffffcc; color : black; text-align : center; font-weight : bold}
table.ncoltable1 { background-color: #ffffcc;   }
table.ncoltable2 { background-color: #ffffcc;  border-width : medium; border-color : green; }
table.ncoltable3 { background-color: #ffffcc;   }
-->
</style>

Lors de la saisie de vos instructions de mise en page, vous devez respecter la syntaxe de la feuille de style en cascade. Nous vous conseillons vivement de tester votre présentation dans différents navigateurs. La façon dont ils traitent les styles peut en effet énormément varier.

6.3.5 Performance

La configuration de notre système prévoit un délai de 5 secondes pour la demande de récupération de la page correspondant au modèle dynamique du marchand.

Veuillez contacter notre notre service clientèle Merchanthelp, Tel. +41 (0)848 38 24 23, E-Mail: merchanthelp@postfinance.ch, pour changer cette valeur (HTTPTimeOut).

Si ce délai est dépassé, notre système utilise le modèle statique du marchand.

Si aucun modèle statique n'est configuré, notre système utilise en dernier ressort le modèle statique de PostFinance.

Ce champ HTTPTimeOut a une incidence non seulement sur les demandes de modèle dynamique, mais aussi sur les demandes d’informations après paiement (voir Requête de réponse directes (après paiement)). En conséquence, si le marchand décide de le modifier pour le faire passer à 15 secondes, par exemple, la temporisation pour la demande d’informations passera elle aussi à 15 secondes.

Pour chaque commande, notre système effectue une demande de récupération de votre modèle de page dynamique. Si vos volumes de transaction sont importants ou si votre modèle de page est lourd (par ex., s’il contient un grand nombre d’images), ces demandes http peuvent être longues. Contactez notre service clientèle Merchanthelp pour trouver une solution si vos volumes de transaction sont importants.

6.4 Modèle pour mobile

Vous pouvez optimiser l'affichage de la page paiement sur les appareils mobiles (smartphones, tablettes, etc.) en appliquant une page de modèle, assortie de feuilles de style, comme expliqué dans les chapitres suivants.

6.4.1 Paramètres de présentation

Les champs ci-dessous peuvent être personnalisés en indiquant certaines informations dans la requête :

<input type="hidden" name="TITLE" value="">
<input type="hidden" name="BGCOLOR" value="">
<input type="hidden" name="TXTCOLOR" value="">
<input type="hidden" name="TBLBGCOLOR" value="">
<input type="hidden" name="TBLTXTCOLOR" value="">
<input type="hidden" name="BUTTONBGCOLOR" value="">
<input type="hidden" name="BUTTONTXTCOLOR" value="">
<input type="hidden" name="LOGO" value="">
<input type="hidden" name="FONTTYPE" value="">

Champ

Description

Valeur par défaut

TITLE Titre de la page Title
BGCOLOR Couleur de fond white
TXTCOLOR Couleur de texte black
TBLBGCOLOR Couleur d'arrière-plan des colonnes de droite white
TBLTXTCOLOR Couleur du texte des colonnes de droite black
BUTTONBGCOLOR Couleur de fond des boutons s.o.
BUTTONTXTCOLOR Couleur du texte des boutons black
LOGO

URL/nom de fichier du logo que vous souhaitez afficher sur la page de paiement

https://e-payment.postfinance.ch/images/merchant/[PSPID]/[image]

-
FONTTYPE

Famille de la police

Verdana

6.4.2 Modèle

Le champ masqué suivant est utilisé pour transmettre l'URL de votre page de modèle :

<input type="hidden" name="TP" value="">

Champ Description
TP

URL de la page de modèle dynamique. L'URL doit être absolue (contenir le chemin complet), elle ne peut pas être relative. Tout élément inclus dans la page de modèle doit également avoir une URL absolue.

Important : Conformément aux exigences PCI-DSS (2015) les plus récentes, vous devez héberger les éléments de modèle utilisés sur la page de paiement dans un environnement avec la certification PCI la plus élevée. Par conséquent, nous vous recommandons d'héberger vos fichiers avec PostFinance.

Zone de paiement

La page de modèle peut être personnalisée entièrement. Seule obligation : elle doit comporter la chaîne « $$$PAYMENT ZONE$$$ », qui indique l'emplacement où notre e-Commerce module peut ajouter son champ dynamiquement. Elle doit donc au moins contenir les éléments suivants :

<html>
$$$PAYMENT ZONE$$$
</html>

Accédez aux exemples de modèles et utilisez les modèles que nous avons créés, ou inspirez-vous de nos modèles pour créer le vôtre.

6.4.3 Feuilles de style (CSS)

Pour mieux gérer et comprendre le CSS, nous avons divisé le CSS du modèle en quatre parties principales :

Remarque : Bien que les exemples d'images ci-dessous reflètent les éléments qui seront affectés par le CSS, le style (couleurs, images, etc.) utilisé peut différer de ce qui est indiqué dans les exemples de codes associés.


En-tête

Ce style vous permet de modifier l'en-tête de la page de paiement comme indiqué ci-dessous :

Élément(s)

- Partie verrouillée

.securedBG
{
background: #797979;
}
.secured
{
padding: 8px 20px 0px 40px;
color: #ffffff;
width: 235px;
margin: 0 auto;
background: url("lock.png") 5px no-repeat #797979;
height: 30px;
}

- Récapitulatif de la commande

table.ncoltable1
{
width: 100%;
margin: 0 auto;
min-width: 300px !important;
}
td.ncoltxtl
{
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
text-align : left !important;
font-weight : bold !important;
vertical-align:bottom;
}
td.ncoltxtr
{
text-align: left;
font-weight: normal;
font-family: open-sans ,Verdana,sans-serif;
font-size: 14px;
background-color:#ffffff;
}

 

Informations de paiement

Ce style vous permet de personnaliser la section des informations de paiement comme indiqué ci-dessous :

td.ncolinput
{
text-align: left;
font-weight: normal;
font-size: 14px;
font-family: open-sans ,Verdana,sans-serif;
display: block;
box-shadow: none !important;
}
input.ncol
{
background-color: #ffffff;
height: 40px;
font-size: 14px;
text-align: center;
padding: 0px;
font-family: open-sans ,Verdana,sans-serif;
margin: 0 35px 20px;
border-bottom: 1px solid #999999;
border-radius: 0px;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}
td.ncoltxtl2
{
text-align: left;
font-family: open-sans ,Verdana,sans-serif;
white-space: nowrap;
display: block;
font-size: 14px;
background-color:#ffffff;
}

 

Pied de page

Ce style vous permet de modifier le pied de page de la page de paiement :

Élément(s)

td.ncollogoc
{
text-align: center;
font-weight: normal;
font-size: 14px;
padding: 2px;
vertical-align: top !important;
}
td.ncollogoc IMG
{
width: 90px;
height: 55px;
margin-right: 4px;
}
.ncollogoc td .ncol
{
width: auto;
padding-right: 10px;
padding-left: 10px;
cursor:pointer;
}
.ncollogoc input.ncol
{
margin-top:10px !important;
-webkit-appearance: none !important;
-webkit-border-radius: 0 !important;
}

 

Section du statut de paiement

Cette section vous permet de personnaliser la présentation de la page du statut de paiement) comme indiqué ici :

Élément(s)

td.ncoltxtc
{
background-color:#ffffff;
color:#999999;
padding: 0px;
text-align: left;
font-weight: normal;
font-size: 14px;
border-top: 0px solid #ffffff;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtc h3
{
text-align: center;
font-weight: normal !important;
padding: 5px;
font-family: open-sans ,Verdana,sans-serif;
}
td.ncoltxtmessage
{
background-color: #ffffff;
color: #999999;
text-align: left;
font-weight: normal;
}

 

Voici ce à quoi la page doit ressembler :

6.4.4 Exemples de pages

Pour vous aider à démarrer, nous avons créé ceux pages.

La première est une version de marque que vous pouvez utiliser comme exemple :

https://e-payment.postfinance.ch/ncol/StandardMobileTemplate.htm

Vous pouvez aussi utiliser la version « dénudée » ci-après comme base pour créer votre propre modèle :

https://e-payment.postfinance.ch/ncol/StandardMobileTemplate_generic.htm

Ces deux modèles ainsi que d'autres fichiers (polices, images) sont disponibles au format compressé ici

6.5 Gestionnaire de fichiers modèles

Avec le « Gestionnaire de fichiers modèles », vous pouvez facilement gérer vos modèles et les différents fichiers connexes.

Pour commencer à utiliser le « Gestionnaire de fichiers », connectez-vous à votre compte PostFinance et allez dans « Configuration » > « Modèle » > « Gestionnaire de fichiers ».

Important
Il n’est pas possible d’utiliser des fichiers précédemment téléchargés par PostFinance en même temps que des fichiers téléchargés avec le « Gestionnaire de fichiers » dans votre intégration.
Par conséquent, si vous avez des fichiers qui ont été précédemment téléchargés par PostFinance, veuillez vous assurer de télécharger une nouvelle fois ces fichiers vous-même à l’aide de « Gestionnaire de fichiers ».

6.5.1 Télécharger des fichiers modèles

Dans « Télécharger des fichiers modèles », sélectionnez le bouton « Fichiers... » pour parcourir les fichiers que vous voulez télécharger. Vous pouvez télécharger des Javascripts, des fichiers html et css et des images (.css, .jpg, .jpeg, .gif, .png, .html, .js), avec un maximum de 7 Mb par fichier, et 10 Mb au total.

Faites votre sélection puis confirmez.

6.5.2 Contrôler et gérer les fichiers téléchargés

Une fois le téléchargement terminé, vous verrez vos fichiers téléchargés sur la même page dans la partie « Fichiers téléchargés ».

Le statut des fichiers sera d’abord « En cours de validation ». Pendant ce temps, plusieurs contrôles de sécurité/virus sont réalisés.

Vous pouvez utiliser les fichiers lorsque leur statut est « Validé ».

Cliquez sur le bouton « Actualiser »  pour vérifier le statut de vos fichiers / Cliquez sur le bouton « Supprimer »  pour supprimer définitivement le fichier.

Un fichier aura le statut « Refusé » s’il ne passe pas le contrôle de sécurité. Cela peut être dû à la présence d’un virus ou à une extension de fichier erronée, par exemple. 

6.5.3 Intégration

Dans vos modèles, vous renvoyez vers vos fichiers téléchargés avec un code en respectant la structure suivante : $$$TP RESOURCES URL$$$/[nom de votre fichier].

Cependant, si vous souhaitez utiliser une ressource dans un fichier CSS, vous devrez mentionner le code suivant : "./[votre nom de fichier]

Exemple :

Pour renvoyer vers le modèle que vous avez téléchargé dans votre intégration e-Commerce, vous envoyez le nom du fichier modèle avec le paramètre « TP ».

Exemple : TP=mytemplatefile.html

Lorsque vous avez une intégration de base e-Commerce au moyen d’un logo en haut de la page, vous devez renvoyer vers le logo téléchargé en envoyant le nom du fichier avec le paramètre « LOGO » (LOGO).

Exemple : LOGO=mycompanylogo.png

6.6 Contrôle de la sécurité des modèles

Pour protéger les clients du commerçant des activités frauduleuses telles que la manipulation des données sensibles de la carte (numéro de carte, code de vérification CVC), différents contrôles de sécurité ont été mis à disposition pour le modèle du commerçant.

Sur la page Information technique du commerçant, onglet "Paramètres globaux de sécurité", section "Modéle", vous pouvez configurer les paramètres suivants :

  • Contrôle JavaScript sur le modèle
    Le commerçant peut activer cette fonction pour détecter l'utilisation de Javascript sur la page du modèle.Si Javascript est détecté, le modèle est bloqué et c'est le modèle par défaut qui est utilisé.
  • l'Utilisation d'un modèle dynamique
    Si le commerçant a activé l'option Autoriser l'utilisation d'un modèle dynamique, il est obligatoire de définir le nom d'hôte du site web de confiance qui héberge ce modèle dynamique. Ce champ peut contenir plusieurs noms d'hôte, séparés par un point-virgule, mais ils doivent tous contenir l'adresse URL complète, p. ex. http://www.website.com/. Les sous-répertoires peuvent être omis, de telle sorte que si le modèle dynamique est http://www.website.com/templates/nl/template1.htm, il suffit de définir http://www.website.com comme nom d'hôte du site web de confiance.

En outre, le commerçant peut également définir, s'il le souhaite, une ou plusieurs adresses URL de modèle dynamique totalement fiables, séparées par un point-virgule. 

Si un modèle dynamique est soumis lors d'une transaction, mais que les modèles dynamiques ne sont pas autorisés, le modèle sera bloqué et notre système utilisera à sa place le modèle statique.

Si aucun modèle statique n'a été défini, le modèle PostFinance sera utilisé par défaut. Par défaut, les options Contrôle JavaScript sur le modèle sera activé pour les commerçants. 

6.7 Cadenas de l’environnement sécurisé

L’URL utilisé pour connecter le client à notre plateforme utilise un protocole sécurisé (https). L’ensemble des communications entre notre plateforme e-Commerce et le client sont chiffrées de façon sécurisée.

Il arrive cependant que le cadenas du navigateur (qui signale au client que le site est sécurisé) n’apparaisse pas lorsque certains éléments (comme des images) contenus sur le modèle de page ne sont pas hébergés sur un serveur sécurisé ou lorsque certains frame sur l’écran présentent des pages qui ne proviennent pas de sites sécurisés.

Même si la communication liée au traitement des paiements est chiffrée, la plupart des navigateurs ne reconnaissent les connexions sécurisées que si tous les éléments apparaissant à l’écran (images, sons, etc.) proviennent de sites sécurisés.

Pour les marchands qui ne disposent pas d’un site sécurisé, souvenez-vous des règles suivantes :

  1. N’utilisez pas de frames pour les pages de paiement : vous pouvez actualiser l’ensemble de l’écran avec un modèle de page qui donne l’impression que vous utilisez des cadres ou faire en sorte que le paiement puisse être traité dans une nouvelle fenêtre.
  2. Ne liez pas de fichiers au modèle de page (balise <link>) que vous utilisez pour la page de paiement. Utilisez plutôt les balises <style> et <script> pour intégrer des styles et des scripts sur le modèle de page.
  3. Assurez-vous que les images de votre modèle sont hébergées sur un serveur sécurisé (le modèle de page peut être hébergé sur un serveur non sécurisé, mais pas les images). Nous pouvons nous héberger ces éléments (consultez les options d’hébergement des images dans votre compte).

6.8 Page de paiement dans un iframe

l'Utilisation d'iframes devient de plus en plus populaire. ils permettent aux marchands d'intégrer une page externe (tel que la page de paiement) dans leur interface, tout en maintenant leur propre URL dans la barre d'adresse du navigateur.

Cependant, dans le contexte actuel, les iframes ont désavanatages:

  • Comme l'URL est celle du marchand, elle peut être http (au lieu d'https) sans afficher l'icône du cadenas dans la navigateur. Cela peut provoquer un sentiment de doute chez le porteur de carte quand à la sécurité de sa transaction;
  • Certaines méthodes de paiement (comme Giropay, Sofortüberweisung, Bancontact/Mister Cash, PayPal...) utilisent des redirections vers des sistes externes, ce qui peut provoquer des gros soucis de mise en page et de navigation

Pour ces raisons, PostFinance déconseille formellement l'utilisation des iframes, et leur utilisation est aux risques et périls du marchand. Nous conseillons l'utilisation de Modèles Dynamiques comme alternative.

Si vous souhaitez rtout de même utiliser un iframe, veuillez noter les recommandations suivantes:

  • Utilisez des iframes uniquement pour la page de paiement et au-dela
  • Quand vous en avez la possibilité, utilisez des pop-ups dès que possible, afin d'assurer la visibilité des applications de tierces parties.