Integration of braintree causing issues

Question

I'm working on Braintree for the first time and getting issues in very first step. I'm not able to access dropin functionality and other.. I need help to sort it out.

I followed steps given here : https://developers.braintreepayments.com/javascript+php/start/overview

First step is Javascript Client! - I followed as mentioned, added script

 <script src="https://js.braintreegateway.com/v2/braintree.js"></script>

Then added HTML part

<form id="checkout" method="post" action="/checkout">
  <div id="dropin"></div>
  <input type="submit" value="Pay $10">
</form>

And at last I've added below script in script tag.

braintree.setup("CLIENT_TOKEN_KEY", 'dropin', {
   container: 'checkout'
})

I have checked with Client Token Key obtained from our server.

for next step, I added configurations as mentioned

Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('use_your_merchant_id'); //updated with our merchant id
Braintree_Configuration::publicKey('use_your_public_key'); // updated with our public key
Braintree_Configuration::privateKey('use_your_private_key'); //updated with our private key

then added

$clientToken = Braintree_ClientToken::generate(array(
   "customerId" => $aCustomerId 
));

Now, Issues I'm getting -

When I updated $aCustomerId with our customer id, I got a Fatal Error of "customer_id" field undefined in Braintree_ClientToken. So removed array("customer"=>$aCustomerId) and got the client token..

That client token is used in brantree.setup('TOKEN_KEY','dropin',{container:'checkout'}) and got

Error: Unable to find valid container. -braintree.js(line 18)

I also mentioned once var braintree = Braintree.create("CLIENT_TOKEN_KEY"); above brantree.setup('TOKEN_KEY','dropin',{container:'checkout'}) at that time I've got TypeError: braintree.setup is not a function

I'm trying to sort it out this from last two days, but still I didn't get dropin screen as showed in demo.

Hope for good help..

score 7 · Accepted Answer · edited Mar 30 '15 at 16:22

Place all the scripts after the html / footer section, this will work:

<?php
require_once 'braintree-php-2.30.0/lib/Braintree.php';

Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('-----------');
Braintree_Configuration::publicKey('-----------');
Braintree_Configuration::privateKey('-----------');
if(isset($_POST['submit'])){
    /* process transaction */
    $result = Braintree_Transaction::sale(array(
     'amount' => '234.00',
     'creditCard' => array(
     'number' => '30569309025904',
     'expirationDate' => '05/14'
    )
  ));

if ($result->success) {
  print_r("success!: " . $result->transaction->id);
  } else if ($result->transaction) {
    print_r("Error processing transaction:");
    print_r("\n  code: " . $result->transaction->processorResponseCode);
    print_r("\n  text: " . $result->transaction->processorResponseText);
    } else {
      print_r("Validation errors: \n");
      print_r($result->errors->deepAll());
    }
}

$clientToken = Braintree_ClientToken::generate();

?>

<html>
  <head>
  </head>
  <body>
    <div id="checkout" method="post" action="/checkout">
      <div id="dropin"></div>
      <input data-braintree-name="number" value="4111111111111111">
      <input data-braintree-name="expiration_date" value="10/20">
      <input type="submit" id="submit" value="Pay">
      <div id="paypal-button"></div>
    </div>  

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
  <script>
    braintree.setup("<?php print $clientToken; ?>",  "dropin", { container:
    jQuery("#dropin") ,  form: jQuery("#checkout") , 

    paymentMethodNonceReceived: function (event, nonce) {
      // do something
      }
    });
  </script>

  </body>
</html>

score 5 · Answer 2 · answered Sep 27 '14 at 12:48

I had this problem and solved it by putting the javascript at the end of the page. The alternative would be to enclose it in a document ready test.

The problem occurs because the braintree code tries to find the container as soon as the script is loaded. But if your code is in the head of the document, the container won't have been loaded, so it won't find the container and you'll get an error.

The comment about base64_encoding is incorrect. It works perfectly if the code is triggered after the container has been loaded without mucking around re-encoding an already encoded string.

score 4 · Answer 3 · answered Jul 24 '14 at 16:24

_{I work at Braintree. Feel free to reach out to our support team if you have more questions.}

The first error you were seeing, Unable to find valid container., will be thrown if the JavaScript cannot find the container you provided. The accepted values for a container are an ID string, DOM node, or jQuery object. Your example code should work, but if it doesn't you could try to pass in a different format, {container: $('#dropin')} for example.

Once you're sure you are passing in the correct container, I'd also recommend making sure you're interpolating in your client token correctly. If you view source on your page, your client token should be a base64 encoded string.

Thanks for reply, I tried with `{container: $('#dropin')}` too, but having same issue. There isn't any typo mistake as I'm copying from demo of Braintree site.. — Shaunak Shukla, Jul 25 '14 at 10:49

score 1 · Answer 4 · answered Dec 30 '20 at 19:55

You want to make sure your <script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script> is as close to the bottom of the page as possible. Right above your tag, if possible. This gives your browser time to load the DOM and then load the Braintree SDK.

Next you want to specify the "container" by passing in the container property to the setup() method. Something like this:

    let checkout;
    braintree.setup('CLIENT_TOKEN_KEY', 'dropin', {
        container: document.getElementById('dropin'),  // <- This line here.
        onReady: function (integration) {
            checkout = integration;
            console.log(checkout)
        }
    });

Integration of braintree causing issues

4 Answers4