Cette documentation permet de créer et utiliser un Template personnalisé de page de paiement.
Contexte
Un commerçant à la possibilité de modifier le template générique Axepta afin de le dynamiser avec des éléments graphique ou du texte.
Une fois le template dynamisé, il est nécessaire de modifier le MerchandID du template afin que le commerçant puisse l'uploader sur son espace Axepta.
A chaque page de paiement, un template
Il existe 2 types de pages de paiement AXEPTA
Nom | Endpoints | Rendu | Templates Standard AXEPTA | Templates Personnalisés Marchands (Ex : BNP_DEMO_AXEPTA) |
---|---|---|---|---|
Formulaire de choix des moyens de paiement | paymentpage.aspx | PaymentPageLogos_BNP_v1 | To add | |
PaymentPageDropDown_BNP_v1 | To add | |||
Formulaire de paiement par carte | payssl.aspx | Cards_BNP_V1 | To add |
Templates (archives) à destination des marchands
Les Templates suivants peuvent être téléchargés et serviront de base de personnalisation pour les marchands.
XXXXXXXXX
Contenu de l'archive Template
Composition à la racine
L'organisation et le nommage des fichiers sont identiques pour PaymentPage et PaySSL.
Les fichiers sont nommés tel que :
XML : {MerchantID}_{TemplateName}_{TemplateType}
XLS : {MerchantID}_{TemplateName}_{TemplateType}
Image : images_{TemplateName}_{MerchantID}
Remarque les fichiers XML and XSL ont le même nom
Avec BNP_DEMO_AXEPTA
Dans notre exemple, cela donne :
{MerchantID} : BNP_DEMO_AXEPTA
{TemplateName} : CardsV1
{TemplateType} : PaySSL ou PaymentPage
A la racine du template BNP_DEMO_AXEPTA :
Un fichier XML : BNP_DEMO_AXEPTA_CardsV1_PaySSL
Un fichier XSL : BNP_DEMO_AXEPTA_CardsV1_PaySSL
Un dossier : images_CardsV1_BNP_DEMO_AXEPTA
Composition du dossier Images
css : Contient le fichier CSS du projet
data : celui-ci contient les fichiers :
Fichier coBadgedCards.json : contient des informations pour le bon fonctionnement du formulaire de paiement par carte.
Fichier : translations.json : Contient l'ensemble des traductions
fonts : Contient les fichiers de police d'écriture
images : Contient les images
js : Contient les fichiers JS
Mettre à jour le MerchandID (MID)
Afin de modifier le MerchandID et le TemplateName, il est nécessaire de renommer les fichiers / dossiers tel que suit :
XML : {MerchantID}_{TemplateName}_{TemplateType}
XLS : {MerchantID}_{TemplateName}_{TemplateType}
Image : images_{TemplateName}_{MerchantID}
Une fois les noms de fichiers modifiés, il est nécessaire de modifier les liens faisant appel à ces fichiers.
Ils sont présents dans les fichiers :
XML
XLS
Image/js/main.js
La méthode la plus simple afin de mettre à jour les chemins présents dans ces fichiers est de faire un chercher/remplacer dans un éditeur de texte.
Créer une archive du template
Afin de pouvoir procéder à l'upload du template via le Template Manager, il est nécessaire de créer une archive contenant les trois éléments (XML, XLS et dossier image) à la racine.
Attention, il faut archiver les trois éléments en les sélectionnant au moment de créer l'archive et non archiver le dossier parent.
Cette archive doit être nommée comme suit : TemplateYYYYMMDD001MerchandID :
Template : Permet d'indiquer qu'il s'agit d'un template
YYYYMMDD : La date du jour de l'upload
001 : Le numéro de version. Celui-ci doit être incrémenté à chaque nouvel upload pour jour donné
MerchandID : L'identifiant du commerçant.
Exemple : Template20220624003BNP_DEMO_AXEPTA.zip
Tester le template
Une fois l'archive créée, le marchand peut tester l'affichage du Template :
- Upload de l'archive Template dans le Template Manager du Back-Office Axepta - cf. XXXXX
- Appel du Template dans les requêtes de paiement via paymentpage.aspx ou payssl.aspx
- Utilisation du paramètre Template : Template={MerchantID}_{TemplateName}
Exemple avec BNP_DEMO_AXEPTA
https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=BNP_DEMO_AXEPTA&Len=291&DATA=43ad07f58ff6a5f9ebbdd42e361d2c85ce4ad41fcd63c697c9ca59076fb5cb782237a2e862a97bb24d949911bb701d698dfed6901f1bcb92404f53b8f5336525167ac5b8a9b89c5fb88d79967366e99e59d95f3f3f0c37126a52495115e28f938e76748a5dc703f7ccbda6ccb4fc253b255c06e0df990fdd94f4313ec2b94142f9978adb9d1079a36a9dbb83e9638e3e58a124d532ece1b7bc175fa340bd0c73c33d4f78374420091e90735bb014a5163d86bfe38795decacf0358075a85c0fbf80c5535046e7f8df64d204c7a4755e07700d4d17c9ef0bdc6e8bbd9c377e3ee0493a0ad2d3a9a624d693d04fe0bdfb3ebb2ef5badb63291ab8d7ad29b4f19b2b0f87dbc0bdb38f282816fe694ac2d512ba741d76a830b2083232246763aa006472661aeb2acf126&Template={MerchantID}_{TemplateName}
Synthèse : Étapes de personnalisation
La personnalisation s'effectue en plusieurs étapes :
- Création des fichiers complémentaires de personnalisation :
- Design & Fonctionnalités : CSS & javascript
- Images, Polices...
- Ajout des fichiers au répertoire 'images'
- Ajout des références (chemins) dans le fichier XML présent dans le dossier du Template
- Mise à jour du MID et du nom du template qui sera utilisé lors de l'appel à la page de paiement
- Création de l'archive du Template
La création d'un Template personnalisée peut être effectuée par un intégrateur web, une agence web ou un service informatique.