Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: mineur



Align
alignright

     Image Added


Content

Table of Contents
maxLevel2
stylenone

More information 

Page Tree
rootPW - Widget Integration
spacesDT
sortnatural



Excerpt

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 ::

FonctionDescriptionExample
endToken()

Ends the life of the web session token (token obtained via DoWebPayment).

The parameters:
(additionalData: any,
  callback: Function,
  spinner: any,
  handledByMerchant: boolean)


Expand
titleExample..

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.


Expand
titleExample..
{  "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:


Expand
titleExample..
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.


Expand
titleExample..
{  "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. 


Expand
titleExample..

{

                "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


Expand
titleExample..


Code Block
languagejava
themeConfluence
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:

Expand
titleExample..


Code Block
languagexml
themeConfluence
Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } );



To retrieve recurring payment details:
Expand
titleExample..


Code Block
languagexml
themeConfluence
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.


Expand
titleExample..


Code Block
languagejava
themeConfluence
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.


Expand
titleExample..


Code Block
languagexml
themeConfluence
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 ).


Expand
titleExample 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.


Expand
titleExample 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 

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)  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.



Linked pages

Content by Label
showLabelsfalse
max10
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@9a3
showSpacefalse
sorttitle
typepage
cqllabel = "integration" and label = "pageweb" and label = "en" and type = "page" and space = "DT"
labelsbancontact belgique choixdelamarque