Integration of braintree causing issues

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>

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.


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.

Tags:

Javascript

Php

Braintree

Recent Posts