Documentation Monext Online

Arborescence des pages

Contenu


Personnalisation du widget

Ensuite nous allons personnaliser notre contexte PAYMENT_METHOD_LIST à l'aide de la fonction customPaymentMethodList que l'on a déclaré plus haut.

Récupération du token dans l'url
// 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 #  :


Ajout du fichier Javascript dans la head
<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&deg; 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 :

Remplacement de mots clés
// 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();
}


Personnalisation via JQuery ou CSS

Pour obtenir plus d'information de personnalisation JQuery ou CSS, veuillez trouver les informations ici.


Personnalisation via le Centre administration

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 :

pageweb02.png

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 »


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