3DS 2.0 JavaScript utilities
These utilities are helper functions to get 3DS 2.0 integrated on to your webpage.
Requirements
3DS 2.0 Back-end integration with Adyen: https://docs.adyen.com/classic-integration/3d-secure-2-classic-integration/browser-based-integration/
Installation
Option A: Clone the repo and import functions directly through UMD / ES2015
;;;;;
Option B: Build the file, link to it and use ThreeDS2Utils on the global scope
Install the development dependencies:
npm install
Build the file:
npm run build
Embed it on your page:
<script type="text/javascript" src="YOUR_PATH/threeds2-js-utils.js">
Functionality can then be accessed via:
windowThreedDS2Utils
e.g.
windowThreedDS2Utils
Usage
N.B. The following code snippets are based on installation via Approach 1:
Gathering browser information
Collects available frontend browser info and store it in the properties dictated by EMVCo specification. EMV® 3-D Secure Protocol and Core Functions Specification
/** * @function collectBrowserInfo * @returns */const browserInfo = ;
This returns an object with the following keys:
screenWidth screenHeight colorDepth userAgent timeZoneOffset language javaEnabled
Base64Url encoding and decoding
base64Urlencode
returns a base64URL encoded string
base64Urldecode
returns a base64URL decoded string
/** * @function base64Url * @param { String } - string to be encoded/decoded * @returns */const base64URLencodedString = base64Url;const base64URLdecodedString = base64Url
Creating an iframe
Creates an iframe
of specified size element with an onload
listener and adds the iframe
to the passed container element
/** * @function createIframe * @param container * @param name * @param width * @param height * @param callback { Function } - optional, the callback to fire after the iframe loads content * * @returns */const iframe = ;
Creating a form
Creates a form
element with a target
attribute
/** * @function createForm * @param name * @param action * @param target * @param inputName * @param inputValue * * @returns */ const form = ;
Validating and retrieving challenge window sizes
configvalidateChallengeWindowSize
ensures that the passed string is one of values that the ACS expects, else returns '01'
configgetChallengeWindowSize
returns an array of pixel values based on the validated challenge window size e.g. ['250px', '400px']
/** * @function config.validateChallengeWindowSize * @param sizeStr - a size string to confirm as valid * @returns */const validWindowSize = config;
/** * @function config.getChallengeWindowSize * @param sizeStr - a size string to confirm as valid * @returns */const windowSizesArray = config;
Documentation
3DS 2.0 Helper Functions Implementation
Support
You can open tickets for any issues with the helper functions. In case of specific problems with your account or generic 3DS 2.0 issues and questions, please contact support@adyen.com.
License
MIT license. For more information, see the LICENSE file.