How to fix braintree javascript error "t.getVersion is not a function" in latest version

Question

Am getting error TypeError: t.getVersion is not a function, i have searched only the solution i found was about using the upgraded version of braintree-web here. In my case am using 3.60.0, but still get the error when i add braintree.dataCollector.create.

https://js.braintreegateway.com/web/3.60.0/js/client.min.js

https://js.braintreegateway.com/web/3.60.0/js/data-collector.min.js

https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js

    var form = document.querySelector('#payment-form');
    var client_token = "<?php echo $clientToken;?>";

    braintree.dropin.create({
      authorization: client_token,
      container: '#dropin-container',
      paypal: {
        flow: 'vault'
      }
    }, function (createErr, instance) {
      if (createErr) {
        console.log('Create Error', createErr);
        return;
      }

          form.addEventListener('submit', function (event) {
            event.preventDefault();
            
              braintree.dataCollector.create({
                client: instance,
                paypal: true
              }, function (err, dataCollectorInstance) {
                if (err) {
                  return;
                }
                 document.querySelector('#device').value =  dataCollectorInstance.deviceData;
              });

            instance.requestPaymentMethod(function (err, payload) {
              if (err) {
                console.log('Request Payment Method Error', err);
                return;
              }

              // Add the nonce to the form and submit
              document.querySelector('#nonce').value = payload.nonce;
              form.submit();
            });
          });
      
    });

Answer 1

I was starting out trying to get the simple Drop In example implemented and ran in to the same issue! I know you posted the question a while ago but this may help anyone else coming across this question, as I did .

The clue was @Simon_Weaver's answer to the question Braintree PayPal checkout component throwing “e.client.getVersion is not a function” and these 2 little lines...

Turns out instance is NOT a Client object. It is a Dropin object ;-) It creates its own client stored on _client private property.

I needed instead to do braintree.client.create(...) to get a true Client object.

Unfortunately @Simon_Weaver didn't provide a proper example and "cheated".

In essence, you'll need to create a separate clientInstance and passing that when creating a dataCollector instead of instance

var form = document.querySelector('#payment-form');
var client_token = "<?php echo $clientToken;?>";

braintree.client.create({
    authorization: client_token
}, function(err, clientInstance) { // this is the client instance we need when creating a `dataCollector`

    braintree.dataCollector.create({
        client: clientInstance, // `clientInstance` not dropIn `instance`
        paypal: true
    }, function (err, dataCollectorInstance) {
        if (err) {
          return;
        }
        document.querySelector('#device').value =  dataCollectorInstance.deviceData;
    });

    /* ... rest of the `braintree.dropin.create` 
       just without the above `braintree.dataCollector.create` stuff in the submit handler...
    */
          
    braintree.dropin.create({
        authorization: client_token,
        container: '#dropin-container',
        paypal: {
            flow: 'vault'
        }
    }, function (createErr, instance) {
        if (createErr) {
            console.log('Create Error', createErr);
            return;
        }
    
        form.addEventListener('submit', function (event) {
            event.preventDefault();
          
            instance.requestPaymentMethod(function (err, payload) {
                if (err) {
                  console.log('Request Payment Method Error', err);
                  return;
                }
    
                // Add the nonce to the form and submit
                document.querySelector('#nonce').value = payload.nonce;
                form.submit();
            });
        });
    });
});

I have also moved the initialisation of the dataCollector out of the form submit handler - no need to do it all then.

*** This hasn't been tested but should get you going in the right direction ***

Answer 2

Maybe a bit late for this one... but for the Drop-In UI it should be enough including a dataCollector object in your create call and getting the device data from the payload afterwards:

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