Vous regardez une version antérieure (v. /display/DT/Mode+Redirection+-+Page+Web+de+Paiement+Version+2+-+Personnalisation) de cette page.
afficher les différences
afficher l'historique de la page
« Afficher la version précédente
Vous regardez la version actuelle de cette page. (v. 2)
Actuel »
Personnalisation via le Centre administration
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.
Pour l'intégration dans vos service
Vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement.
Une fois que vous avez paramétré et activé un template sur le centre d'administration, vous pouvez l'utiliser sur les pages web de paiement.
Le commerçant renseigne le code du template lors de l'appel au web service doWebPayment , dans la balise customPaymentPageCode :
En cas d’erreur dans le code de pages personnalisées, renseigné dans les pages web de paiement, une erreur est levée.
Les codes de retour retournés :
- 02309 : le libellé indique que le code est inactif « Operation Refused » « CustomPaymentPageCode is inactive »
- 02307 : le libellé indique que le code est invalide « Invalid transaction » « Invalid custom page code »
Personnalisation du widget
Nous allons personnaliser notre contexte PAYMENT_METHOD_LIST à l'aide de la fonction customPaymentMethodList : voir PW - Personnalisation du widget : Fonction CallBack.
Exemple de code...
// On récupère le token sans le #
var urlToken = location.hash.substr(1);
if (urlToken) {
var element = document.getElementById('PaylineWidget');
element.setAttribute('data-token', urlToken);
}
// Fonction permettant de customiser le PAYMENT_METHOD_LIST
function customPaymentMethodList(state) {
<!-- S'il c'est un contexte PAYMENT_METHODS_LIST (liste des moyens de paiement) ou PAYMENT_NEEDS_MORE_INFOS (confirmation d'une donnée de paiement) alors je procède aux modifications suivantes -->
if (state.state === "PAYMENT_METHODS_LIST" || state.state === "PAYMENT_NEEDS_MORE_INFOS") {
<!-- On remplace le label de la case à cocher -->
$('.pl-remember-text').text('Enregistrer mes informations pour mes prochains paiements');
<!-- S'il y a des wallets je procède à certaines modifications -->
if ($('#pl-wLayout-view') !== undefined) {
<!-- Je retire les titres -->
$('.pl-wallets-title').remove();
$('.pl-container-title').remove();
<!-- Je remplace le titre des wallets -->
$('.pl-wallets').before('<span style="font-size:12pt !important">Je valide mon paiement en sélectionnant ma carte ou mon compte Paypal</span>');
<!-- Je retire le message du CVV du wallet -->
$('.pl-cvv-message').remove();
}
}
}
Payline permet l'ajout de balises dans la page permettant de la personnaliser la page. Ces balises seront valorisées lors du chargement de la page.
Par exemple vous pourriez ajouter le nom et le prénom de l'utilisateur, ainsi que le montant de la transaction, pour cela vous devez ajouter des span et des mots clés entourés de # :
Exemple de code en environnement de Test..
<html>
<head>
<title>Mon template</title>
<link rel="stylesheet" type="text/css" href="tuto.css" />
<script src="https://homologation-payment.cdn.payline.com/cdn/scripts/widget-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://homologation-payment.cdn.payline.com/cdn/styles/widget-min.css" charset="utf-8">
<script src="tuto.js" charset="utf-8"></script>
</head>
<body>
<div id="PaylineWidget" data-template="column" data-event-didshowstate="customPaymentMethodList">
</div>
<div id="orderData">
<ul>
<li>
<span class="label">N° de commande</span>
<span class="value">#PaylineOrderRef#</span>
</li>
<li>
<span class="label">Montant: </span>
<span class="value">#PaylineFormattedAmount#</span>
</li>
<li>
<span class="label">Acheteur</span>
<span class="value">#PaylineBuyerFirstName# #PaylineBuyerLastName#</span>
</li>
</ul>
</div>
</body>
</html>
Et une fonction javascript pour réaliser le remplacement dans la page il est nécessaire d'appeler dans la callBack customPaymentMethodList. L'argument doit être l'id du bloc où faire les remplacements, ici c'est orderData :
Exemple 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 replace(blockId) {
// Récupération du tableau de toutes les chaines à remplacer de la div "main"
var block = $('#' + blockId);
var stringArrayToReplace = parse(block.text());
// Pour chaque élément du tableau on remplace avec les données fournies par le Widget
var result = block.html();
for (i = 0; i < stringArrayToReplace.length; i++) {
var hashedKey = stringArrayToReplace[i];
var key = hashedKey.substring(1, hashedKey.length-1);
result = result.replace(hashedKey,Payline.Api.getContextInfo(key));
}
block.html(result);
block.show();
}
Rajouter des informations dans votre page de paiement
La liste des champs que vous pouvez rajouter :
#PaylineOrderRef# | Référence de votre commande |
#PaylineFormattedAmount# | Montant de votre commande |
#PaylineOrderDate# | Date de votre commande |
#PaylineBuyerShippingAddress.name# | Nom |
#PaylineBuyerShippingAddress.street1# | Rue |
#PaylineBuyerShippingAddress.street2# | Complément |
#PaylineBuyerShippingAddress.cityName# | Ville |
#PaylineBuyerShippingAddress.zipCode# | Code postal |
#PaylineBuyerShippingAddress.country# | Pays |
#PaylineBuyerShippingAddress.phone# | Téléphone fixe |
#PaylineBuyerMobilePhone# | Téléphone mobile |
#PaylineBuyerIp# | IP |
Les pages associées
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page:
-
Page: