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.
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.
Download the Web SDK Demo Application .zip file.info_outline
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.
Extract the .zip file into a directory.
In a command-line interface, cd into the directory where you unzipped the file.
Run the following command:
npm install && npm run start
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.
Do not use any production card data or other details in 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.
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
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.
The Basic Auth method is available only in the demo app for ease of authentication. The Web SDK supports only the JWT authentication.
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.
Enter values in the request parameters.
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
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.
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.
(Optional) Validate the response body.
To test another authentication scenario, repeat substeps 1 through 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
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
issueChallengefield is returned as
truein 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.
Merchants who operate in the travel industry can send additional travel-related data in the
messageExtension object of the
/authenticate request. For a sample of the
messageExtension object and field details, see message extension elements for the travel industry
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.