javascript - 如何修复最新版本中的 braintree javascript 错误 "t.getVersion is not a function"

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”还有这两条小线……

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.

不幸的是，@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 的初始化从表单提交处理程序中移出 - 然后不需要全部完成。

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