| Sommaire | ||||
|---|---|---|---|---|
|
...
Principe
Le Mode Lightbox utilise des iframes pour afficher le formulaire de paiement en superposition (overlay) de votre boutique. Lorsque ce mode est utilisé, votre boutique est grisée et le formulaire de paiement apparaît flottant au dessus de votre boutique.
...
| Bloc de code | ||
|---|---|---|
| ||
<? $paylineToken = (is_empty($_GET['paylinetoken'])) ? initPayment() : $_GET['paylinetoken'] : initPayment(); ?> |
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> :
...
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-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 ») |
|
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 :
| Fonction | Description |
|---|---|
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. |
...
Exemple pour masquer, puis afficher le formulaire de paiement :
...
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 :
| Paramètre | Description |
|---|---|
#PaylineWidget .pl-header-title-wrapper { | la couleur du bandeau Enseigne |
#PaylineWidget .pl-header-title-content h4 { | la couleur du texte de l'Enseigne |
#PaylineWidget .pl-header-title-content p { | la couleur du texte du montant à payer |
#PaylineWidget .pl-pay-btn { #PaylineWidget .pl-pay-btn:hover { | la couleur du bouton de paiement |
#PaylineWidget .pl-body { | la couleur de fond du formulaire |
#PaylineWidget .pl-pmContainer { | la couleur de la zone moyen de paiement |
#PaylineWidget .pl-icon-close { | la couleur du bouton fermer la lightbox |