Problems with Braintree Javascript integration - braintree.Environment.Sandbox undefined error?

Question

I'm trying to integrate a Braintree payment solution using Javascript & Node JS.

As per the Braintree documentation, I have the following in my html:

            <div id="panel-payment">
                <div id="payment-form"></div>
                <input id="btn-checkout" type="submit" value="Process Order">
            </div>
            <script>
            $(document).ready(function(){

                console.log(braintree); <---- defined AOK
                console.log(braintree.Environment); <---- undefined
                console.log(braintree.Environment.Sandbox); <---- undefined

                var clientToken = "...";
                braintree.setup(clientToken, "dropin", {
                    container: $("#payment-form")
                });
            });
            </script>

I can't get the environment variable, yet the braintree object seems to instantiate fine? Anyone have any ideas?

The braintree object returns:

Object {api: Object, cse: Object, paypal: Object, dropin: Object, Form: Object…}

I also get the dreaded "Unable to find valid container" when I call the braintree.setup() function, even though the container value $("#payment-form") is valid value and I am calling the setup function when the HTML has loaded..

Answer 1

The Environment variable is only available in the NodeJS package. See here.

For the client side in javascript your need a valid token generated by your server. So you need a dedicated route delivering a token with the Braintree node package as described here.

And for your container problem try to pass only the id of the div to braintree, not a jQuery element.

braintree.setup(clientToken, "dropin", {
   container: "payment-form"
});