Premium Fraud Management Tools

Client-Side Implementationanchor

Collecting device dataanchor

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:

Customanchor

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

  1. HTML
<script src="https://js.braintreegateway.com/web/3.87.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.87.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;
});

Drop-inanchor

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;
    });
  });
});
note

If you choose to automatically vault a customer's new payment method, verifications for those payment methods will not include device data when they are evaluated by our Premium Fraud Management Tools. Subsequent transactions can still pass device data.

PayPalanchor

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.

See also


Next Page: Server-side →