Embed Size (px)
Citation preview
E-transactions
MANUEL INTEGRATION
PAGE DE PAIEMENT RESPONSIVE
VERSION DU
13/11/2018
Crédit Agricole S.A, société anonyme au capital de 7 729 097 322 €. Siège social : 12 place des Etats-Unis 92127 Montrouge Cedex. Immatriculée au registre de
Nanterre sous le N° de Siren : 784 608 416, N° individuel d’identification, assujettie à la TVA : FR 77 784 608 416. Crédit Agricole S.A est un établissement de crédit de
droit français agréé par l’Autorité de Contrôle Prudentiel, (ACP 61 rue Taitbout 75 736 Paris cedex 09)
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
ii
REFERENCES DOCUMENTATIONS
REF. DOCUMENT DESCRIPTION
Ref 1 https://www.e-
transactions.fr/kits/Manuel%20installation/Off
re_premium/E-
transactions_Manuel_Integration_Internet_C
B5.5_FR.pdf
Manuel d’installation et de paramétrage
Internet
Ref 2 https://www.e-
transactions.fr/kits/Manuel%20installation/Off
re_premium/E-
transactions_NoteTechniqueIntegration_Pag
ePaiement_V1_00.pdf
Note technique d’intégration Page de Paiement
AVERTISSEMENT
Les informations contenues dans ce document n’ont aucune valeur contractuelle. Elles peuvent
faire l’objet de modification à tout moment. Elles sont à jour en date de rédaction au 13/11/2018.
E-transactions est une solution d’encaissement et de gestion des paiements à distance par carte
bancaire, dans un environnement sécurisé, distribuée par les Caisses Régionales du Crédit
Agricole.
Renseignez-vous auprès de votre conseiller sur les conditions générales et tarifaires de cette
solution.
Cette documentation peut être enrichie par vos commentaires. Vous pouvez nous envoyer un email à
[email protected], en indiquant votre remarque aussi précisément que possible. Merci de préciser
la référence du document ainsi que le numéro de la page.
LEGENDE
Les conventions suivantes s’appliquent dans la suite de ce document :
Une zone d’information : son contenu permet de mieux comprendre ce
document.
Une zone d’avertissement : le contenu de cette zone doit être lu
attentivement.
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
iii
ASSISTANCE
Pour tout renseignement ou assistance à l’installation et à l’utilisation de nos produits, nos Equipes restent
à disposition des commerçants et Intégrateurs, du lundi au vendredi de 9H à 18H30 :
Support Technique & Fonctionnel :
E-mail : [email protected]
Téléphone : 0 810 812 810 (1)
(1) prix d’un appel local non surtaxé depuis un poste fixe
Pour tout contact auprès de nos services, il faut IMPERATIVEMENT communiquer les identifiants :
numéro de SITE (7 chiffres)
numéro de RANG (3 chiffres)
Numéro d’identifiant (1 à 9 chiffres)
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation
iv
TABLE DES MATIERES
INTRODUCTION ..................................................................................................................................................... 2
INTEGRATION ........................................................................................................................................................ 3
1.1 URLS A APPELER ET ADRESSES IP ........................................................................................................................... 5 1.2 PAGE DE CHOIX DU MOYEN DE PAIEMENT ................................................................................................................ 6 1.3 PERSONNALISER LA PAGE RESPONSIVE ..................................................................................................................... 7
1.3.1 CSS à la personnalisation de vos pages.................................................................................................. 9 1.3.1.1 Le logo ................................................................................................................................................................ 9 1.3.1.2 La couleur du thème .......................................................................................................................................... 9
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
2
INTRODUCTION
Ce document est une extension du manuel d’intégration existant pour l’offre E-transactions. Nous
abordons ici seulement les particularités de la page de paiement responsive.
Le but est d’inclure les informations ici présentes dans le manuel existant.
Il est fortement recommandé de lire le manuel d’installation et de
paramétrage Internet avant d’aborder la lecture de ce document.
La nouvelle page de paiement responsive s’adapte aux dimensions de l’écran qui la visualise, en utilisant
des techniques CSS, et un code HTML optimisé.
Cette page est appelée comme les autres pages de paiement classiques, en soumettant le formulaire
adéquat à la page de choix du moyen de paiement dite PHP, ou directement sur l’url de la page de
paiement.
Seuls Les moyens de paiement suivants peuvent être utilisables sur
cette nouvelle page de paiement responsive :
- CB, Visa, Mastercard
- Amex
- Diners
- Jcb
- paypal
- paylib*
* Pour Paylib, il est obligatoire d’utiliser la page de choix du moyen de paiement.
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
3
INTEGRATION La page de paiement Responsive doit être considérée comme toute autre page de paiement du produit
E-transactions.
Pour l’appeler, le seul changement nécessaire par rapport à une intégration ‘classique’ est la valorisation
du paramètre PBX_SOURCE à RWD (Responsive Web Design).
Cette page RWD est une extension de la page mobile existante (voir section 9.4 du manuel installation et
de paramétrage Internet, Réf.1)
La page de paiement apparaîtra ainsi sur différents appareils :
Vue sur Mobile - position verticale
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
4
Vue sur Mobile - Position horizontale
Vue sur Tablette - Position horizontale
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
5
1.1 URLs à appeler et adresses IP
Les URLs pour initier des transactions avec une page de choix de moyen de paiement :
Plateforme URL d’acces
Préproduction https://preprod-tpeweb.e-transactions.fr/php/
Primaire https://tpeweb.e-transactions.fr/php/
Secondaire https://tpeweb1.e-transactions.fr/php/
Les URLs pour initier une transaction directement sur la page de paiement responsive (en forçant le moyen
de paiement)
PBX_TYPEPAIEMENT et PBX_TYPECARTE doivent être envoyés à la page
de paiement, surtout si vous avez plus d’un moyen de paiement souscrit.
Platform ACCESS URL
Préproduction https://preprod-tpeweb.e-transactions.fr/cgi/FramepagepaiementRWD.cgi
Primaire https://tpeweb.e-transactions.fr/cgi/FramepagepaiementRWD.cgi
Secondaire https://tpeweb1.e-transactions.fr/cgi/FramepagepaiementRWD.cgi
Dans les URLs spécifiées ci-dessus, « FramepagepaiementRWD » est
sensible à la casse
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
6
1.2 Page de choix du moyen de paiement
La page de choix du moyen de paiement, lorsqu’elle est appelée en mode responsive, devient elle-même
responsive, et s’adapte à l’écran qui la visualise :
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
7
1.3 Personnaliser la page responsive
La méthodologie est similaire à celle proposée dans le cadre de la personnalisation de la page de paiement
standard. (Voir Réf.2 pour la personnalisation de la page de paiement).
Nous offrons une méthode simple et efficace pour personnaliser votre page de paiement en utilisant un
logo et votre ‘thème couleur’.
Modèle de page responsive sans aucune personnalisation :
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
8
Modèle d’une page de choix du moyen de paiement responsive personnalisée :
Modèle d’une page de paiement responsive personnalisée :
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
9
1.3.1 CSS à la personnalisation de vos pages
1.3.1.1 LE LOGO
Méthode pour ajouter votre logo sur la page de paiement : Affichage en haut de page (il disparaît sur les
écrans de petite taille):
/*logo for the merchant*/
#pbx-logo {
background: url("logo_e-transactions.png") no-repeat center top;
background-size:contain;
height:40px;
}
1.3.1.2 LA COULEUR DU THEME
La page de choix sera automatiquement stylisée selon les mêmes règles choisies pour la page de
paiement.
Une couleur principale, correspondante à votre charte graphique, peut être utilisée.
Plusieurs éléments de la page de paiement sont personnalisables afin de l’adapter à votre image :
L’en-tête (affichage sur les écrans de taille réduite (même remarque que pour le logo) en modifiant
le style du bloc « pbx-logo » [Choix possible uniquement de la couleur et du logo]
/* for 480px width or less */
/* when on a small width screen the header is changed to mimum*/
@media all and (max-width: 480px) {
#pbx-logo{
position:absolute;
background:#009b9d;
}
}
Solution E-transactions Date : 13/11/2018
Manuel intégration– Page de paiement responsive
Document non contractuel propriété de Crédit Agricole S.A
Il ne peut être reproduit ou communiqué à des tiers sans autorisation Version du 26/10/2018
10
Le montant à payer et le texte identifiant votre entreprise en utilisant une couleur unique (ou une
différente)
/*the order amount and company identifier*/
#pbx-transaction-summary .label{
color: #009b9d;
}
Les blocs divers de la page et des boutons de validation :
/*Header for the frames, validation button and footer*/
.pbx-frame h1, #pbx-mean-payment-header, #pbx-footer, #pbx-button-validate{
background-color: #009b9d;
}
Les autres boutons :
/*the secondary buttons*/
#pbx-button-cancel,#pbx-button-back,#pbx-mean-payment-content-cancel {
background-color: #7F7C7C;
}
Grâce à tous ces méthodes, vous pouvez, manipuler tous les éléments de la page, afin d’adapter celle-ci
plus précisément, à votre image.
La page de choix sera automatiquement personnalisée selon les mêmes règles.
![Responsive design - Twitter Bootstrap [FR]](https://img.pdfslide.fr/doc/110x75/58ce97ee1a28ab8c3b8b6b85/responsive-design-twitter-bootstrap-fr.jpg)