Documentation Monext Online

Arborescence des pages

Comparaison des versions

Ancienne version 26

changes.mady.by.user Rodolphe GARIN

Sauvegardée le

comparé à

Nouvelle version 27

changes.mady.by.user Rodolphe GARIN

Sauvegardée le

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.

...

 
L'URL de votre boutique reste dans la barre d'adresse Internet du navigateur.

Intégration

L'intégration, extrêmement facile, s'effectue en uniquement 3 étapes :

  • Initialisation du paiement : vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
  • Ajout d'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 : 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
    languagexml
    themeConfluence
    <html>
 <head>
   <script src="https://homologation-payment.payline.com/scripts/widget-min.js"></script>
 </head>
 <body>
 <div id="PaylineWidget" 
    data-token="the token obtained in doWebPayment Response" 
    data-template="column"
    data-embeddedredirectionallowed="false" 
 />
 </body>
</html>

    Le data-token est le jeton d'authentification 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
    languagephp
    themeConfluence
    <? $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ètreDescriptionvaleur
    data-template
    Le nom du template à utiliser pour l'initialisation du formulaire.
    • tab
    • column
    • lightbox
    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 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
    Exemple de Widget en mode InShop Tab Exemple de Widget en mode InShop ColumnExemple de Widget en mode LightBox

    Image Removed

    Image Removed

    Image Removed

    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
    languagexml
    themeEclipse
    <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 sont :

    FonctionDescription

    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.

    show()demande d'affichage du formulaire de paiement.hide()demande de masquage du formulaire de paiement.updateWebpaymentData()mise à jour des informations de la session de paiement (adresses, montant,...) après l'initialisation du widget. Voir fonctions avancées.

    Exemple pour masquer, puis afficher le formulaire de paiement :

    Bloc de code
    languagejs
    themeConfluence
    Payline.Api.hide(): void
Payline.Api.show(): void

    Personnalisation

    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; }
    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%; }
    Inclusion d'extrait
    DT:
    PW -
    Personnalisation du widget : Balises CSS
    Intégration Widget
    PW - Intégration Widget
    DT:PW - Personnalisation du widget : Balises CSSnopaneltrue

    Pour obtenir plus d'information, veuillez trouver les informations ici.

    Callback du cycle de vie

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