Premium Fraud Management Tools
Client-Side Implementation
Collecting device data
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:
Custom
If you are using script tags to load files, make sure to include:
- 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.
- Callbacks
- 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.
- Callbacks
- 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 condition
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-in
Collect device data with the Drop-in UI by including a dataCollector object in your create call:
- Callbacks
- 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.
- Callbacks
- 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;
});
});
});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.
PayPal
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.