Mode Redirection - Page Web de Paiement Version 2

S’abonner


Présentation

Cette page présente la mise en œuvre de la Page Web de Paiement Version 2 (Mode redirection).

Cette page web à redirection permet d'obtenir une page de paiement hébergé chez Payline avec le mode d'intégration widget. Le commerçant bénéficie d'un meilleur visuel et de toutes les dernières fonctionnalités mises à jour.

Comment utiliser cette intégration

Le commerçant utilise les mêmes services des pages à redirection en indiquant le nouveau Template Id défini dans le centre administration.

Payline se charge d'appeler la page de paiement et d'y intégrer le widget.

Les services disponibles sont :

  • DoWebPayment
  • ManageWebWallet

Centre d'administration

Vous pouvez créer un nouveau dans le menu Personnalisation des pages avec sélectionnant l'option PageWebPaiement V2 :


Les templates hébergés peuvent être composés de fichiers de type :

  • Template file (page web contenant les informations de la DIV pour appeler le widget) ;
  • HTML (un, et un seul) ;
  • CSS ;
  • JS ;
  • des images au format jpg, gif, png et bmp.



Création de la page web (template file)

Le fichier HTML doit contenir, à minima, dans la head les liens vers les ressources statiques du widget correspondant à l'environnement souhaité (homologation, production) :=



Et éventuellement un lien vers votre propre css, de manière relative.


Head du fichier
<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 est nécessaire d'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).


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ù le consommateur aura le choix des moyens de paiement et renseignera ses données de paiement) :


Création de la div widget
<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>
	<body>
		<div id="PaylineWidget" data-template="column" data-event-didshowstate="customPaymentMethodList">
		</div>		
	</body>
</html>


Le code  data-event-didshowstate="customPaymentMethodList", permet d'appeler la fonction JS customPaymentMethodList,  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 : Fonctionnalités du Widget

Personnaliser sa page

Vous devez ajouter le Javascript au fichier HTML, soit créer un fichier Javascript que vous ajouterez dans notre head via un lien relatif :


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.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">
		<script src="tuto.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="PaylineWidget" data-template="column" data-event-didshowstate="customPaymentMethodList">
		</div>		
	</body>
</html>


Pour que le widget s'initialise, il faut lui fournir un token obtenu via un doWebPayment (effectuer une demande de paiement) ou un manageWebWallet (effectuer une gestion de portefeuille). Lors du doWebPayment , l'url générée par 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 :


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);
}


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 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 copier tous vos fichiers dans le même dossier.


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 -->
		Payline.jQuery('.pl-remember-text').text('Enregistrer mes informations pour mes prochains paiements');


		<!-- S'il y a des wallets je procède à certaines modifications -->
		if (Payline.jQuery('#pl-wLayout-view') !== undefined) {
			<!-- Je retire les titres -->
			Payline.jQuery('.pl-wallets-title').remove();
			Payline.jQuery('.pl-container-title').remove();


			<!-- Je remplace le titre des wallets -->
			Payline.jQuery('.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 -->
			Payline.jQuery('.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.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">
		<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 remplacement, 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 = Payline.jQuery('#' + 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();
}


Les balises de personnalisation

Les balises disponibles sont les suivantes :

Clé Valeur
#PaylineOrderRef#
Référence de votre commande
#PaylineOrderDate# Date de votre commande
#PaylineFormattedAmount# Montant de votre commande
#PaylineOrderDeliveryMode# Mode de livraison
#PaylineOrderDeliveryTime# Date de livraison
#PaylineBuyerEmail# Email de l'acheteur
#PaylineBuyerLastName# Nom de famille de l'acheteur
#PaylineBuyerFirstName# Prénom de l'acheteur
#PaylineBuyerMobilePhone# Numéro mobile de l'acheteur
#PaylineBuyerIp# IP de l'acheteur
#PaylineBuyerShippingAddress.name# Nom de l'adresse
#PaylineBuyerShippingAddress.street1# Adresse
#PaylineBuyerShippingAddress.street2# Complément
#PaylineBuyerShippingAddress.cityName# Nom de la ville
#PaylineBuyerShippingAddress.zipCode# Code postal
#PaylineBuyerShippingAddress.country# Pays
#PaylineBuyerShippingAddress.phone# Téléphone

Insertion d'un bouton d'annulation

Pour créer un lien d'annulation du paiement, appeler cette méthode au click sur un lien ou bouton :

Code HTML
function executeCancelAction() {

// Récupération de l'url d'annulation donnée dans le DoWebPayment
var cancelUrl = Payline.Models.Contexts.ContextManager.getCurrentContext().getCancelUrl();

//Execution du endToken qui informe Payline de l'abandon de l'utilisateur
Payline.Api.endToken(null, function() {
//Redirection vers l'url d'annulation
window.location.href = cancelUrl;
}, null, false);
}

Personnalisation via Jquery ou CSS

En Jquery
Cliquez ici pour d�velopper...

Lors de la personnalisation via Jquery ou en css, il faut utiliser exclusivement des classes car les ids sont générés à l'affichage et peuvent donc varier.

Exemple :

pl-pm-cards_5-view peut très bien devenir pl-pm-cards_4-view après un raffraichissement de la page.

Dans ce cas, il faut préconiser des sélecteurs multiples via les classes.

Exemple :

.pl-paymentMethods.pl-cb.pl-paymentMethod-view

Ce sélecteur permettra de sélectionner le même élément mais sans risque de changement d'id.

En CSS
Cliquez ici pour d�velopper...

Personnaliser le style du formulaire de paiement est possible en surchargeant la feuille de style fournit par défaut par Payline. Les possibilités de personnalisation sont infinies, voici quelques exemples simples:

Description
Paramètre
la couleur du bandeau Enseigne
#PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; }
la couleur du texte de l'Enseigne
#PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; }
la couleur du texte du montant à payer
#PaylineWidget .pl-header-title-content p { color: #ABCDEF; }
La couleur du bouton de paiement
#PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; }
La couleur de fond du formulaire
#PaylineWidget .pl-body { background-color: #ABCDEF; }
La couleur de la zone moyen de paiement
#PaylineWidget .pl-pmContainer {
  background-color: #ABCDEF;
  border-color: #ABCDEF; }
la couleur du bouton fermer la lightbox
#PaylineWidget .pl-icon-close { color: #ABCDEF; }

La taille de la fenêtre est optimisée dans la configuration suivante :

  • width minimum de la div PaylineWidget : 500px
  • width maximum conseillée de la div PaylineWidget : 900px

Au dessous et au dessus des dimensions indiquées, il est préconisé d'ajuster les marges et champs.

Pour cacher les labels, il faut supprimer les labels et supprimer la marge à gauche des champs.

.PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input 
{ display: none;} .PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container
 { margin-left: 0; }
Payline propose de réduire les marges afin d'ajuster la fenêtre au dessus de 900px de large, pour cela il suffit de diminuer la largeur du label (xx%), et de diminuer la marge à gauche des champs (yy% par défaut 30%).
.PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input
{ width: xx%; } .PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container,
.PaylineWidget.pl-container-default .pl-form-container label.pl-remember-container
{ margin-lef: yy%; }

Pour obtenir plus d'information sur la liste des balises, veuillez trouver les informations ici.

Différence entre la page web V1 et V2

Il existe quelques différence entre les pages V1 et V2 : veuillez consulter le lien pour plus d'information. 

Exemple d'un template


Code html
<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>
    <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>


		<script>
			// 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 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 = Payline.jQuery('#' + 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();
			}
			
			// Fonction permettant de customiser le PAYMENT_METHOD_LIST
			function customPaymentMethodList(state) {
				replace('orderData');
				<!-- 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 -->
					Payline.jQuery('.pl-remember-text').text('Enregistrer mes informations pour mes prochains paiements');
			 
			 
					<!-- S'il y a des wallets je procède à certaines modifications -->
					if (Payline.jQuery('#pl-wLayout-view') !== undefined) {
						<!-- Je retire les titres -->
						Payline.jQuery('.pl-wallets-title').remove();
						Payline.jQuery('.pl-container-title').remove();
			 
			 
						<!-- Je remplace le titre des wallets -->
						Payline.jQuery('.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 -->
						Payline.jQuery('.pl-cvv-message').remove();
					}
				}
			}			
		</script>
    </body>
</html>
Vous avez d’autres questions ? Envoyer une demande

Commentaires

Réalisé par Zendesk