Web SDK Demo Application

On this page

You can use the Web SDK demo application to understand how the Web SDK communicates with the 3DS Server through different API requests and responses. It shows the internal communication that happens when a merchant website sends a request to the 3DS Server to process a transaction and the further steps in the transaction authentication process. You can review the request and response body to review the information sent and received by the Web SDK.

The Web SDK demo application is interactive and easy to use. Each page on the demo application provides a high-level overview of the method selected for the demo. Go ahead and add or edit the field values to simulate different authentication (frictionless and challenge) and error scenarios.

Prerequisite

Install Node.js and npm on the computer where you want to install and run the demo application.

Installing the Web SDK demo application

You can install the demo application on any computer.

1. Download the Web SDK Demo Application .zip file.

   info_outline

   note

   We often update the demo application to bring parity with the features that are available in the 3DS Web SDK. We suggest that you bookmark this page and download the latest ZIP file whenever you want to test a new feature available in the Web SDK.

   Demo app version and what’s new in this version

2. Extract the .zip file into a directory.

3. In a command-line interface, cd into the directory where you unzipped the file.

4. Run the following command: npm install && npm run start

5. To view the Web SDK demo application, open open_in_newhttps://localhost:3000Link opens new window.

   For best performance, use either Chrome or Firefox browsers to run the demo application.

Using the demo application

The Web SDK demo application is interactive and easy to use. Each page on the demo application also describes the method and the background information related to the method.

1. Set the authentication credentials before you start interacting with the Web SDK demo application.

   • Base URL:open_in_newhttps://uat.gw.fraud.eu.elavonaws.com/3ds2Link opens new window

   • To authenticate, you can use one of the following options:

     • Basic Auth: The Merchant Alias and Secret Key field values are auto-populated in the demo app.

     • JWT Auth: You must first send a request to the 3DS Server to retrieve the JWT token and then use the token field value in the JWT token field. Note that the token expires in 10 minutes. View authentication for more details

   • Sandbox URL: GET open_in_newhttps://uat.gw.fraud.eu.elavonaws.com/tokenLink opens new window

     • Username: demoUser

     • Password: d2da67e1-b9e3-4edf-9bea-b8a850e42fec

     These credentials are only for the demo app and will not work in a production environment. If you have test credentials available, you can also use them for either of the authentication methods.

   info_outline

   note

   The Basic Auth method is available only in the demo app for ease of authentication. The Web SDK supports only the JWT authentication.

2. The All-in-one workflow of the Web SDK can handle the complete 3D Secure check by itself. To use this workflow, select SDK Methods > All. For sample requests and responses, refer to the Using the all-in-one workflow page.

   1. Enter values in the request parameters.

   2. After you fill in the parameters, the Web SDK automatically creates a request body.

      In the demo app, you can simulate different scenarios using a specific acctNumber or a purchaseAmount. However, you must still enter data in all required fields. For test card numbers, refer to the 3DS 2 Test Cards section on the Test your integration page.

   3. Validate the request body and click Test API Call.

      The Web SDK sends the request to the 3DS Server who sends it to an ACS simulator (issuer) for the demo. The simulator (issuer) validates the request body and returns the response.

   4. (Optional) Validate the response body.

   5. To test another authentication scenario, repeat substeps 1 through 3.

3. To test individual API methods, we recommend that you run them in the following order: Lookup, Device Fingerprint, Authenticate, and Challenge (if required). Review the following points before you test these methods:

   • If you don’t want to check the 3D Secure version the card supports, you can skip the lookup() method (optional). If you skip the lookup() method, you cannot call the deviceFingerprint() method too because the request parameters depend on some response parameters of the lookup() method.

   • deviceFingerprint() is also an optional method. In a production environment, the device data fetched through this method provides additional contextual information to the issuer, which increases the chances of a frictionless authentication.

   • The request parameters of the challenge() method depend on the response of the authenticate() method. Therefore, you must run the authenticate() method before the challenge() method. For example, if the issueChallenge field is returned as true in the authenticate response, you must run the challenge() method. In a production environment, the issuer decides the type and number of challenges displayed to the cardholder. However, in the demo app, Elavon provides simulated challenge pages for 3DS 1 and 3DS 2 that you can use to test different challenge responses.

   For sample requests and responses of these API methods, see the Using the toolkit workflow page.

What’s new in this version of the Web SDK demo application

Demo application version: 142

First version available for download from the developer portal. This version is at par with the Web SDK version 1.2.0 available in production for download. For Web SDK installation details, refer to the the Web SDK installation instructions.

Related topics

• Use the all-in-one workflow of the SDK

• Use the toolkit workflow of the SDK