如何在最新版本中修复 Braintree javascript 错误“t.getVersion 不是函数”

Question

我收到错误TypeError: t.getVersion is not a function，我只搜索了我找到的解决方案是关于使用升级版的braintree-web here。在我的情况下，我使用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's answer 到问题Braintree PayPal checkout component throwing “e.client.getVersion is not a function” 和这两条小线......

原来实例不是客户端对象。它是一个 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 的初始化从表单提交处理程序中移出 - 无需全部执行。

*** 这还没有经过测试，但应该能让你朝着正确的方向前进 ***