Last Updated: 08 October 2024 | Change Log

Device Data Collection (DDC)

The card issuer uses Device Data Collection (DDC) to fingerprint the customer's device.

Along with the risk data in the authentication request, it's used to decide if a challenge is needed or if the authentication can be frictionless (no challenge displayed to your customer).

Important

Invoke this process immediately upon the customer providing their payment credentials. This ensures that Device Data Collection processes asynchronously behind the scenes, as the customer completes the remaining checkout process. If a customer changes their card number after the Device Data Collection process is started or completed, re-execute the entire DDC process.

Device data initialization

POST your device data initialization request to the 3ds:deviceDataInitialize action link.

This request creates a JSON Web Token (JWT) that is used as part of the Device Data Collection (DDC) form. The DDC form also requires the first six digits of your customer's card number (BIN). The BIN can be returned if a token resource is provided, see JWT + BIN (token) request.

For consistency of integration you can also provide the full card number JWT + BIN (card) or JWT + BIN (Network Token). It will be truncated to become the BIN in the response.

Device data initialization example request

application/vnd.worldpay.verifications.customers-v3.hal+json

Initialize the device data collection without a payment instrument. Only the JWT is returned.

{
  "transactionReference": "Memory265-13/08/1876",
  "merchant": {
    "entity": "default"
  }
}

transactionReferencestring[ 1 .. 64 ] characters^[-A-Za-z0-9_!@#$%()*=.:;?\[\]{}~`/+]*$required

A unique reference for authentication. For example, e-commerce order code. Use the same transactionReference across all 3 potential request types (deviceDataInitialization, authentication, verification).

merchantobjectrequired

An object that contains information about the merchant and API level configuration.

entitystring[ 1 .. 64 ] characters^[A-Za-z0-9 ]*$required

Used to route the request in Access Worldpay, created as part of on-boarding.

paymentInstrumentany

Device data initialization response

Best Practice

Access Worldpay returns a WP-CorrelationId in the headers of service responses. We highly recommend you log this. The WP-CorrelationId is used by us to examine individual service requests.

To understand what these outcomes mean and how to reproduce them for testing purposes see 3DS testing

JWT and BIN returned

{
    "outcome": "initialized",
    "transactionReference": "Memory265-13/08/1876",
    "deviceDataCollection": {
        "jwt": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiJPcmdVbml0IiwiaXNzIjoiYXBpSWQiLCJleHAiOjE1NjI5MjMzNDYsImlhdCI6MTU2MjkyMzQwNiwianRpIjoiYTAzMWVhOGEtN2E0Zi00YTQwLWI1NjMtOTUzMzYzMzVhZGNmIn0.0IK74OIXBxFsxqeOURJz1TFnz14ZTbFJTdTWo9cHUJQ",
        "url": "https://ddcUrl.example.com",
        "bin": "555555"
    },
    "_links": {
        "3ds:authenticate": {
            "href": "https://try.access.worldpay.com/verifications/customers/3ds/authentication"
        },
        "curies": [{
            "href": "https://try.access.worldpay.com/rels/verifications/customers/3ds/{rel}",
            "templated": true,
            "name": "3ds"
        }]
    }
}

The DeviceDataCollection object is used for the next step.

jwtstring[ 1 .. 2048 ] charactersrequired

A digitally signed token that contains additional details required for DDC.

urlstring[ 1 .. 2048 ] charactersrequired

A POST action on the DDC form. Used to redirect to the issuers DDC page.

binstring= 6 characters

First six digits of the card number (Bank Identification Number), used as part of DDC. Returned if a token resource, network payment token or card number is included in the request.

Note

In case of an error, you can get further information in our error reference.

Device Data Collection (DDC)

The device data process for React Native uses:

a hidden WebView
an HTML page responsible for interfacing the HTML/JavaScript layer with the React Native layer
an iframe, embedded in the HTML page
a secondary HTML page, loaded via the iframe, and used to kickstart the DDC

Install and link the React Native WebView component in your application

# 1. Install dependency
npm install react-native-webview

# 2. Link dependency using your preferred method
react-native link react-native-webview

# 3. Ee-install pods
cd ios
pod install

Add a hidden WebView in your React Native application with the source pointing to the HTML page created in the next step. Add also an event listener for the message event which will be used to catch messages sent from the HTML layer to the React Native layer.

React Native

<WebView
  source={{ uri: 'replace-this-with-the-url-of-the-html-page-that-wraps-the-iframe' }}
  onMessage={(event) => {
    // deserialising and extracting JSON data from the event
    console.info(JSON.parse(event.nativeEvent.data));
  }}
  containerStyle={{ position: 'absolute', width: 0, height: 0 }}
/>

Create and host the HTML page which will be used to interface the HTML/JavaScript layer with the React Native layer.

HTML

<html lang="en">
<head></head>
<body>
</body>
</html>

Add a script to the HTML page to relay to the React Native layer messages received by postMessage() in the HTML page.

JavaScript

<script language="JavaScript">
window.onmessage = (event) => {
  // for Try: https://centinelapistag.cardinalcommerce.com
  // for Production: https://centinelapi.cardinalcommerce.com
  const allowedOrigin = '...';

  // Always verify that the message received is from the expected origin
  if (event.origin !== allowedOrigin) {
    return;
  }

  // the event data must be serialised into a string
  window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
};
</script>

Add an iframe to the HTML page and set the src attribute to the URL of the page that will POST the DDC form. This URL should contain the following query string parameters: deviceDataCollection.jwt, deviceDataCollection.bin and deviceDataCollection.url. Those will be used in the DDC form.

HTML

<iframe src="replace-this-with-the-url-of-your-page-that-posts-the-ddc-form"></iframe>

Create and host the secondary HTML page that POSTs the DDC form.

HTML

<html>
<body>
<!-- Using your preferred programming language, set the 'action' attribute with the value of the query string parameter containing the 'deviceDataCollection.url' from the device data initialization response -->
<form id="collectionForm" name="devicedata" method="POST" action="https://ddcUrl.example.com">

    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.bin' from the device data initialization response -->
    <input type="hidden" name="Bin" value="555555" />

    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.jwt' from the device data initialization response -->
    <input type="hidden" name="JWT" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiJPcmdVbml0IiwiaXNzIjoiYXBpSWQiLCJleHAiOjE1NjI5MjMzNDYsImlhdCI6MTU2MjkyMzQwNiwianRpIjoiYTAzMWVhOGEtN2E0Zi00YTQwLWI1NjMtOTUzMzYzMzVhZGNmIn0.0IK74OIXBxFsxqeOURJz1TFnz14ZTbFJTdTWo9cHUJQ" />

</form>

<script>
  window.onload = function() {
    document.getElementById('collectionForm').submit();
  }
</script>
</body>
</html>

Test device data form

The form below allows you to submit the 3DS device data details provided in the API response. You then receive the sessionId/collectionReference, back in the postMessage, for use in the authentication request. This is useful if using tools such as postman/insomnia to test your integration.

Device Data Collection postMessage

Once the DDC form is submitted and is successfully sent to the card issuer, you are notified via a postMessage event.

For security, verify the sender's identity using the postMessage origin property as detailed here.

Environment	Origin
Try	https://centinelapistag.cardinalcommerce.com
Production	https://centinelapi.cardinalcommerce.com

An example postMessage response:

postmessage

{
    "MessageType": "profile.completed",
    "SessionId": "0_3XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX6b5",
    "Status": true
}

Key	Value
`messageType`	`profile.completed`
`SessionId`	UUID, not present or `undefined`
`Status`	`true` - Use the `SessionId` value in `deviceData.collectionReference` as part of the Authentication request `false` - `SessionId` is empty. Either retry DDC or send the authentication request without the `deviceData.collectionReference`.

The DDC call typically takes 1-2 seconds. This depends on the latency between the customer's device, the Cardinal servers and, in part, the type of Device Data Collection performed by the different issuers. The 3DS specification has a maximum response time of 10 seconds.

Note

If no postMessage is provided either retry DDC or send the authentication request without the deviceData.collectionReference. We highly recommend providing device data (e.g. browserScreenHeight) in the authentication request as well. This will maximize authentication rates in the case of DDC failure.

Full integration example code

# 1. Install dependency
npm install react-native-webview

# 2. Link dependency using your preferred method
react-native link react-native-webview

# 3. Ee-install pods
cd ios
pod install

Next steps

Authentication

Device Data Collection (DDC)

Device data initialization

Device data initialization example request

Device data initialization response

Device Data Collection (DDC)

Test device data form

Device Data Collection postMessage

Full integration example code

Do you like our page?