threedsecure2-library.js

Payvision @payvision/threedsecure2-library.js is a JavaScript library used to collect the customer’s browser data and render the authentication challenge (if applicable) within the Merchant’s website to complete Payvision 3D Secure 2.0 Strong Customer Authentication process.

Installation

Install from NPM package

Install 3DS2 Secure library npm package from Payvision repository:

# using npm
npm i @payvision/threedsecure2-library

# using yarn
yarn add @payvision/threedsecure2-library

Install from Payvision CDN

You have two options to install the library from the CDN, choose the one you like:

• Import the resource as html script tag

  Import the library from Payvision CDN:

  <script
    src="https://cdn.payvision.com/threedsecure2/1.1.3/threedsecure2-library.js"
    integrity="sha384-wrgHcOuaf7c/l1wU5O9vVRuTLY9X3sUoDSsiUhdOKsfNqBA7oU4WWcqCw+BEOUWm"
    crossorigin="anonymous"
  ></script>
  

• Install the package from a remote gzipped tarball

  Install the library from Payvision CDN:

  # using npm
  yarn add http://cdn.payvision.com/threedsecure2/1.1.3/threedsecure2-library.tgz
  
  # using yarn
  yarn add http://cdn.payvision.com/threedsecure2/1.1.3/threedsecure2-library.tgz
  

Note that:

Use corresponding integrity "sha384-wrgHcOuaf7c/l1wU5O9vVRuTLY9X3sUoDSsiUhdOKsfNqBA7oU4WWcqCw+BEOUWm" to ensure subresource integrity.

Use of library

If using NPM, import the library:

import ThreeDSecure2 from '@payvision/threedsecure2-library'

Create ThreeDSecure2 redirection object (mandatory):

const redirect = {
  method: 'POST',
  url: 'https://merchant.com/returnUrl',
  fields: {
    ...
  },
}

Create ThreeDSecure2 options object (optional):

const options = {
  sandbox: true,
}

Create an instance of ThreeDSecure2:

const threeDSecure = new ThreeDSecure2(options)

Call authenticate method from object instance:

const response = await threeDSecure.authenticate(redirect)

Get the payment status using the response.

Example

Firstly, you must send a Payment request to Acehub Payments endpoint. If 3DS 2.0 authentication is requested, the response object returned contains an object filed named "redirection". Use this object create:

import ThreeDSecure2 from '@payvision/threedsecure2-library'

// Submit your payment request to Acehub
const acehubResponse = yourAcehubProxy.submitPayment(...)
const redirect = acehubResponse.body.redirect

Acehub response redirect object looks like the following object:

const redirect = {
  method: 'POST',
  url: 'https://merchant.com/returnUrl',
  fields: {
    ...
  },
}

Set your options object:

const options = {
  sandbox: true,
}

Create a @payvision/threedsecure2-library instance and invoke authenticate method to trigger 3DS 2.0 process:

const threeDSecure = new ThreeDSecure2(options)

const response = await threeDSecure.authenticate(redirect)

Finally, use the response variable to create and submit the form.

Options

Field	Type	Description	Default
sandbox	boolean	Staging true, Production false	false

Response object fields

Field	Type	Description
method	string	HTTP method: GET/POST...
url	string	Merchant return url used after authentication
fields	object	Returned from Acehub Payment request. Within this object is included the payment Id

Available methods

Method	Parameters	Description
authenticate()	Response object fields	Starts authentication process

Supported browsers

IE / Edge	Firefox	Chrome	Safari	iOS Safari Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Copyright

Payvision © 2020