- Created by Rodolphe GARIN, last modified on 18 Feb 2019
Plus d'information
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 depuis votre SI sont proposées avec la librairie widget-min.js :
Fonction | Description | Exemple |
---|---|---|
endToken() | Met fin à la vie du jeton de session web (token obtenu via DoWebPayment). Les paramètres : |
|
finalizeShortCut() | Déclenche la finalisation du paiement ShortCut (à appeler en context.state PAYMENT_TRANSITIONAL_SHORTCUT) | |
getBuyerShortCut() | Renvoie 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. | { "firstName": "DUPONT", |
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() { |
getContextInfo(key) | Renvoie une information du contexte grâce à sa clé parmi les valeurs suivantes : | { "PaylineAmountSmallestUnit": 100, "PaylineBuyerShippingAddress.street2": "Batiment 2", { "ref": "1", |
getCssIframeWhiteList() | Renvoie la liste des primitives CSS acceptées pour styliser les champs protégés (Carte bancaire, CVV, …) | getCssIframeWhiteList(): any |
getFragmentedPaymentInfo() | Dans un contexte de paiement fragmenté (Carte Cadeau Carrefour, prochainement ANCV, …), permet de récupérer les différents paiements enregistrés jusqu’à maintenant. Vous pouvez récupérer les données lorsque vous êtes en mode tab ou col. | { "amount": "100,00 EUR", // Montant global de la commande 503200XXXXXXXXX1166: "50,00 EUR" ] } |
getLanguage() | Renvoie la clé du language du widget (passé dans la trame DoWebPayment) | "en", "fr", … |
getOrderInfos() | Permet de récupérer un objet complexe contenant:
| Object { Payline.Api.getOrderInfos() on obtient : amountCurrency: "15.00 EUR" orderRef: "order-123456789" pointOfSale: "POS_Demo" pointOfSaleAddress: Object { addess1: "260 rue Claude Nicolas Ledoux" addess2: "ZI Les Milles" city: "Aix en Provence" zipCode: "13290" }} |
getRecurringDetails() | Permet de récupérer l'échéancier du paiement. Voir le détail d'intégration : paiement N fois et paiement récurrent. | Pour afficher l'échéancier N fois : Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } );
Payline.Api.getRecurringDetails().schedules; |
getToken() | Retourne le token courant avec lequel le Widget a été initialisé. | getToken() |
getTokenStatus() | Permet de connaitre l'état de la session de paiement (Token de session) afin de renvoyer une demande de paiement sans recréer une nouvelle commande et éviter les problemes de multiples sessions pour une commande. La fonction getTokenStatus avec l'identifiant de session de paiement en paramètre et retourne les états : ALIVE, EXPIRED, UNKNOWN. | Payline.Api.getTokenStatus('1Iy8gHkAi6AtplkmM1381551350523598',show) function show(tokenStatus){ console.log('Le statut du token:'); console.log(tokenStatus); } |
hide() | Demande de masquage du formulaire de paiement. | Payline.Api.hide(): void |
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. | |
isSandBox() | Permet de connaitre l’environnement : production ou homologation. La fonction retourne true ou false. | Payline.Api.isSandbox(); |
reset() | Réinitialise totalement le widget avec le token et le template passé en paramètre | Payline.Api.reset(token: string = null, template: string = null): void |
show() | Demande d'affichage du formulaire de paiement. | Payline.Api.show(): void |
toggle() | Si le widget est affiché, cette méthode le cache, sinon elle l'affiche | |
updateWebpaymentData() | Mise à jour des informations de la session de paiement (adresses, montant,...) après l'initialisation du widget et avant la finalisation du paiement. Cette fonction est validée seulement si l'option de mise à jour d'une commande au niveau du point de vente est activée (voir le lien du centre admin). | Payline.Api.updateWebpaymentData(Payline.Api.getToken(), { "payment": { "amount": 100, "currency": "978" } }, function (response) { if(response.status !== 200) { alert("Error occured at Payline.Api.updateWebpaymentData (code "+response.status+")"); } }); Ensuite il faut regarder dans network de chrome, quand il y a une erreur on peut obtenir la réponse. { "payment": { "amount": "252", "order": { "ref": "toto", "details": { "details": [{ "ref": "00001 (ref1)", }, { "ref": "00002 (ref2)", }, { "ref": "00003 (ref3)", }, { "ref": "00004 (ref4)", }, { "ref": "00005 (ref5)", } ] } }, "buyer": { "firstName": "Prénom", "title": "2", }, "billingAddress": { "title": "3", } } } |
Cas d'utilisation
Exemple pour masquer, puis afficher le formulaire de paiement :
- Payline.Api.hide(): void
- Payline.Api.show(): void
Exemple pour changer le libellé du bouton Payer :
- Vous pouvez le modifier en utilisant l'instruction JavaScript Payline.jQuery ('. Pl-pay-btn'). Texte (' étiquette du bouton ');
Exemple pour changer le libellé du bouton Payer :
- Vous devez récupérer le montant dans la langue de l'acheteur via un appel à la fonction Payline.Api.getContextInfo ('PaylineFormattedAmount') ;
- Vous pouvez modifier le texte du bouton avec la fonction : Payline.jQuery ("<classe de l'élément à modifier>"). Texte ('<texte de remplacement>'));
Attention, utilisez toujours les classes pour ces instructions, jamais l'id de l'élément qui est généré à la volée
- Pour afficher le montant dans le bouton. L'instruction est donc Payline.jQuery (".paylineWidget .pl-pay-btn, .PaylineWidget .pl -btn"). Texte ("Payer" + Payline.Api.getContextInfo ("PaylineFormattedAmount"));
- Cette instruction doit être appelée lorsque le widget déclenche l' événement « didshowstate » avec l' état PAYMENT_METHODS_LIST .
Pour obtenir plus d'information de personnalisation JQuery ou CSS, veuillez trouver les informations ici.