Extrait | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
IntegrationThe Widget integration (column / tab or Lightbox mode), takes place in only 3 steps :
The minimum HTML page for generating a payment form is as follows:
The data-token is the session token for authentication and is obtained in response to the request to initialize a payment (doWebPayment). In order to avoid that a new initialization is performed during each refresh of the page, you must either use a session on your server to store it, or check if the current URL already contains a payment token in a GET parameter named paylinetoken. Here is an example to reuse the token present in the URL:
Additional attributes that you can use in the <div> tag allow you to customize the display of the form. For example; if you do not want the payment form to appear automatically when viewing your page is displayed :
Examples of integration of Widget modesAccording to the parameters, here are the examples of integration :
Style sheetTo get the form of the payment form formatted, you have to integrate the CSS Payline style sheet by adding the following line in the <head> tag:
JavaScript APIIn order to interact with the payment form, Payline offers a JavaScript API to keep your hand on the form. The available functions of your IS are: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Function | Description | Example | endToken() | Ends the life of the web session token (token obtained via DoWebPayment). Parameters : | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Développer | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| finalizeShortCut() | Triggers the finalization of the payment ShortCut (to call in context.state PAYMENT_TRANSITIONAL_SHORTCUT) | getBuyerShortCut() | Returns a complex object containing buyer data from the shortcut partner. This function is available in a context of state = PAYMENT_TRANSITIONAL_SHORTCUT. |
Développer | ||
---|---|---|
| ||
{ "firstName": "DUPONT", |
For example, you can create a cancel button that triggers the following actions:
title | Example.. |
---|
function cancel() {
Payline.Api.endToken();
// end the token's life
window.location.href =Payline.Api.getCancelAndReturnUrls().cancelUrl;
// redirect the user to cancelUrl
Développer | ||
---|---|---|
| ||
{ "PaylineAmountSmallestUnit": 100, "PaylineBuyerShippingAddress.street2": "Batiment 2", { "ref": "1", |
getCssIframeWhiteList()
Returns the list of accepted CSS primitives for stylizing protected fields (Credit Card, CVV, ...)
getCssIframeWhiteList(): any
getFragmentedPaymentInfo()
In a context of fragmented payment (Carrefour Gift Card, soon ANCV, ...), allows to recover the various payments registered so far.
Développer | ||
---|---|---|
| ||
{ "amount": "100,00 EUR", // Montant global de la commande 503200XXXXXXXXX1166: "50,00 EUR" ] } |
Retrieves 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
title | Example.. |
---|
We get :
Object {
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" }}
Retrieves the payment schedule.
See the integration details: payment N times and recurring payment.
To display the schedule N times:
title | Exemple.. |
---|
Bloc de code | ||||
---|---|---|---|---|
| ||||
Payline.Underscore.forEach( Payline.Api.getRecurringDetails().schedules, function(key, value) { console.log(value + " " + key) } ); |
title | Exemple.. |
---|
Bloc de code | ||||
---|---|---|---|---|
| ||||
Payline.Api.getRecurringDetails().schedules; |
getToken()
Returns the current token with which the Widget was initialized.
getToken()
Payline.Api.hide(): void
init()
Request to initialize the payment form. During initialization, the Payline widget builds the form according to the context of the payment request: amount, proposed payment method, etc.
Payline.Api.isSandbox();
title | Example.. |
---|
When a form is requested with several means of payment, some of which are conditioned by the return of a partner API, then:
- If the partner answers before the display of the form then the means of payment are displayed according to the partners' response;
- If the partner responds after displaying the form then the inserts of the conditioned means of payment are displayed only with a Spinner while waiting for the partner's response.
The order in which the payment methods are displayed is carried out with the order specified in the contractList tag of the doWebPayment.
JavaScript API
In order to interact with the payment form, Payline offers a JavaScript API so that you keep control of the form. Consult the JavaScript API
Bloc de code | ||||
---|---|---|---|---|
| ||||
Payline.Api.reset(token: string = null, template: string = null): void |
Payline.Api.show(): void
title | Example.. |
---|
Contents of the JSON:
{
"payment": {
"amount": "252",
"currency": "978" },
"order":
{
"amount": "255",
"currency": "978",
"ref": "123",
"deliveryTime ": "1",
"deliveryMode ": "1",
"deliveryExpectedDate": "30/09/2016",
"deliveryExpectedDelay": "1",
"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"
}
]
}
},
"buyer": {
"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": "TUPU (billing)",
"firstName": "Christian (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"
}
}
}
Example to hide and 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
CSS customization
Customizing the style of the payment form is possible by overloading overriding the stylesheet provided by default style sheet provided by Payline. The possibilities of customization are endless, here are some simple examples:
#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; }
The size of the window is optimized in the following configuration:
- minimum width of the div PaylineWidget: 500px
- maximum recommended width of the PaylineWidget div: 900px
Below and above the indicated dimensions, it is recommended to adjust the margins and fields.
To hide the labels, you must remove the labels and delete the margin to the left of the fields.
.PaylineWidget.pl-container-default .pl-pmContainer .pl-label-input
{ display: none;} .PaylineWidget.pl-container-default .pl-pmContainer .pl-input-group-container
{ margin-left: 0; }
Lifecycle callback
Expense management functions
The cost management is present on the payment form and corresponds to the Transaction insert:
Administration center: Payment method to configure | Administration center: Details of a transaction | Payment page |
---|---|---|
The cost management excludes in the following cases:
- Wallet payment
- ShortCut payment
- Rec / NX payment
.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%; }
Life cycle callback
Features Fee Management
The expense management is present on the payment form and corresponds to the Transaction insert:
Back office : Configure the payment method | Back office : transaction details | Payment page |
---|---|---|
Fee management excludes in the following cases:
- Wallet Payment
- ShortCut Payment
- Payment Rec / NX
Linked pages
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 = "widget" and label = "integration" and label = "en" and type = "page" and space = "DT" labels bancontact belgique choixdelamarque