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 |
---|
|
|
| Création de la div widgetAjout 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">
|
| </head>
<body>
<div id="PaylineWidget" <script src="tuto.js" charset="utf-8"></script>
</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 :
Bloc de code |
---|
language | xml |
---|
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.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 :
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);
} |
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.
Bloc de code |
---|
language | js |
---|
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 -->
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 # :
Bloc de code |
---|
language | xml |
---|
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.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° 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 :
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 = 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 :
Bloc de code |
---|
language | xml |
---|
title | 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);
} |