CODEWITHSUNDEEP
node.jsbraintree
Natacha Beaugeais
Natacha Beaugeais

Reputation: 1053

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

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..

Upvotes: 0

Views: 1474

Answers (2)

BladeBarringer
BladeBarringer

Reputation: 807

Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.

@chambo_e's answer is correct regarding the difference between the attributes accessible on the node package versus Braintree.js. The environment attribute is only available on the Braintree node module.

I am guessing that the error you are actually seeing is "Uncaught Unable to find a valid FORM" and that is because your payment forms are not enclosed by a form element. By default, Braintree.js looks for the nearest parent form. 

<form id="checkout" method="post" action="/checkout">
  <div id="panel-payment">
      <div id="payment-form"></div>
      <input id="btn-checkout" type="submit" value="Process Order">
  </div>
</form>

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
  $(document).ready(function(){
    var clientToken = "client token generated form server";
    braintree.setup(clientToken, "dropin", {
      container: $("#payment-form")
    });
  });
</script>

If you'd like it to use a different form, you can specify that in the setup call. See these docs for more details

<div id="dropin-container"></div>
<form id="checkout-form">
  <input type='submit' value='Pay'/>
</form>

<script> 
  braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", {
    container: "dropin-container",
    form: "checkout-form"
  });
</script>

Upvotes: 1

chambo_e
chambo_e

Reputation: 74

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"
});

Upvotes: 2

Related Questions