Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: linked page

Content

Table of Contents
maxLevel2
stylenone



Align
alignright

  




Excerpt

Integration

The Widget integration (column / tab or Lightbox mode), takes place in only 3 steps :

  1. Initialization of payment : from your server you use the doWebPayment function of Web Payment API to initiate a payment on Payline payment pages.
  2. From web page, add a script and  <DIV> tag in body of your web page : Payline will use that tag to display the payment form.
  3. Payment Result : from your server you use the getWebPaymentDetails function of  Web Payment API to get payment result.

The minimum HTML page for generating a payment form is as follows:

Code Block
languagexml
themeConfluence
titleCode HTML
<html>
 <head>
   <script src="https://homologation-payment.cdn.payline.com/cdn/scripts/widget-min.js"></script>
 </head>
 <body>
 <div id="PaylineWidget" 
    data-token="the token obtained in doWebPayment Response" 
    data-template="column"
    data-embeddedredirectionallowed="false" 
 />
 </body>
</html>



Expand
title Bookstore links..

The HTML file of the payment page must contain, at a minimum, in the HEAD the links to the static resources of the widget corresponding to the desired environment (approval, production):




And possibly a link to your own CSS, in a relative fashion.


Expand
titleExample in a test environment (certification) ...


Head of file

<html>
    <head>
        <title>Mon template</title>
        <link rel="stylesheet" type="text/css" href="tuto.css" />
        <script src="https://homologation-payment.cdn.payline.com/cdn/scripts/widget-min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="https://homologation-payment.cdn.payline.com/cdn/styles/widget-min.css" charset="utf-8">
    </head>
</html>





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:

Code Block
languagephp
themeConfluence
titleCode PHP
<?php $paylineToken = ( is_empty($_GET['paylinetoken']) ) ? createNewWebPayment() : $_GET['paylinetoken']; ?>


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 your page is displayed :

ParamètreDescriptionvaleur
data-template
The name of the template to use for initializing the form.
  • tab
  • column
  • lightbox
  • shortcut
data-auto-init
Defines whether the form should initialize as soon as the web page has finished loading (auto-init to "true"), or if it must wait for an initialization request (auto-init to "false")
  • true
  • false
data-embeddedredirectionallowed

Function deactivated


data-partnerreturnurl

The parameter allows you to specify a return url for a defined list of partners, for now: AmazonPay

When the buyer clicks on the AmazonPay button, he is redirected to the partner to authenticate. Once authenticated, it is redirected to the specified URL.

<div id="PaylineWidget"
data-template="shortcut"
data-partnerreturnurl="https://maboutique.com/checkout">


Examples of integration of Widget modes

According to the parameters, here are the examples of integration :

InShop Tab mode InShop Column mode LightBox mode Shortcut mode 


Info

Payline forces column  page display  of payment pages when you use tab mode and the size of the device used by the consumer is too small to display properly. This enhancement simplifies your technical integration when you have a "responsive desktop / mobile" store.


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.

CSS customization

Customizing the style of the payment form is possible by overriding the stylesheet provided by default by Payline. Consult the CSS customaton.

Lifecycle callback

Consult the CallBack functions.


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



Features Fee Management

The expense management is present on the payment form and corresponds to the Transaction insert:

Back office : Configure the payment methodBack office : transaction detailsPayment page

Fee management excludes in the following cases:

  • Wallet Payment
  • ShortCut Payment
  • Payment Rec / NX



Linked pages

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