Skip to content

Device Payment - Javascript API

Pass deviceAPIRequest as an argument to the constructor of PaymentService class of Worldline Online Payments Acceptance javascript, which contains attributes 'deviceEndpoint' to set endpoint and 'encryptedPayload' which contains request object. Pass 'requestTimeout' in milliseconds to setRequestTimeout for the API requests. The below code is common for all the payment methods(Card, IBP, EFT and eWallet)

JavaScript
var service = new Worldline.PaymentService(deviceAPIRequest);
service.setRequestTimeout(requestTimeout);

Card Payments

There are alternate two methods for calling on the API for processing with the Device Payment API

  1. Pass card numbers by passing an HTML form reference , where the Worldline Online Payments Acceptance API will read the form data.
  2. Explicit Parameters passed on by the client; The caller explicitly passes on the payment details.

Call api using either async await with try catch(see demo.js) or promise to call the below mentioned javascript methods.

Syntax

JavaScript
     service.cardPayment()
            .chdForm(...)                        // Choose one : Alternative 1 of 2
            .card(...)                           // Choose one : Alternative 2 of 2
            .send();
function description
cardPayment() cardPayment request to set endpointUrl
chdForm(document,tag) Pass payment instrument as captured from the document, by tag. Use either this or card()
card(object) Pass payment instrument details as an object, with the attributes cardHolderName, cardNumber, cardExpiryMonth, cardExpiryYear and cardCVC. Use either this or chdForm().
send() Send request to Worldline Device Payment REST API (at _endpoint).

See examples of how to use either of these two alternatives below.

Method 1: Referencing the payment form

Using async await(see demo.js)

JavaScript
async function processCard() {
  try {
    var response = await service
      .cardPayment()
      .chdForm(document.getElementById("card_details"), "data-chd")
      .send();
  }
  catch (err) {}
}

Using promise

JavaScript
function processCard() {
  return new Promise(function(resolve, reject) {
    service
      .cardPayment()
      .chdForm(document.getElementById("card_details"), "data-chd")
      .send();
  })
    .then(function(response) {})
    .catch(function(err) {});
}
When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

Where the payment form might looks like

HTML
<form id="paymentForm" 
...
<input type="text" name="billingCountryCode" autocomplete="billing country">
...
<input type="text" data-chd="cardNumber" autocomplete="cc-number">

Notes

  • The form has input fields for cardHolderName, cardNumber, cardExpiryMonth, cardExpiryYear and cardCVC.
  • The card holder data field has no "name" attribute, as that could risk that the cardholderdata gets passed to the merchant server. This method explicitly warns on the console in that case.

Method 2: Pass on Card parameters

An alternate integration method, that supports a card object is also possible, like this example illustrates:

Using async await(see demo.js)

JavaScript
async function processCard() {
  try {
    var response = await service
      .cardPayment()
      .card({
        cardHolderName: "Carl Larsson",
        cardNumber: "1234567890123456",
        cardExpiryMonth: "12",
        cardExpiryYear: "34",
        cardCVC: "123"
      })
      .send();
  } catch (err) {}
}

Using promise

JavaScript
function processCard() {
  return new Promise(function(resolve, reject) {
    service
      .cardPayment()
      .card({
        cardHolderName: "Carl Larsson",
        cardNumber: "1234567890123456",
        cardExpiryMonth: "12",
        cardExpiryYear: "34",
        cardCVC: "123"
      })
      .send();
  })
    .then(function(response) {})
    .catch(function(err) {});
}

Redirect Payments (Online Banking/eWallets)

The redirect api would require the payment method id in order to process the same. Call api using either async await with try catch(see demo.js) or promise to call the below mentioned javascript methods.

JavaScript
     service.redirectPayment()
            .paymentForm(...)
            .send();
function description
redirectPayment() redirectPayment request to set endpointUrl for ibp and ewallet payment method
paymentForm(document,tag) Pass payment instrument as captured from the document, by tag.
send() Send request to Worldline Device Payment REST API (at _endpoint).

Below is the example

Using async await(see demo.js)

JavaScript
async function initiateRedirect() {
  try {
    var response = await service
      .redirectPayment()
      .paymentForm(document.getElementById("online_banking_details"),"data-ibp")
      .send();
  } catch (err) {}
}

Using promise

JavaScript
function initiateRedirect() {
  return new Promise(function(resolve, reject) {
    service
      .redirectPayment()
      .paymentForm(document.getElementById("online_banking_details"),"data-ibp")
      .send();
  })
    .then(function(response) {})
    .catch(function(err) {});
}

When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

Where the payment form might look like

HTML
<div id="online_banking_details" 
...
<select class="form-control" data-ibp="ibpId" id = "ibpList">
</select>

Wire Transfer Payments (EFT)

This api would require the payment method id in order to process the same. Call api using either async await with try catch(see demo.js) or promise to call the below mentioned javascript methods.

JavaScript
     service.eftPayment()
            .paymentForm(...)
            .send();
function description
eftPayment() eftPayment request to set endpointUrl for eft payment method
paymentForm(document,tag) Pass payment instrument as captured from the document, by tag.
send() Send request to Worldline Device Payment REST API (at _endpoint).

Below is the example

Using async await(see demo.js)

JavaScript
async function processEft() {
  try {
    var response = await service
      .eftPayment()
      .paymentForm(document.getElementById("eft_details"), "data-eft")
      .send();
  } catch (err) {}
}

Using promise

JavaScript
function processEft() {
  return new Promise(function(resolve, reject) {
    service
      .eftPayment()
      .paymentForm(document.getElementById("eft_details"), "data-eft")
      .send();
  })
    .then(function(response) {})
    .catch(function(err) {});
}

When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

Where the payment form might look like

HTML
<div id="eft_details" 
...
<select class="form-control" data-eft="eftId" id = "eftList">
</select>

Frictionless and Challenge flow to support 3DS 1.0 and 3DS 2.0 Card Payment

JavaScript
     service.initAuth()                         // Choose one : Make request 1 of 3: For init authentication in case of both 3DS1.0 and 3DS2.0
            .continueAuth()                     // Choose one : Make request 2 of 3: For continue authentication in case of only 3DS 2.0
            .cardPayment()                      // Choose one : Make request 3 of 3: For payment in case of both 3DS 1.0 and 3DS 2.0
            .setWorldlineSessionData(...)
            .chdForm(...)                       
            .send();
function description
initAuth() initAuth request to set endpointUrl for initiate authentication in case of 3DS 1.0 and 3DS 2.0
continueAuth() continueAuth request to set endpointUrl for continue authentication in case of 3DS 2.0
cardPayment() cardPayment request to set endpointUrl to process card payment in case of 3DS1.0 and 3DS2.0
chdForm(document,tag) Pass payment instrument as captured from the document, by tag.
setWorldlineSessionData(worldlineSessionData) Pass attribute worldlineSessionData which contains 3DS parameters to continue and complete authentication request.
send() Send request to Worldline Device Payment REST API (at _endpoint).

Below are the example of different request made for 3DS 1.0 and 3DS 2.0 in which Init and Complete Authentication request are applicable for 3DS 1.0 whereas Init, Continue and Complete Authentication request are applicable for 3DS 2.0 Call api using either async await with try catch(see demo.js) or promise to call the below mentioned javascript methods.

1. Init Authentication

JavaScript
     service.initAuth()
            .chdForm(document.getElementById("paymentForm"), 'data-chd')
            .send();

When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

Where the payment form might look like

HTML
<form id="paymentForm" 
...
<input type="text" name="billingCountryCode" autocomplete="billing country">
...
<input type="text" data-chd="cardNumber" autocomplete="cc-number">

Notes

  • The form has input fields for cardHolderName, cardNumber, cardExpiryMonth, cardExpiryYear and cardCVC.
  • The card holder data field has no "name" attribute, as that could risk that the cardholderdata gets passed to the merchant server. This method explicitly warns on the console in that case.

2. Continue Authentication

JavaScript
     service.continueAuth()
            .setWorldlineSessionData(worldlineSessionData)
            .send();

When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

3. Complete Authentication and Card Payment

JavaScript
     service.cardPayment()
            .setWorldlineSessionData(worldlineSessionData)
            .chdForm(document.getElementById("paymentForm"), 'data-chd')
            .send();

When the promise of send() method gets resolved, the response contains an encryptedResponse.When the promise gets rejected then response contains a JSON with status and statusText.

Retrieving the payment methods

In order to retrieve the list of banks dynamically from the Worldline, below api is used: Call api using either async await with try catch(see demo.js) or promise to call the below mentioned javascript methods.

JavaScript
      var service = new Worldline.PaymentService(deviceAPIRequest);
     service.getIbpPaymentMethods()                 //Choose one : Make request 1 of 3: For list of banks for IBP
            .getEftPaymentMethods()                 //Choose one : Make request 2 of 3: For list of banks for EFT
            .getEWalletPaymentMethods()             //Choose one : Make request 3 of 3: For list of banks for eWallet
            .send();
function description
getIbpPaymentMethods() To set endpoinUrl and paymetMethodType as ibp
getEftPaymentMethods() To set endpoinUrl and paymetMethodType as eft
getEWalletPaymentMethods() To set endpoinUrl and paymetMethodType as ewallet
send() Send request to Worldline Device Payment REST API (at _endpoint).

Example

Using async await(see demo.js)

JavaScript
async function getPaymentMethods() {
  try {
    var service = new Worldline.PaymentService(deviceAPIRequest);
    service.getIbpPaymentMethods().send();
  } catch (err) {}
}

Using promise

JavaScript
function getPaymentMethods() {
  return new Promise(function(resolve, reject) {
    var service = new Worldline.PaymentService(deviceAPIRequest);
    service.getIbpPaymentMethods().send();
  })
    .then(function(response) {})
    .catch(function(err) {});
}

CORS properties

CORS is managed by configuration at the server side of Worldline Online Payment Acceptance, in order to accept payment requests from one or several merchant checkout pages.

  1. Access-Control-Allow-Headers – Origin, Content-Type and Accept
  2. Access-Control-Allow-Methods - POST
  3. Content-Type - application/json

The preflight request to the Worldline API will first check if these headers are allowed or not. If yes, then it will proceed with the POST call. If invalid headers or merchant base URLs found, the request is declined.

Back to top