Step 2: Create Device Data Collection Iframe and POST event listener

Insert a hidden iframe

In the previous step, the response from the 3DS Init API includes a redirectUrl property. Use this url to create a hidden iframe.

This iframe will allow the 3DS provider to perform device/browser data collection. This is what the html might look like:

<iframe
    src={redirectUrl}
    title="Device Data Collection"
    height="10"
    width="10"
    style="display: none"
></iframe>

Create a POST message event listener

The merchant site needs to know when the device data collection step is complete, and can proceed to call the 3DS Auth API. A message event is received via a window.postMessage from the iframe.

Create an event listener on the page to receive this event. For security purposes, be sure to check the origin of the message is from the Netvalve domain.

const netvalveSandboxUrl = 'https://3dsecuresuite.uat.sandbox-netvalve.com';

const handlePostEvent = (event) => {
  if (event.origin === netvalveSandboxUrl) {
      const data = event.data;
      // Use the data to perform STEP 3 
  }
};

// Be sure to attach the listener
window.addEventListener('message', handlePostEvent, false);

Extract the message data

Inside the event.data is the following object:

{
    result: 'SUCCESS',
    threeDsResponse: {
        status: 'INITIALIZED',
        transID: 'abc,
        providerErrorMessage: ''
    };
};

Expected Properties and Values

result : 'SUCCESS' | 'ERROR' Use this for error handling. *Note - SUCCESS refers to the success of the 3DS initialization step. It does not mean 3DS values have been retrieved.

status : 'INITIALIZED' | 'ERROR' | 'CALLBACK_PROCESSING_ERROR' | 'TIMEOUT'

transID is the required transaction ID for the 3DS Auth API in Step 3.

providerErrorMessage will contain the error message from the 3DS provider, if any.

Proceed to call 3DS Auth API in Step 3

If the data collection step is complete and a transID has been received, call the Auth API.

GO TO STEP 3