JavaScript API

In order to interact with the payment form, Payline offers a JavaScript API so that you keep control of the form.
The functions available from your IS are offered with the library widget-min.js ::

Fonction	Description	Example
endToken()	Ends the life of the web session token (token obtained via DoWebPayment). The parameters: (additionalData: any, callback: Function, spinner: any, handledByMerchant: boolean)	Example.. Payline.Api.endToken(null, function() { window.location.href = Payline.Api.getCancelAndReturnUrls().cancelUrl; }, null, true); // 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é.
finalizeShortCut()	Triggers the finalization of the ShortCut payment (to be called in context.state PAYMENT_TRANSITIONAL_SHORTCUT)
getBuyerShortCut()	Returns a complex object containing the buyer's data from the shortcut partner. This function is available in a context of state = PAYMENT_TRANSITIONAL_SHORTCUT.	Example.. { "firstName": "DUPONT", "lastName": "Jean", "email": "jean.dupont@yopmail.com", "cityName": "Aix", "country": "FR", "street1": "5 rue de Marseille", "street2": "Batiment 2", "zipCode": "13390" }
getCancelAndReturnUrls()	Returns a complex object containing the returnUrl and the cancelUrl from the DoWebPayment	For example, you can create a cancel button that triggers the following actions: Example.. function cancel() { Payline.Api.endToken(); // met fin à la vie du token window.location.href = Payline.Api.getCancelAndReturnUrls().cancelUrl; // redirige l'utilisateur sur la cancelUrl
getContextInfo(key)	Returns context information using its key among the following values.	Example.. { "PaylineAmountSmallestUnit": 100, "PaylineCurrencyDigits": 2, "PaylineCurrencyCode": "EUR", "PaylineBuyerFirstName": "Jean", "PaylineBuyerLastName": "DUPONT", "PaylineBuyerShippingAddress.street2": "Batiment 2", "PaylineBuyerShippingAddress.country": "FR", "PaylineBuyerShippingAddress.name": "Perso", "PaylineBuyerShippingAddress.street1": "5 rue de Marseille", "PaylineBuyerShippingAddress.cityName": "Aix", "PaylineBuyerShippingAddress.zipCode": "13390" "PaylineBuyerMobilePhone": "0605040302", "PaylineBuyerShippingAddress.phone": "0605040302", "PaylineBuyerIp": "127.126.125.100", "PaylineFormattedAmount": "EUR1.00", "PaylineOrderDate": "05/26/2008 10:00", "PaylineOrderRef": "170630111901", "PaylineOrderDeliveryMode": "4", "PaylineOrderDeliveryTime": "1", "PaylineOrderDetails": [ { "ref": "1", "price": 998, "quantity": 1, "comment": "commentaire1", "category": "1", "brand": "66999", "subcategory1": "", "subcategory2": "", "additionalData": "" } ], }
getCssIframeWhiteList()	Returns the list of CSS primitives accepted to style the protected fields (Credit card, CVV, etc.).	getCssIframeWhiteList(): any
getFragmentedPaymentInfo()	In a context of fragmented payments (Carrefour Gift Card, soon ANCV, etc.), it is possible to recover the various payments recorded up to now. You can recover the data when you are in tab or col mode.	Example.. { "amount": "100,00 EUR", // Montant global de la commande "amountLeft": "50,00 EUR", // Montant restant à payer "recaps": [ 503200XXXXXXXXX1166: "50,00 EUR" ] }
getLanguage()	Returns the language key of the widget (passed in the DoWebPayment frame).	"en", "fr", …
getOrderInfos()	Allows you to retrieve a complex object containing: the amount with the currency all formatted the order reference the name of the point of sale a complex object representing the address with: address1 address 2 city Postal code	Example.. 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()	Allows you to retrieve the payment schedule. See the integration detail: installment payment N times and recurring payment.	To display the schedule N times: Example.. Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } ); To retrieve recurring payment details: Example.. Payline.Api.getRecurringDetails().schedules;
getToken()	Returns the current token with which the Widget was initialized.	getToken()
getTokenStatus()	Allows you to know the status of the payment session (Session Token) in order to send a payment request without recreating a new order and to avoid the problems of multiple sessions for an order. The getTokenStatus function with the payment session identifier as a parameter and returns the states: ALIVE, EXPIRED, UNKNOWN.	Example.. Payline.Api.getTokenStatus('1Iy8gHkAi6AtplkmM1381551350523598',show) function show(tokenStatus){ console.log('Le statut du token:'); console.log(tokenStatus); }
hide()	Request to hide the payment form.	Payline.Api.hide(): void
init()	Request for initialization of the payment form. During initialization, the Payline widget builds the form according to the context of the payment request: amount, proposed payment method, etc.
isSandBox()	Allows you to know the environment: production or certification. The function returns true or false.	Payline.Api.isSandbox();
reset()	Totally reset the widget with the token and the template passed as a parameter.	Example.. Payline.Api.reset(token: string = null, template: string = null): void
show()	Request to display the payment form.	Payline.Api.show(): void
toggle()	If the widget is displayed, this method hides it, otherwise it displays it.
updateWebpaymentData()	Update of payment session information (addresses, amount, ...) after initialization of the widget and before finalization of payment. This function is validated only if the option to update an order at the point of sale is activated ( see the link of the admin center ).	Example of calling the function .. 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. Example of Payment and Order. { "payment": { "amount": "252", "currency": "978" }, "order": { "ref": "toto", "amount": "255", "currency": "978", "deliveryTime ": "1", "deliveryMode ": "1", "deliveryExpectedDate": "30/09/2016", "deliveryExpectedDelay": "1", "taxes": "10", "deliveryCharge": "10" "details": { "details": [{ "ref": "00001 (ref1)", "price": "50", "quantity": "1", "comment": "comment1 (rem1)", "category": "1", "brand": "My HERMES (brd1)", "subcategory1": "BOSS", "subcategory2": "MONTRE", "additionalData":"LegalAge=18;Discount=0105", "taxRate ": "1234" }, { "ref": "00002 (ref2)", "price": "50", "quantity": "1", "comment": "comment2 (rem2)", "category": "1", "brand": "My HERMES (brd2)", "subcategory1": "HERMES", "subcategory2": "FOULARD", "additionalData":"LegalAge=18;Discount=0105", "taxRate ": "1234" }, { "ref": "00003 (ref3)", "price": "50", "quantity": "1", "comment": "comment3 (rem3)", "category": "1", "brand": "My HERMES (brd3)", "subcategory1": "HERMES", "subcategory2": "MONTRE", "additionalData": "LegalAge=19;Discount=0105", "taxRate ": "1234" }, { "ref": "00004 (ref4)", "price": "50", "quantity": "1", "comment": "comment4 (rem4)", "category": "1", "brand": "My HERMES (brd4)", "subcategory1": "HERMES", "subcategory2": "MONTRE", "additionalData": "LegalAge=18;Discount=0105", "taxRate ": "4321" }, { "ref": "00005 (ref5)", "price": "51", "quantity": "1", "comment": "comment5 (rem5)", "category": "1", "brand": "My HERMES (brd5)", "subcategory1": "HERMES", "subcategory2": "MONTRE", "additionalData": "LegalAge=18;Discount=0105", "taxRate ": "1234" } ] } }, "buyer": { "firstName": "Prénom", "lastName": "Nom", "email": "myemail@mail.com", "mobilePhone": "+033600000000", "shippingAddress": { "title": "2", "name": "BUYER (shipping)", "lastName": "PAYLINE (shipping)", "firstName": "Validation Team (shipping)", "street1": "Colombus Circle (shipping)", "street2": "Central Park (shipping)", "cityName": "New York (shipping)", "zipCode": "NY 10023", "country": "FR", "phone": "0123458789", "state": "NYC (state)", "county": "Upper East Side (shipping)", "phoneType": "1" }, "billingAddress": { "title": "3", "name": "BUYER (billing)", "lastName": "NAME (billing)", "firstName": "FirstName (billing)", "street1": "15 rue LEDOUX (billing)", "street2": "Z.I. les Milles (billing)", "cityName": "Aix-en-Provence (billing)", "zipCode": "13902", "country": "FR", "phone": "0223458789", "state": "FRANCE (state)", "county": "Bouches-du-Rhone", "phoneType": "4" } } }

Use case

Example to hide, then display the payment form:

Payline.Api.hide (): void
Payline.Api.show (): void

For more JQuery or CSS customization information, please find the information here.

Linked pages

Contenu par étiquette

Aucun contenu ne comporte les étiquettes spécifiées

Arborescence des pages

Copie de PW - L'API JavaScript

JavaScript API

Use case

Linked pages