Cannot read property 'host' of undefined

[w0ns88]

Hi I am using dropin 1.9.4 sandbox env. in Chrome 64 (Window 10). I inject dropin using a script in my html tag as shown in your docs.

The braintree dropin is correctly added but I get an error when creating it.

Here is my code:

dropinInstance = $window.braintree.dropin.create( { authorization: 'AUTH CLIENT TOKEN', }, function (createErr, instance) { if (createErr) { $log.error('createErr', createErr); return; }

In the callback function I get a create Error:

name: DropInError message: There was an error creating Drop-in. _braintreeWebError: TypeError: Cannot read property 'host' of undefined at https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:14883 at p (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:3:12221) at new a (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:3:11179) at i (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:14817) at https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:4182 at Object.i (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:16262) at Object.create (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:4182) at Object.i (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:4:8887) at Object.create (https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js:1:4182).

Any idea what is the issue.

[crookedneighbor]

Looks like it's blowing up here: https://github.com/braintree/braintree-web/blob/0ae58971df381a59a7aa7b8eca7af378cbbaa19c/src/client/get-configuration.js#L17

Since you have $window, I assume you're using angular. Anything strange in your setup where window.location would not be available?

Also, unrelated, but something I noticed, you have dropinInstance = $window.braintree.dropin.create(. braintree.dropin.create returns undefined when passing a callback, so dropinInstance will be undefined in this case. (It'll be a promise if you don't pass a callback)

[w0ns88]

yes using angular, I will be looking into it now, thanks for the pointers

[crookedneighbor]

I'm going to close this, because I don't think this is an issue with the SDK.

Feel free to comment here if you need further assistance. If you do, it would be great to have a reproducible example. If you cannot put something publicly, feel free to reach out to our support team at https://developers.braintreepayments.com/forms/contact

[w0ns88]

I have found a fix for the above issue. In my code I used a variable called global, which was overriding the global object used from braintree causing conflicts and the above issue.

Perhaps a line of code like so could help in the future:

if(global !== undefined) {
    throw "Some error message;
}

Thanks for your help.

[crookedneighbor]

Makes sense, thanks for the update.

[mtalwatte]

@crookedneighbor I am receiving this same error as well:

Cannot read property 'host' of undefined.

                    createClient({
                        authorization: "<AUTH_CODE>" // authorization token generated from Sandbox Control panel
                    }, function (createErr, clientInstance) {
                    });

though I'm not using a dropin like @w0ns88. This is just trying to create that client object so I can use it to create a usBankAccountInstance in order to receive a nonce. I'm doing this through node js. How do I set that host property before hand? Any suggestion?

[crookedneighbor]

Are you also doing server side rendering?

The module may be used with server side rendering, but any actual create calls should be made on the browser, not on the server.

[mtalwatte]

@crookedneighbor thank you for the prompt response. Please see the below email I just sent to braintree with what I hope to do.

Hi,

_I am currently working with a Braintree Sandbox environment and attempting to use the ACH payment method.

The way Braintree supports ACH seems a bit unique in that it is only supported with the Javascript v3 SDK. When I take a look at that SDK documentation, it appears that it requires both a client and a server (which seem tightly coupled) in order to work. One option you have is to include a dropin js library into an HTML file. The other option is to use the Hosted Fields solution.

Is it possible to omit the UI and only use server ACH API code? Please let me know if this is possible._

[crookedneighbor]

The JS SDK is not meant to be used in that manner. Can you explain your integration where there is no browser? Does your integration use only mobile apps? Or something different?

[crookedneighbor]

@mtalwatte Let's continue this in your support ticket. Please reference this comment so the support reps can direct your ticket to me.

[yadav-anil92]

@crookedneighbor I have same issue. I'm using mobile apps as a client. Send client token to a server and trying to create bankAccountInstance.

let clientToken = request.body.data.token;
  client.create({
    authorization: clientToken
  }, (clientErr, clientInstance) => {
    if (clientErr) {
      return response.status(200).send({ data: { "status": 0, "error": clientErr, "message": 'There was an error creating the Client.' } });
    }
    else {
      console.log(JSON.stringify(clientInstance))
      usBankAccount.create({
        client: clientInstance
      }, (usBankAccountErr, usBankAccountInstance) => {
        if (usBankAccountErr) {
          console.log(JSON.stringify(usBankAccountErr))
          return response.status(200).send({ data: { "status": 0, "error": usBankAccountErr, "message": 'There was an error creating the USBankAccount instance.' } });
        }
        else {
          return response.status(200).send({ data: { "status": 1, "account": JSON.parse(JSON.stringify(usBankAccountInstance)), "message": 'USBankAccount instance.' } });
        }
      });
    }
  });

Please guide me how to integrate ACH payment flow using a mobile application.

[crookedneighbor]

@yadav-anil92 same answer as this comment in the braintree-web repo: https://github.com/braintree/braintree-web/issues/401#issuecomment-584887360

The browser sdk is not meant to be used on the sever. Contact our support team for help using the GraphQL API directly.

[Lingwal]

@crookedneighbor i am not able to get client instance and usBankAccountInstance and it is giving error that not enabled for us -bank.

braintree.client.create({ authorization: client_token }, function (clientErr, clientInstance) { if (clientErr) { console.error('There was an error creating the Client.'); throw clientErr; }

        braintree.usBankAccount.create({
            client: clientInstance
    }, function (usBankAccountErr, usBankAccountInstance) {
                if (usBankAccountErr) {
                    debugger
                    console.error('There was an error creating the USBankAccount instance.');
                    throw usBankAccountErr;
                } else {
                    console.log("test");
                }

        // Use the usBankAccountInstance here.
        // ...

    });

[crookedneighbor]

@Lingwal contact our support team for help: https://help.braintreepayments.com/