Contenu
Sommaire | ||||
---|---|---|---|---|
|
Plus d'information
Arborescence des pages | ||
---|---|---|
|
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> :
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 et avant la finalisation du paiement. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Développer | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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:
|
Développer | ||
---|---|---|
| ||
Payline.Api.getOrderInfos() Object |
endToken (
additionnalData : any,
callback : Function,
spinner : any,
handledByMerchant : boolean )
title | Exemple.. |
---|
Payline.Api.endToken(null, function() {
window.location.href = Payline.Api.getCancelAndReturnUrls().cancelUrl;
}, null, true);
Lorsque un formulaire est sollicité avec plusieurs moyens de paiement dont certains conditionnés par le retour d'une API partenaire alors :
- Si le partenaire réponds avant l'affichage du formulaire alors les moyens de paiement sont affichés en fonction de la réponse des partenaires ;
- Si le partenaire réponds après l'affichage du formulaire alors les encarts des moyens de paiement conditionnés sont affichés uniquement avec un Spinner en attendant la réponse du partenaire.
L'ordre de l'affichage des moyens de paiement est réalisé avec l'ordre précisé dans la balise contractList du doWebPayment.
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. Consulter l'API JavaScript.
// en valorisant handledByMerchant à true,// la session de paiement sera associée au code retour 02014
// renvoyé par getWebPaymentDetails.
// Dans le cas contraire c'est le code 02319 qui est renvoyé.
qui déclenche les actions suivantes :
title | Exemple.. |
---|
Payline.Api.endToken();
// met fin à la vie du token
window.location.href =
Payline.Api.getCancelAndReturnUrls().cancelUrl;
// redirige l'utilisateur sur la cancelUrl
Développer | ||
---|---|---|
| ||
{ "PaylineAmountSmallestUnit": 100, "PaylineBuyerShippingAddress.street2": "Batiment 2", { "ref": "1", |
Renvoi un objet complexe contenant les données de l'acheteur provenant du partenaire shortcut.
Cette fonction est disponible dans un contexte de state = PAYMENT_TRANSITIONAL_SHORTCUT.
Développer | ||
---|---|---|
| ||
{ "firstName": "DUPONT", |
Exemple pour masquer, puis afficher le formulaire de paiement :
- Payline.Api.hide(): void
- Payline.Api.show(): void
Modification du libellé sur bouton Payer :
il peut être changé via l’instruction JavaScript Payline.jQuery('.pl-pay-btn').text('libellé du bouton').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:
#PaylineWidget .pl-header-title-wrapper { background-color: #ABCDEF; }
#PaylineWidget .pl-header-title-content h4 { color: #ABCDEF; }
#PaylineWidget .pl-header-title-content p { color: #ABCDEF; }
#PaylineWidget .pl-pay-btn { background-color: #ABCDEF; }
#PaylineWidget .pl-pay-btn:hover { background-color: #ABCDEF; }
#PaylineWidget .pl-body { background-color: #ABCDEF; }
#PaylineWidget .pl-pmContainer {
background-color: #ABCDEF;
border-color: #ABCDEF; }
#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; }
Consulter la personnalisaton CSS.
.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%; }
Callback du cycle de vie
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 exclut dans les cas suivants :
- Paiement Wallet
- Paiement ShortCut
- Paiement Rec/NX
Collectez les données cartes sans demande d'autorisation
Dans certain cas, vous avez la nécessité de collecter les données cartes sans réaliser une demande d'autorisation. A présent, vous pouvez le faire pour les cartes CB, Visa, Mastercard et American Express en utilisant le service doWebPayment avec le code action 108 et un montant à 0 €.
Si la fonction Retry est activée alors le service doWebPayment réalisera une demande d'autorisation à 1 €.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