Contenu
Sommaire | ||||
---|---|---|---|---|
|
Présentation
Présentation
Cette page présente Ce document a pour but de présenter la mise en œuvre de la Page Web de Paiement Version 2 , du Template Hébergé(Mode redirection).
Cette page web à redirection permet d'obtenir une page de paiement hébergé hébergée chez Payline avec le mode d'intégration widget, tout en bénéficiant des fonctionnalités.
. Le commerçant bénéficie d'un meilleur visuel et de toutes les dernières fonctionnalités mises à jour.
Plusieurs étapes sont nécessaires :
- Vous devez d'abord créer un template dans le Centre administration : Centre Administration - Personnaliser vos pages de paiement
- Insérer le nom du template dans vos appels web service.
Comment utiliser cette intégration
Le commerçant utilise les mêmes services des pages à redirection en indiquant le nouveau template Id, Réference Id défini dans le centre administration :
Payline se charge de
DoWebPayment
ManageWebWallet
Centre d'administration
L'écran
TEMPLATE_ID est représenté par le Identifiant (LOGIN).
Les templates hébergés peuvent être composés de fichiers de type :
- HTML (un, et un seul)
- CSS
- JS
- des images au format jpg, gif, png et bmp
Le champ css et les fichiers d'internationalisation ont disparus. La partie image s'est vue modifiée et accepter les fichiers JS et CSS :
3. Création de template
3.1 Composition
Les templates hébergés peuvent être composés de fichiers de type :
- HTML (un, et un seul)
- CSS
- JS
- des images au format jpg, gif, png et bmp
3.2 Développement du template par le commerçant
3.2.1 HTML
3.2.1.1 Créer le fichier HTML
Le fichier HTML doit contenir, à minima, dans la head les liens vers les ressources statiques du widget correspondant à l'environnement souhaité (homologation, production) :
d'appeler la page de paiement et d'y intégrer le widget.
Les services disponibles sont :
Extrait | ||
---|---|---|
| ||
vous devez
|
Premiers pas
Il faut créer une page template et la charger sur le centre administration, vous avez deux options :
Option A : Télécharger l'exemple index.html lors de la création d'une nouvelle page de paiement avancée. (Mettre le lien de créer une nouvelle page de paiement)
Option B : Construire votre propre page web de paiement comme ci dessous.
Création de la page web (template file)
1. Création du header
Inclusion d'extrait | ||||||
---|---|---|---|---|---|---|
|
2. Le DIV
La page de paiement s'affiche en mode tabulation :
Si le nombre de moyen de paiement est important alors le widget bascule en colonne.
A cela il est nécessaire d'
Et éventuellement un lien vers votre propre css, de manière relative.
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<html>
<head>
<title>Mon template</title>
<link rel="stylesheet" type="text/css" href="tuto.css" />
<script src="https://homologation-payment.payline.com/scripts/widget-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://homologation-payment.payline.com/styles/widget-min.css" charset="utf-8">
</head>
</html> |
Il n'est pas nécessaire d'ajouter jQuery dans la page car le widget le fourni déjà, il suffit d'utiliser Payline.jQuery pour y accéder, et faire, par exemple Payline.jQuery('body');
A cela il faut ajouter, dans le body, une div nommée PaylineWidget avec des paramètres tels que le template choisi (parmi column, tab et lightbox, cf. la documentation du widget Mode in-Shop), des callback (cf. PW - Personnalisation du widget : Fonction CallBack avec le widget).
Le callBack
Par exemple on va créer L'exemple ci-dessous représente la création d'une div avec le template column et ajouter une callBack pour customiser le widget lorsqu'il s'agit d'un contexte de type PAYMENT_METHOD_LIST (la liste des moyens de paiement, où l'utilisateur choisira de payer avec tel ou tel moyen le consommateur aura le choix des moyens de paiement et renseignera des ses données de paiement) :
Volet | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Si on regarde Le code data-event-didshowstate="customPaymentMethodList", cela permet d'appeler la fonction JS customPaymentMethodList lorsqu, lorsqu'un contexte de type PAYMENT_METHOD_LIST s'est affiché afin de personnaliser l'affichage avec, par exemple, jQuery.
Vous pouvez trouver la liste des états possibles retournés dans la callback ici : Fonctionnalités du Widget
3.
2.1.2 Personnaliser sa pageInitialiser le paiement
Vous devez ajouter le Pour celà, on va soit ajouter notre Javascript au fichier HTML, soit créer un fichier Javascript que l'on ajoutera vous ajouterez dans notre head via un lien relatif :
Volet | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Pour que le widget s'initialise, il faut lui fournir un token obtenu via un DoWebPayment doWebPayment (effectuer une demande de paiement) ou un ManageWebWallet manageWebWallet (effectuer une gestion de portefeuille).
Lors du DoWebPayment doWebPayment , l'url générée par nos les WebServices de l'API Payline générera une URL de la forme suivante : https://webpayment.payline.com/v2/[clé chiffrée du template]/#[TOKEN]
Il faut donc ajouter à votre javascript la fonction capable de récupérer le token dans l'url, et de la fournir au widget :
Volet | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Grâce à cela, au chargement de la page, le Widget s'initialisera Cela permet au Widget de s'initialiser avec le token de l'url lors du chargement de la page.
Lorsque vous développez votre template, vous pouvez très bien ajouter #[TOKEN] en récupérant un Token sur notre API WebServices d'homologation, les liens vers les css, js et images étant relatifs, cela vous permet d'utiliser votre template en plaçant copier tous vos fichiers dans le même dossier.
4.
Ensuite nous allons personnaliser notre contexte PAYMENT_METHOD_LIST à l'aide de la fonction customPaymentMethodList que l'on a déclaré plus hautPersonnalisation
Consulter la page : Mode Redirection - Page Web de Paiement Version 2 - Personnalisation
Exemple d'un template
Volet | |||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| js
| Récupération du token dans l'url |
|
On peut aussi ajouter des données dans la page, qui seront remplacées à la volée lors de l'affichage. Par exemple on veut ajouter le nom et le prénom de l'utilisateur, ainsi que le montant de la transaction, pour cela on va ajouter des span et des mots clés entourés de # de cette façon :
Bloc de code | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<html>
|
Les pages associées
Contenu par étiquette | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Et un bout de javascript pour effectuer le remplacement dans la page :
Bloc de code | ||||
---|---|---|---|---|
| ||||
// Fonction parsant toutes les chaînes contenues entre des caractères #
function parse(str) {
return str.match(/#([^#]*)#/g);
}
// Fonction remplaçant toutes les chaines
function doReplace() {
// Récupération du tableau de toutes les chaines à remplacer de la div "main"
var stringArrayToReplace = parse(Payline.jQuery('#main').text());
// Pour chaque élément du tableau on remplace avec les données fournies par le Widget
var result = document.body.innerHTML;
for (i = 0; i < stringArrayToReplace.length; i++) {
let hashedKey = stringArrayToReplace[i];
var key = hashedKey.substring(1, hashedKey.length-1);
result = result.replace(hashedKey,Payline.Api.getContextInfo(key));
}
document.body.innerHTML = result;
} |
Les données disponibles sont les suivantes :