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) |
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. |
{ "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:
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. |
{ "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. |
{ "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
|
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:
Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } ); |
|
To retrieve recurring payment details:
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. |
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. |
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 ). |
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",
"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
Example to change the label on Pay button: - You can change it using the JavaScript statement Payline.jQuery ('. Pl-pay-btn'). Text (' button label ');
Example to change the label on Pay button: - You must recover the amount in the language of the buyer via a call to the function Payline.Api.getContextInfo ('PaylineFormattedAmount');
- You can change the text of the button with the function: Payline.jQuery ("<class of the element to modify>"). Text ('<replacement text>'));
 Warning, always use the classes for these instructions, never the id of the element that is generated on the fly
- To display the amount in the button. The statement is therefore Payline.jQuery (".paylineWidget .pl-pay-btn, .PaylineWidget .pl -btn"). Text ('Pay' + Payline.Api.getContextInfo ('PaylineFormattedAmount'));
- This statement must be called when the widget triggers the " didshowstate " event with the PAYMENT_METHODS_LIST state .
For more JQuery or CSS customization information, please find the information here. |
