Contenu

Sommaire

maxLevel	2
style	none

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 Réference 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 :

Extrait

hidden	true

vous devez

creer une page template et la charger sur le CA
1. soit prenez un exmple index
2. soit constuire comme ci dessous
personnalier
1. soit css
2. soit js

Création de la page web (template file)

1. Création du header

Inclusion d'extrait

	DT:PW - lib : JS et CSS
	DT:PW - lib : JS et CSS
nopanel	true

2. Le DIV

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. Fonction CallBack avec le widget).

Le 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) :

Volet

Développer

title	Exemple de code en environnement de Test..

Bloc de code

language	xml
theme	Confluence
title	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.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">
	</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

3. Initialiser le paiement

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

Volet

Développer

title	Exemple de code en environnement de Test..

Bloc de code

language	xml
theme	Confluence
title	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>		
	</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 :

Volet

Développer

title	Exemple de code...

Bloc de code

language	js
theme	Confluence
title	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);urlTok
}

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.

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.

Volet Développer

title	Exemple de code...

Bloc de code

language	js
theme	Confluence
title	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 # :

Volet Développer

title	Exemple de code en environnement de Test..

Bloc de code

language	xml
theme	Confluence
title	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 :

Extrait

hidden	true

verifier le code : DCT - 10587 - Template hébergé PWPV2

Volet Développer

title	Exemple de code...

Bloc de code

language	js
theme	Confluence
title	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.

4. Personnalisation

consulter la page : Mode Redirection - Page Web de Paiement Version 2 - Personnalisation

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 :

Image Removed

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

Exemple d'un template

Volet

Développer

title	Exemple de code en environnement de Test..

Bloc de code

language	xml
theme	Confluence
title	Code html

<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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://homologation-payment.cdn.payline.com/cdn/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 = $('#' + 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 -->
					$('.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();
					}
				}
			}			
		</script>
    </body>
</html>

Les pages associées

Contenu par étiquette

showLabels	false
max	9
showSpace	false
sort	title
cql	label = "fr" and label = "widget"

Arborescence des pages

Comparaison des versions

Ancienne version 41

Nouvelle version 42

Légende

Présentation

Comment utiliser cette intégration

Création de la page web (template file)

1. Création du header

2. Le DIV

Le callBack

3. Initialiser le paiement

Personnalisation du widget

Personnalisation via JQuery ou CSS

4. Personnalisation

Personnalisation via le Centre administration

Rajouter des informations dans votre page de paiement

Exemple d'un template

Les pages associées

Arborescence des pages

Historique de la page

Comparaison des versions

Ancienne version 41

Nouvelle version 42

Légende

Présentation

Comment utiliser cette intégration

Création de la page web (template file)

1. Création du header

2. Le DIV

Le callBack

3. Initialiser le paiement

Personnalisation du widget

Personnalisation via JQuery ou CSS

4. Personnalisation

Personnalisation via le Centre administration

Rajouter des informations dans votre page de paiement

Exemple d'un template

Les pages associées