Browser Sample App 6.4

Owned by Pavlo Lysov
Last updated: Dec 18, 2020
2 min read

Overview

The sample web app demonstrates the recommended way of integrating the uSDK as well as invoking its methods. The application requires Browser uSDK version 6.4, you can download the latest release from the corresponding release page.

The Release

Download link

3ds-samples-web-app-6.4.77-rel.6.zip

Version

6.4.77-rel.6

Last updated at

Dec 17, 2020

Prerequisites

Basic HTML/Javascript knowledge

This guide assumes that the reader has a basic knowledge of HTML/Javascript and can author a simple web page using the technologies.

License Key

A valid license key needs to be obtained from mSIGNIA. This key will need to be passed in the sample application.

The Backend application

It is required to run a merchant backend (server-side) application in order to facilitate the browser sample application. The backend will be responsible to call a 3DS Server that performs the actual 3DS transactions.

mSIGNIA provides a sample merchant backend application to use alongside the browser sample application, click the link to read more about it.

A merchant backend should be up and running, the sample web app will contact the backend application at runtime.

Configuring the Sample App

First, the uSDK for the browser has to be obtained and stored on a local disk. The most recent version can be downloaded here.

Referencing the uSDK

Next, open the downloaded .html file in a source code editor, find the following line:

<script src="usdk-6.4.XX.js"></script>

and modify the src attribute to point to the actual .js file of the uSDK downloaded.

Configuring the App

Scroll to the beginning of <script> section, find the following lines, and supply the values for the variables:

const licenseKey = "";

  • Use the license key obtained from mSIGNIA administrators for the licenseKey variable.

All other configuration properties are pre-configured to use the Customer Testing Platform, so no further configuration is needed.

If another backend is used, make sure to specify its address in the text field in the application.

It is recommended to launch the application against the Customer Testing Platform to see how the whole implementation works. It can then be changed to use a custom backend or 3DS server.

Running the Sample App

Just drag and drop the .html file in a browser to run the app. At first, the app will initialize the uSDK and make the “Perform Transaction” button available. Once enabled, the button can be clicked to trigger a fully-featured 3DS browser flow.

If the sample backend is used and is connected to mSIGNIA’s 3DS Server, then a default OTP challenge flow will be conducted by the test ACS to demonstrate a full flow.

In case something does not work as expected, try the following:

  1. Make sure the Customer Testing platform can be accessed.

  2. Double check the licenseKey parameter passed to the uSDK

  3. Open browser developer tools and check for any errors it might have reported

  4. Change usdkLogLevel to be DEBUG to see more low-level details for uSDK progress

Changelog

[6.4.77] - 12/18/2020

  • Updates to support uSDK 6.4.77

[6.4.76] - 11/11/2020

  • Updates to support uSDK 6.4.76

[6.4.4] - 06/30/2020

  • Passes authorization headers properly

[6.4.3] - 06/19/2020

  • Integrates BulmaCSS framework

  • Passes user email in PurchaseInfo