Documentation Monext Online

Page tree


Contenu

Plus d'information 

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

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

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.


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ètre
la 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%; }

Pour obtenir plus d'information sur la liste des balises, veuillez trouver les informations ici.


Pages associées