Image Removed

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ée 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.

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

Présentation

Ce document a pour but de présenter l'implémentation, dans les PWPv2, du Template Hébergé

.

Comment utiliser cette intégration

Le commerçant utilise les mêmes services des pages à redirection en indiquant le nouveau template Id, Payline se charge de

DoWebPayment

ManageWebWallet

Centre d'administration

Base de données

Ajout de 3 colonnes dans STORED_TEMPLATE :

IS_PWP2 char(1) : Y/N indique s'il s'agit d'un template page de paiement v2 exclusivement

TEMPLATE_ID number, est automatiquement rempli par un trigger et assure l'unicité de la valeur

CHANGE_COUNT number, est automatiquement rempli par un trigger à la création, la modification du template, ou l'ajout, la modification des lignes associées dans la table STORED_TEMPLATE_ELEMENT.

Modification dans STORED_TEMPLATE_ELT_TYPE :

Agrandissement de la colonne TYPE de 10 à 15 caractères, car le javascript a pour content-type application/javascript et le mot application fait 11 caractères > 10.

L'écran et ses fonctionnalités :

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 :

Image Removed

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

HomologationProductionJavascript Widgethttps://homologation-payment.payline.com/scripts/widget-min.js https://payment.payline.com/scripts/widget-min.jsCSS Widgethttps://homologation-payment.payline.com/styles/widget-min.css https://payment.payline.com/styles/widget-min.css

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

Bloc de code

language	xml
title	Head du fichier
linenumbers	true

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

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

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

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

2. Le DIV

La page de paiement s'affiche en mode tabulation :

Image Added

Si le nombre de moyen de paiement est important alors le widget bascule en colonne.

A cela il est nécessaire d'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

L'exemple ci-dessous représente la création d'Par exemple on va créer 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 de le consommateur aura le choix des moyens de paiement et renseignera des 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>

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 page

Initialiser 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

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

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
}

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 haut

Personnalisation

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

Exemple d'un template

js

Volet

Développer

title	Exemple de code en environnement de Test..

Bloc de code

theme
language	xml

title
Confluence

Récupération du token dans l'url

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

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

}

} }

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 :

js

Bloc de code

language	xml
title	Ajout du fichier Javascript dans la head

Bloc de code

language

<html>

<head>

<title>Mon template</title>

		}
			}			
		</

div>

script>

<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 un bout de javascript pour effectuer le remplacement dans la page :

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 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 pages associées

Contenu par étiquette

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

Les données 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

Arborescence des pages

Comparaison des versions

Ancienne version 1

Nouvelle version Actuel

Légende

Présentation

Présentation

Comment utiliser cette intégration

Centre d'administration

Base de données

L'écran et ses fonctionnalités :

3. Création de template

3.1 Composition

3.2 Développement du template par le commerçant

3.2.1 HTML

3.2.1.1 Créer le fichier HTML

Premiers pas

Création de la page web (template file)

1. Création du header

2. Le DIV

Le callBack

3.

Initialiser le paiement

4.

Personnalisation

Exemple d'un template

Les pages associées

Arborescence des pages

Historique de la page

Comparaison des versions

Ancienne version 1

Nouvelle version Actuel

Légende

Présentation

Présentation

Comment utiliser cette intégration

Centre d'administration

Base de données

L'écran et ses fonctionnalités :

3. Création de template

3.1 Composition

3.2 Développement du template par le commerçant

3.2.1 HTML

3.2.1.1 Créer le fichier HTML

Premiers pas

Création de la page web (template file)

1. Création du header

2. Le DIV

Le callBack

3.

Initialiser le paiement

4.

Personnalisation

Exemple d'un template

Les pages associées