Contenu
Sommaire | ||||
---|---|---|---|---|
|
Plus d'information
Page Tree | ||
---|---|---|
|
Extrait | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
IntégrationL'intégration du widget en mode InShop (colonne/tab) ou mode Lightbox, extrêmement facile, s'effectue en uniquement 3 étapes :
La page HTML minimale pour générer un formulaire de paiement est la suivante :
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 :
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 :
Exemples d'intégration des modes WidgetSuivant les paramètres, voici les exemples d'intégration :.
Feuille de stylePour 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> :
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 JavaScriptAfin 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 | 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. | Payline.Api.show(): void | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hide() | Demande de masquage du formulaire de paiement. | Payline.Api.hide(): void | updateWebpaymentData() | Mise à jour des informations de la session de paiement (adresses, montant,...) après l'initialisation du widget. Voir fonctions avancées. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
isSandBox() | Permet de connaitre l’environnement : production ou homologation. La fonction retourne true ou false. | Payline.Api.isSandbox(); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
getOrderInfos() | Permet de récupérer un objet complexe contenant:
| Payline.Api.getOrderInfos() Object | toggle() | Si le widget est affiché, cette méthode le cache, sinon elle l'affiche | endToken() | Met fin à la vie du jeton de session web (token obtenu via DoWebPayment) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
getCancelAndReturnUrls() | Renvoie un objet complexe contenant la returnUrl et la cancelUrl provenant du DoWebPayment | On peut par exemple créer un bouton annuler function cancel() { | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
getLanguage() | Renvoi la clé du language du widget (passé dans la trame DoWebPayment) | "en", "fr", … | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
getContextInfo(key) | Renvoi une information du contexte grâce à sa clé parmi les valeurs suivantes : | { "PaylineBuyerShippingAddress.phone": "0600000000", { "ref": "1", | finalizeFastCheckout() | Déclenche la finalisation du paiement fastCheckout (à appeler en context.state PAYMENT_TRANSITIONAL_FAST_CHECKOUT) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
getBuyerFastCheckout() | Renvoi un objet complexe contenant les données de l'acheteur provenant du partenaire FastCheckOut. Cette fonction est disponible dans un contexte de state = PAYMENT_TRANSITIONAL_FAST_CHECKOUT. | { "firstName": "TOTO", | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Description | Paramè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 :
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. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Inclusion d'extrait | DT:PW - Personnalisation du widget : Fonction CallBack | DT:PW - Personnalisation du widget : Fonction CallBack | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
nopanel | true |
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 exclue exclut dans les cas suivants :
- Paiement Wallet
- Paiement FastCheckoutShortCut
- Paiement REC/NXRec/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