Contenu

Sommaire

maxLevel	2
style	none

Plus d'information

Arborescence des pages

root	PW - Intégration Widget

Payline.Api.endToken(null, function() {
window.location.href = Payline.Api.getCancelAndReturnUrls().cancelUrl;
}, null, true);

Lorsque un formulaire est sollicité avec plusieurs moyens de paiement dont certains conditionnés par le retour d'une API partenaire alors :

Si le partenaire réponds avant l'affichage du formulaire alors les moyens de paiement sont affichés en fonction de la réponse des partenaires ;
Si le partenaire réponds après l'affichage du formulaire alors les encarts des moyens de paiement conditionnés sont affichés uniquement avec un Spinner en attendant la réponse du partenaire.

L'ordre de l'affichage des moyens de paiement est réalisé avec l'ordre précisé dans la balise contractList du doWebPayment.

API JavaScript

Afin d’interagir avec le formulaire de paiement, Payline propose une API en JavaScript pour que vous gardiez la main sur le formulaire. Consulter l'API JavaScript.

// en valorisant handledByMerchant à true,
// la session de paiement sera associée au code retour 02014
// renvoyé par getWebPaymentDetails.
// Dans le cas contraire c'est le code 02319 qui est renvoyé.

Extrait

Intégration

L'intégration du widget en mode InShop (colonne/tab) ou mode Lightbox, extrêmement facile, s'effectue en uniquement 3 étapes :

Initialisation du paiement : depuis votre SI vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
Depuis la page web, ajouter un script et d'une balise <DIV> dans le corps de votre page web : Payline va se servir de cette balise pour afficher le formulaire de paiement.
Résultat du paiement : depuis votre SI vous devez utiliser la fonction getWebPaymentDetails de l'API Web Payment pour obtenir le résultat du paiement.

La page HTML minimale pour générer un formulaire de paiement est la suivante :

Bloc de code

language	xml
theme	Confluence
title	Code HTMLen environnement de test

<html>
 <head>
   <script src="https://homologation-payment.cdn.payline.com/cdn/scripts/widget-min.js"></script>
   <link href="https://homologation-payment.cdn.payline.com/cdn/styles/widget-min.css" rel="stylesheet" />
 </head>
 <body>
 <div id="PaylineWidget" 
    data-token="the token obtained in doWebPayment Response" 
    data-template="column"
    data-embeddedredirectionallowed="false" 
 />
 </body>
</html>

Développer

title	Les liens de librairies..

Inclusion d'extrait

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

Le data-token est le jeton de session permettant l'authentification et il est obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment). Afin d'éviter qu'une nouvelle initialisation soit réalisée lors de chaque actualisation de la page, vous devez soit utiliser une session sur votre serveur pour le stocker, ou alors vérifier si l’URL courante contient déjà un jeton de paiement dans un paramètre GET nommé paylinetoken. Voici un exemple pour réutiliser le jeton présent dans l'URL :

Bloc de code

language	php
theme	Confluence
title	Code PHP

<?php $paylineToken = ( is_empty($_GET['paylinetoken']) ) ? createNewWebPayment() : $_GET['paylinetoken']; ?>

Des attributs additionnels que vous pouvez utiliser dans la balise <div> permettent de personnaliser l'affichage du formulaire. Par exemple; si vous ne souhaitez pas que le formulaire de paiement s'affiche automatiquement lors de l'affichage de votre page :

Paramètre

Description

valeur

data-template

Le nom du template à utiliser pour l'initialisation du formulaire.

tab
column
lightbox
shortcut

data-auto-init

Définit si le formulaire doit s’initialiser dès que la page web a fini de se charger (auto-init à « true »), ou s’il doit attendre un demande d’initialisation (auto-init à « false »)

true
false

data-embeddedredirectionallowed

Permet de présenter la page d’authentification 3DSecure :

TRUE : en mode iframe, l'authentification est intégrée dans la page de paiement. Valeur par défaut.
FALSE : en mode redirection, l'authentification est proposée dans la page courante et remplace le widget de paiement de Monext Online.

Extrait

hidden	true

Permet de présenter la page d’authentification 3DSecure en mode iframe (intégré dans la page de paiement) valeur true ou en mode redirection (redirection plein écran dans une nouvelle page) valeur false.

Vérifier avec le support que la banque est bien dans la liste blanche pour l'autorisation en lightbox.

true
false

data-partnerreturnurl

Le paramètre permet de spécifier une url de retour pour une liste définie de partenaires, pour l'instant : AmazonPay

Lorsque l'acheteur clique sur le bouton AmazonPay il est redirigé chez le partenaire pour s'authentifier. Une fois authentifié, il est redirigé sur URL indiqué.

Exemples d'intégration des modes Widget

Suivant les paramètres, voici les exemples d'intégration :.

mode InShop Tab	mode InShop Column	mode LightBox	mode shortcut
Image Modified	Image Modified	Image Modified	Image Modified

Info
Payline force l’affichage en mode « column » des pages de paiement lorsque vous utilisez le mode « tab » et que la taille de l’appareil utilisé par le consommateur est trop petite pour s’afficher correctement. Cette amélioration simplifie votre intégration technique lorsque vous avez une boutique « responsive desktop / mobile ».

Feuille de style

Pour obtenir la mise en forme du formulaire de paiement, vous devez intégrer la feuille de style CSS Payline en ajoutant la ligne suivante dans la balise <head> :

Bloc de code

language	xml
theme	Eclipse
title	Code XML

<link href="https://homologation-payment.payline.com/styles/widget-min.css" rel="stylesheet" />

Info
Les URLs du script et de la CSS sont différents entre les environnements de test et de production. Nous vous conseillons de les configurer dans des variables d'environnements.

API JavaScript

Afin d’interagir avec le formulaire de paiement, Payline propose une API en JavaScript pour que vous gardiez la main sur le formulaire. Les fonctions disponibles de votre SI sont :

Fonction

Description

Exemple

endToken()

Met fin à la vie du jeton de session web (token obtenu via DoWebPayment).

Les paramètres :
( additionnalData : any,
callback : Function,
spinner : any,
handledByMerchant : boolean )

Développer

title	Exemple..

finalizeShortCut()

Déclenche la finalisation du paiement ShortCut (à appeler en context.state PAYMENT_TRANSITIONAL_SHORTCUT)

getBuyerShortCut()

Renvoi un objet complexe contenant les données de l'acheteur provenant du partenaire shortcut.

Cette fonction est disponible dans un contexte de state = PAYMENT_TRANSITIONAL_SHORTCUT.

Développer

title	Exemple..

{  "firstName": "DUPONT",
   "lastName": "Jean",
   "email": "jean.dupont@yopmail.com",
   "cityName": "Aix",
   "country": "FR",
   "street1": "5 rue de Marseille",
   "street2": "Batiment 2",
   "zipCode": "13390"
}

getCancelAndReturnUrls()Renvoie un objet complexe contenant la returnUrl et la cancelUrl provenant du DoWebPaymentOn peut par exemple créer un bouton annuler
qui déclenche les actions suivantes :
Développer

title	Exemple..

function cancel() {
Payline.Api.endToken();
// met fin à la vie du token
window.location.href =
Payline.Api.getCancelAndReturnUrls().cancelUrl;
// redirige l'utilisateur sur la cancelUrlgetContextInfo(key)Renvoi une information du contexte grâce à sa clé parmi les valeurs suivantes :

Développer

title	Exemple..

{  "PaylineAmountSmallestUnit": 100,
   "PaylineCurrencyDigits": 2,
   "PaylineCurrencyCode": "EUR",
   "PaylineBuyerFirstName": "Jean",
   "PaylineBuyerLastName": "DUPONT",

   "PaylineBuyerShippingAddress.street2": "Batiment 2",
   "PaylineBuyerShippingAddress.country": "FR",
   "PaylineBuyerShippingAddress.name": "Perso",
   "PaylineBuyerShippingAddress.street1": "5 rue de Marseille",
   "PaylineBuyerShippingAddress.cityName": "Aix",
   "PaylineBuyerShippingAddress.zipCode": "13390"
   "PaylineBuyerMobilePhone": "0605040302",
   "PaylineBuyerShippingAddress.phone": "0605040302",
   "PaylineBuyerIp": "127.126.125.100",
   "PaylineFormattedAmount": "EUR1.00",
   "PaylineOrderDate": "05/26/2008 10:00",
   "PaylineOrderRef": "170630111901",
   "PaylineOrderDeliveryMode": "4",
   "PaylineOrderDeliveryTime": "1",
   "PaylineOrderDetails": [

     { "ref": "1",
       "price": 998,
       "quantity": 1,
       "comment": "commentaire1",
       "category": "1",
       "brand": "66999",
       "subcategory1": "",
       "subcategory2": "",
       "additionalData": ""
     }
   ],
 }

getCssIframeWhiteList()

Renvoie la liste des primitives CSS acceptées pour styliser les champs protégés (Carte bancaire, CVV, …)

getCssIframeWhiteList(): any

getFragmentedPaymentInfo()

Dans un contexte de paiement fragmenté (Carte Cadeau Carrefour, prochainement ANCV, …), permet de récupérer les différents paiements enregistrés jusqu’à maintenant.

Développer

title	Exemple..

{

                "amount": "100,00 EUR", // Montant global de la commande
                "amountLeft": "50,00 EUR", // Montant restant à payer
                "recaps": [

503200XXXXXXXXX1166: "50,00 EUR"

]

}

getLanguage()Renvoi la clé du language du widget (passé dans la trame DoWebPayment)"en", "fr", …getOrderInfos()

Permet de récupérer un objet complexe contenant:

le montant avec la devise le tout formaté
la référence commande
le nom du point de vente
un objet complexe représentant l'adresse avec :
- adresse 1
- adresse 2
- ville
- code postal

Développer

title	Exemple..

Payline.Api.getOrderInfos()
on obtient :

Object {
   amountCurrency: "15.00 EUR"
   orderRef: "order-123456789"
   pointOfSale: "POS_Demo"
   pointOfSaleAddress: 
   Object {
       addess1: "260 rue Claude Nicolas Ledoux"
       addess2: "ZI Les Milles"
       city: "Aix en Provence"
       zipCode: "13290" }}

getRecurringDetails()

Permet de récupérer l'échéancier du paiement.

Voir le détail d'intégration : paiement N fois et paiement récurrent.

Pour afficher l'échéancier N fois :

Développer

title	Exemple..

Bloc de code

language	xml
theme	Confluence

Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } );

Pour récupérer les détails du paiement récurrent : Développer

title	Exemple..

Bloc de code

language	xml
theme	Confluence

Payline.Api.getRecurringDetails().schedules;

getToken()

Retourne le token courant avec lequel le Widget a été initialisé :

getToken()

hide()Demande de masquage du formulaire de paiement.

Payline.Api.hide(): void

init()

Demande d'initialisation du formulaire de paiement. Lors de l'initialisation, le widget Payline construit le formulaire en fonction du contexte de la demande de paiement: montant, moyen de paiement proposé, etc.

isSandBox()Permet de connaitre l’environnement : production ou homologation. La fonction retourne true ou false.

Payline.Api.isSandbox();

reset()Réinitialise totalement le widget avec le token et le template passé en paramètre Développer

title	Exemple..

Bloc de code

language	xml
theme	Confluence

Payline.Api.reset(token: string = null, template: string = null): void

show()Demande d'affichage du formulaire de paiement.

Payline.Api.show(): void

toggle()Si le widget est affiché, cette méthode le cache, sinon elle l'afficheupdateWebpaymentData()Mise à jour des informations de la session de paiement (adresses, montant,...) après l'initialisation du widget et avant la finalisation du paiement. Développer

title	Exemple..

Payline.Api.updateWebpaymentData(Payline.Api.getToken(), JSON, callBack);
Contenu du JSON :
{
"payment": {
    "amount": "252",
    "currency": "978" },
"order":
{
    "amount": "255",
    "currency": "978",
    "ref": "123",
    "deliveryTime ": "1",
    "deliveryMode ": "1",
    "deliveryExpectedDate": "30/09/2016",
    "deliveryExpectedDelay": "1",
    "details": {
        "details":
     [ { "ref": "00001 (ref1)",
        "price": "50",
       "quantity": "1",
       "comment": "comment1 (rem1)",
       "category": "1",
       "brand": "My HERMES (brd1)",
       "subcategory1": "BOSS",
       "subcategory2": "MONTRE",
       "additionalData": "LegalAge=18;Discount=0105",
       "taxRate ": "1234"
        },
        { "ref": "00002 (ref2)",
          "price": "50",
          "quantity": "1",
          "comment": "comment2 (rem2)",
          "category": "1",
          "brand": "My HERMES (brd2)",
          "subcategory1": "HERMES",
          "subcategory2": "FOULARD",
          "additionalData": "LegalAge=18;Discount=0105",
          "taxRate ": "1234"
       },
       { "ref": "00003 (ref3)",
       "price": "50",
       "quantity": "1",
       "comment": "comment3 (rem3)",
       "category": "1",
         "brand": "My HERMES (brd3)",
       "subcategory1": "HERMES",
         "subcategory2": "MONTRE",
       "additionalData": "LegalAge=19;Discount=0105",
       "taxRate ": "1234"
        }
      ]
    }
},
"buyer": {
"shippingAddress": {
"title": "2",
"name": "BUYER (shipping)",
"lastName": "PAYLINE (shipping)",
"firstName": "Validation Team (shipping)",
"street1": "Colombus Circle (shipping)",
"street2": "Central Park (shipping)",
"cityName": "New York (shipping)",
"zipCode": "NY 10023",
"country" : "FR",
"phone" : "0123458789",
"state": "NYC (state)",
"county": "Upper East Side (shipping)",
"phoneType": "1"
},
"billingAddress": {
"title": "3",
"name": "BUYER (billing)",
"lastName": "TUPU (billing)",
"firstName": "Christian (billing)",
"street1": "15 rue LEDOUX (billing)",
"street2": "Z.I. les Milles (billing)",
"cityName": "Aix-en-Provence (billing)",
"zipCode": "13902",
"country" : "FR",
"phone" : "0223458789",
"state": "FRANCE (state)",
"county": "Bouches-du-Rhone",
"phoneType": "4"
}
}
}

Exemple pour masquer, puis afficher le formulaire de paiement :

Payline.Api.hide(): void
Payline.Api.show(): void

Exemple pour modifier le libellé sur bouton Payer :

Vous pouvez le changer via l’instruction JavaScript Payline.jQuery('.pl-pay-btn').text('libellé du bouton');

Exemple pour modifier le libellé sur bouton Payer :

Vous devez récupérer le montant dans la langue de l’acheteur via un appel à la fonction Payline.Api.getContextInfo('PaylineFormattedAmount');
Vous pouvez modifier le texte du bouton avec la fonction : Payline.jQuery("<classe de l’élément à modifier>").text('<texte de remplacement>'));

Attention, toujours utiliser les classes pour ces instructions, jamais l’id de l’élément qui est généré à la volée

Pour afficher le montant dans le bouton. L’instruction est donc Payline.jQuery(".PaylineWidget .pl-pay-btn, .PaylineWidget .pl-btn").text('Payer '+Payline.Api.getContextInfo('PaylineFormattedAmount'));
Cette instruction doit être appelée lorsque le widget déclenche l’évènement « didshowstate » avec l’état PAYMENT_METHODS_LIST.

Personnalisation CSS

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:

DescriptionParamètrela 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; }

Consulter la personnalisaton CSS.

Pour

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.

Callback du cycle de vie

Inclusion d'extraitDT:PW - Personnalisation du widget : Fonction CallBackDT:PW - Personnalisation du widget : Fonction CallBacknopaneltrue

Consulter les fonctions CallBack.

Fonctions Gestion des frais

La gestion des frais est présent sur le formulaire de paiement et correspond à l'encart Transaction :

Centre administration : Moyen de paiement à configurer	Centre administration : Détail d'une transaction	Page de paiement

La gestion des frais exclut dans les cas suivants :

Paiement Wallet
Paiement ShortCut
Paiement Rec/NX

Pages associées

Contenu par étiquette

showLabels	false
max	10
spaces	com.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@9a3
showSpace	false
sort	title
type	page
cql	label in ( "mode_integration" , "inshop" ) and label = "pageweb" and type = "page" and space = "DT"
labels	bancontact belgique choixdelamarque

Arborescence des pages

Comparaison des versions

Ancienne version 36

Nouvelle version Actuel

Légende

API JavaScript

Intégration

Exemples d'intégration des modes Widget

Feuille de style

API JavaScript

Personnalisation CSS

Callback du cycle de vie

Fonctions Gestion des frais

Pages associées

Arborescence des pages

Historique de la page

Comparaison des versions

Ancienne version 36

Nouvelle version Actuel

Légende

Intégration

Exemples d'intégration des modes Widget

Feuille de style

API JavaScript

API JavaScript

Personnalisation CSS

Callback du cycle de vie

Fonctions Gestion des frais

Pages associées