To get the formatting of the payment form, you need to integrate the CSS Payline stylesheet by adding the following line in the <head> tag 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.cdn.payline.com/cdn/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. |
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: Script and CSS URLs are different between test and production environments. We recommend that you configure them in environment variables. |
Customizing the style of the payment form is possible by overriding the stylesheet provided by default by Payline. The customization possibilities are endless, here are some simple examples: | Description | Parameter |
|---|
| The color of the banner | | Description | Paramètre |
|---|
| la couleur du bandeau Enseigne | #PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; } | | la couleur du texte de l'EnseigneThe color of the text of the sign | #PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; } | | la couleur du texte du montant à payerThe text color of the amount to paid | #PaylineWidget .pl-header-title-content p { color: #ABCDEF; } | | La couleur du bouton de paiementThe color of the payment button | #PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; } | | La couleur de fond du formulaireThe background color of the form | #PaylineWidget .pl-body { background-color: #ABCDEF; } | | La couleur de la zone moyen de paiementThe color of the payment method area | #PaylineWidget .pl-pmContainer {
background-color: #ABCDEF;
border-color: #ABCDEF; } | | la couleur du bouton fermer la The color of the button close the lightbox | #PaylineWidget .pl-icon-close { color: #ABCDEF; } | The window size is optimized in the following configuration: - minimum width of the PaylineWidget div: 500px
- maximum recommended width of the PaylineWidget div: 900px
Below and above the dimensions indicated, it is recommended to adjust the margins and fields. To hide the labels, you must remove the labels and remove the left margin of the controls 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 proposes to reduce the margins in order to adjust the window above 900px wide, for that it is enough to decrease the width of the label (xx%), and to decrease the margin to the left of the fields (yy% by default 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.
For more information on the list of tags, please find the information here.
|