Braintree-web: Collecting deviceData

[JulianoRodrigues]

General information

• SDK version: 3.35.0
• Environment: Sandbox
• Browser and OS : Version 67.0.3396.99 (Official Build) (64-bit) on Mac 10.12.6

Issue description

I'm trying to collect the device data and send it to our server-side but weren't able to do that.

We are using all the information in the documentation and we're still seeing the deviceData as false in braintree.

The team send us this:

It looks like, in your client side snippet, you are posting the card data to your server before instantiating your dataCollector. In our example documentation, you can see that the dataCollector stores the value of the data collection, and passes it into the form (or to the server) at the same time as the payment method information is POSTed. The logic itself looks correct, it just looks like you need to move it around a little bit to ensure it's collected before POSTing back to your server.

what am i doing wrong?

api.getToken(info).then(function (info) {
                   braintree.client.create({
                        authorization: info
                    }).then(function (clientInstance) {
                        creditCard = api.getCreditCard();
                        creditCard.options = {
                            validate: false
                        };
                        data = {
                            creditCard: creditCard
                        };
                        clientInstance.request({
                            endpoint: 'payment_methods/credit_cards',
                            method: 'post',
                            data: data
                        }).then(function (response) {
                            api.setNonce(response.creditCards[0].nonce);
                            deferred.resolve(response.creditCards[0].nonce);
                        }).catch(function (requestErr) {
                            if (requestErr) {
                                throw new Error(requestErr);
                            }
                        });
                        return braintree.dataCollector.create({
                            client: clientInstance,
                            kount: true
                        }).then(function (dataCollectorInstance) {
                            dataHolder.paymentData.deviceData = dataCollectorInstance.deviceData;
                            dataCollectorInstance.teardown();
                        });
                    }).catch(function () {
                        console.log('Error: Missing Payment Hub Provider Javascript File Import');
                    });
                });

[Epreuve]

Hey @JulianoRodrigues
We suspect that the dataCollectorInstance is being torn down quicker than it can send the necessary data.

You're getting the dataCollectorInstance.deviceData string since it is generated rather quick, but the actual data it correlates to isn't allowed to finish sending, and so there's no data that ties back to the deviceData string generated by the component resulting in a false capture.

As a test, can you comment or remove the call to dataCollectorInstance.teardown() and test again? The idea is that this would allow the data to send completely. If this works, moving the call to teardown to a later stage in your checkout might be ideal. If not, we can dig a bit more.

[crookedneighbor]

I wouldn't even tear down the component unless you have a single page app, and even then, only tear it down when you need to leave the checkout page.

[crookedneighbor]

Going to close this, because I think this solves your issue.

[JulianoRodrigues]

@Epreuve and @crookedneighbor thanks for the help, I deleted the dataCollectorInstance.teardown() and I was able to collect device data in the server-side.
Thanks for the help.