Tools/
Premium Fraud Management Tools/
Client-side

Client-Side Implementation

Use this page to collect device data on your checkout page with the Braintree JavaScript v4 SDK, so Premium Fraud Management Tools can evaluate transactions for fraud risk.

Collect device dataAnchorIcon

To help detect fraud, use dataCollector to collect information about a customer's device on your checkout page.

PrerequisitesAnchorIcon

  • A Braintree client authorization: a tokenization key or client token, to pass to braintree.client.create().
  • The Braintree JavaScript v4 client and Data Collector script files loaded on your checkout page.

CustomAnchorIcon

If you are using script tags to load files, make sure to include:

  1. HTML
<script src="https://js.braintreegateway.com/web/4.0.0-alpha.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/4.0.0-alpha.0/js/data-collector.min.js"></script>

To collect device data, create a client and a dataCollector instance with some options. You can use the same client as you are using for other components, such as hostedFields or paypal-checkout-v6.

  1. Async/Await
async function collectDeviceData() {
  try {
    const clientInstance = await braintree.client.create({
      authorization: 'CLIENT-AUTHORIZATION'
    });
    // Creation of any other components...

    const dataCollectorInstance = await braintree.dataCollector.create({
      client: clientInstance
    });
    // At this point, you should access the dataCollectorInstance.deviceData value and provide it
    // to your server, for example by injecting it into your form as a hidden input.
    const deviceData = dataCollectorInstance.deviceData;
  } catch (err) {
    // Handle error in creation of components
  }
}

The data returned will have a deviceData string value. It is up to you to provide this value to your server. A common mechanism for this is to inject the device data value into your form as a hidden input.

  1. Async/Await
async function collectDeviceData() {
  try {
    const dataCollectorInstance = await braintree.dataCollector.create({
      client: clientInstance
    });

    const form = document.getElementById('my-form-id');
    let deviceDataInput = form['device_data'];

    if (deviceDataInput == null) {
      deviceDataInput = document.createElement('input');
      deviceDataInput.name = 'device_data';
      deviceDataInput.type = 'hidden';
      form.appendChild(deviceDataInput);
    }

    deviceDataInput.value = dataCollectorInstance.deviceData;
  } catch (err) {
    // Handle error in data collector creation
  }
}

Troubleshoot the fraudnet loading race conditionAnchorIcon

If you're running into a race condition with using a CMID (client metadata ID) before fraudnet has finished loading, you can pass a cb1 callback name option to dataCollector.create(). Define a function on the global window object and it will be invoked when fraudnet has finished initializing so you can then safely use the CMID.

PayPalAnchorIcon

If you're also accepting PayPal using the Vault flow, you can simultaneously collect that device data by using the dataCollector. See the PayPal Vault guide for details.