Hosted Fields error: Uncaught TypeError: Cannot read property 'getVersion' of undefined

General information

• SDK version: 3.54.0 - 3.54.2
• Environment: Production
• Browser and OS Chrome 77.0.3865.120 (64 bites) on Windows 10

Issue description

I can only reproduce this error on localhost without a valid ssl cert, but some of my users have the same issue on a production environment with valid ssl.

Chrome console log:

hosted-fields.min.js?_=1571346122777:1 Uncaught TypeError: Cannot read property 'getVersion' of undefined
    at Object.verify (hosted-fields.min.js?_=1571346122777:1)
    at Object.<anonymous> (hosted-fields.min.js?_=1571346122777:1)
    at Object.create (hosted-fields.min.js?_=1571346122777:1)
    at setupComponents (<anonymous>:16:28)
    at init_braintree (<anonymous>:117:19)
    at Object.success (<anonymous>:289:21)
    at c (combined-10.0.19-min.js:2)
    at Object.fireWith [as resolveWith] (combined-10.0.19-min.js:2)
    at l (combined-10.0.19-min.js:2)
    at HTMLScriptElement.i (combined-10.0.19-min.js:2)

In the combined-10.0.19.min.js (jquery part):

k.ajaxTransport("script", function(n) {
        var r, i;
        if (n.crossDomain || n.scriptAttrs)
            return {
                send: function(e, t) {
                    r = k("<script>").attr(n.scriptAttrs || {}).prop({
                        charset: n.scriptCharset,
                        src: n.url
                    }).on("load error", i = function(e) {
                        r.remove(),
                        i = null,
                        e && t("error" === e.type ? 404 : 200, e.type) <--- ERROR LINE
                    }
                    ),
                    E.head.appendChild(r[0])
                },
                abort: function() {
                    i && i()
                }
            }
    });

In the hosted-fields.min.js:

53: [function(e, t, n) {
            "use strict";
            var i = e("./braintree-error")
              , o = e("./promise")
              , s = e("./errors");
            t.exports = {
                verify: function(e) {
                    var t, n, r;
                    return e ? (r = e.name,
                    t = e.client,
                    n = e.authorization,
                    null == t && null == n ? o.reject(new i({
                        type: s.INSTANTIATION_OPTION_REQUIRED.type,
                        code: s.INSTANTIATION_OPTION_REQUIRED.code,
                        message: "options.client is required when instantiating " + r + "."
                    })) : n || "3.54.0" === t.getVersion() ? o.resolve() : o.reject(new i({  <--- ERROR LINE
                        type: s.INCOMPATIBLE_VERSIONS.type,
                        code: s.INCOMPATIBLE_VERSIONS.code,
                        message: "Client (version " + t.getVersion() + ") and " + r + " (version 3.54.0) components must be from the same SDK version."
                    }))) : o.reject(new i({
                        type: s.INVALID_USE_OF_INTERNAL_FUNCTION.type,
                        code: s.INVALID_USE_OF_INTERNAL_FUNCTION.code,
                        message: "Options must be passed to basicComponentVerification function."
                    }))
                }
            }
        }

My script, that’s how i initialize the hosted fields:

var hf, threeDS;
function setupComponents(clientToken) {
	return Promise.all([
		braintree.hostedFields.create({
			authorization: clientToken,						
		},
		fields: {
			number: {
				selector: '#card-number'
			},
			cvv: {
				selector: '#card-cvv'
			},
			expirationMonth: {
				selector: '#card-expiration-month',
				placeholder: 'month',
				select: {
					options: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
				}
			},
			expirationYear: {
				selector: '#card-expiration-year',
				placeholder: 'year',
				select: true
			}
		  }
		}),
	    braintree.threeDSecure.create({
	    	authorization: clientToken,
			version: 2
	    })
	]);
}

function init_braintree(clientToken) {
  var response = setupComponents(clientToken).then(function(instances) {				
  hf = instances[0];				
  threeDS = instances[1];

  $('#button').on('click', function(event) {
    hf.tokenize().then(function(payload) {						
    threeDS.on('lookup-complete', function (data, next) {
      next();
    });
    return threeDS.verifyCard({
	amount: 'amount...',
	nonce: payload.nonce,
	bin: payload.details.bin,
	email: 'email...',
	billingAddress: {}
    })						
}).then(function(payload) {
...

$.getScript("https://js.braintreegateway.com/web/3.54.2/js/client.min.js", function() {
  $.getScript("https://js.braintreegateway.com/web/3.54.2/js/hosted-fields.min.js", function() {
    $.getScript("https://js.braintreegateway.com/web/3.54.2/js/three-d-secure.min.js", function() {		
      var response = init_braintree('client token string comes from php');
    });
  });
});

[crookedneighbor]

The next release will pass back a better error. I’m reasonably certain that the reason you’re getting this error is because you’re passing an empty string instead of your client token, so I’m going to close this.

FYI, since you’re passing authorization to the components directly, you don’t need to download the client script. The components will do that for you. 😃

Another thing, I recommend putting the on('lookup-complete' bit out of the click handler, otherwise you’ll be creating multiple listeners in the case of your customer tokenizing multiple times.

[crookedneighbor]

Fixed with a better error message in v3.55.0