Как исправить ошибку javascript braintree"t.getVersion не является функцией" в последней версии

Question

Получаю ошибку TypeError: t.getVersion is not a function, Я искал только решение я нашел об использовании обновленной версии Брэйнтри-сети здесь. В моем случае я использую3.60.0, но все равно получаю сообщение об ошибке, когда добавляю 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

Я начинал, пытаясь реализовать простой пример Drop In, и столкнулся с той же проблемой! Я знаю, что вы разместили вопрос некоторое время назад, но это может помочь любому, кто столкнется с этим вопросом, как и я.

Ключ к разгадке был ответом @Simon_Weaver на вопрос Braintree PayPal checkout: "e.client.getVersion не является функцией", и эти две строчки...

Оказывается, экземпляр НЕ является клиентским объектом. Это объект Dropin;-) Он создает своего собственного клиента, хранящегося в частной собственности _client.

Вместо этого мне нужно было сделать braintree.client.create(...), чтобы получить настоящий объект Client.

К сожалению, @Simon_Weaver не предоставил надлежащего примера и "обманул".

По сути, вам нужно создать отдельный clientInstance и передав это при создании dataCollector вместо 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();
            });
        });
    });
});

Я также переместил инициализацию dataCollector вне обработчика отправки формы - тогда не нужно делать все это.

*** Это не было проверено, но должно помочь вам двигаться в правильном направлении ***

Answer 2

Может быть, немного поздно для этого... но для Drop-In UI должно быть достаточно включения объекта dataCollector в ваш вызов create и последующего получения данных устройства из полезной нагрузки:

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