Tools/
Premium Fraud Management Tools/
Client-side

Client-Side Implementation

Collecting device dataAnchorIcon

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

If you are using the Drop-in UI, you can integrate using the Drop-in integration steps. Otherwise, use the following integration method:

CustomAnchorIcon

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

  1. HTML
<script src="https://js.braintreegateway.com/web/3.129.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.129.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.

  1. Callbacks
  2. Promises
braintree.client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
  // Creation of any other components...

  braintree.dataCollector.create({
    client: clientInstance
  }, function (err, dataCollectorInstance) {
    if (err) {
      // Handle error in creation of data collector
      return;
    }
    // At this point, you should access the dataCollectorInstance.deviceData value and provide it
    // to your server, e.g. by injecting it into your form as a hidden input.
    var deviceData = dataCollectorInstance.deviceData;
  });
});

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. Callbacks
  2. Promises
// Inside of your client create callback...
braintree.dataCollector.create({
  client: clientInstance
}, function (err, dataCollectorInstance) {
  if (err) {
    // Handle error in data collector creation
    return;
  }
  var form = document.getElementById('my-form-id');
  var 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;
});

Troubleshooting 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.

Drop-inAnchorIcon

Collect device data with the Drop-in UI by including a dataCollector object in your create call:

  1. Callbacks
  2. Promises
braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  dataCollector: true
}, function (createErr, instance) {
  if (createErr) {
    // Handle error in Drop-in creation
    return;
  }

  button.addEventListener('click', function () {
    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
      // Submit payload.nonce and payload.deviceData to your server
    });
  });
});

When requestPaymentMethod is called, the response will include deviceData to send to your server. A common mechanism for this is to inject the device data value into your form as a hidden input.

  1. Callbacks
  2. Promises
var form = document.getElementById('my-form-id');
var deviceDataInput = form['device_data'];
var nonceInput = form['payment_method_nonce'];

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  dataCollector: true
}, function (createErr, instance) {
  if (deviceDataInput == null) {
    deviceDataInput = document.createElement('input');
    deviceDataInput.name = 'device_data';
    deviceDataInput.type = 'hidden';
    form.appendChild(deviceDataInput);
  }

  button.addEventListener('click', function () {
    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
      deviceDataInput.value = payload.deviceData;
      nonceInput.value = payload.nonce;
    });
  });
});

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.