Braintree onReady not firing within Angular application

Question

I'm using the Braintree Hosted Fields within my Angular application. When the app loads, the braintree.setup('TOKEN', 'customer', {}) works as intended. The onReady fires correctly.

This is my controller:

angular.module('braintree')
  .controller('BraintreeCtrl', [
    function() {

      var self = this;

      self.setup = function() {
        console.log('setup braintree');

        braintree.setup('myBTtoken', 'custom', {
          id: 'braintreeForm',
          onReady: function() {
            console.log('on ready');
          },
          hostedFields: {
            styles: {},
            number: {
              selector: '#card-number',
              placeholder: 'Card number'
            },
            cvv: {
              selector: '#card-cvv',
              placeholder: 'CVV'
            },
            expirationMonth: {
              selector: '#card-expiration-month',
              placeholder: 'MM'
            },
            expirationYear: {
              selector: '#card-expiration-year',
              placeholder: 'YY'
            },
            postalCode: {
              selector: '#card-postal',
              placeholder: 'Postal code'
            }
          }
        });
      }     
    }
  ]);

View (in jade):

  form(name='braintreeForm', id='braintreeForm', novalidate, ng-init='ctrl.setup()')
    .form-group
      label Card Number
      #card-number

    .form-group
      label CVV
      #card-cvv

    .form-group
      label Expires
      #card-expiration-month

    .form-group
      #card-expiration-year

    .form-group
      label Zip Code
      #card-postal

    button(type='submit') Submit

However, when I navigate away from this page, then COME BACK to this state where the BraintreeCtrl fires, the onReady never fires and I can't enter any data.

How can I re-setup braintree when I come back to the state with my braintree form??

Answer 1

I work at Braintree on the JavaScript SDK

As of right now there is not an officially supported mechanism for this. It is an issue that we are aware of and we will provide a solution in a future release. Unfortunately, I cannot provide a timeline for this work.

In the meantime, I recommend contacting our support team ([email protected]) and keeping an eye on related threads on our Github. Again, while there is no officially supported solution, people have found some interesting workarounds.

I'm sorry I don't have better news, but we appreciate you raising this issue.

Answer 2

In the past, braintree.setup() could only be called once without bugging out.

They have now implemented the teardown() function which will allow you to call braintree.setup() again.

In short, call the teardown() when you want to destroy the session - perhaps upon leaving the page.

https://developers.braintreepayments.com/guides/client-sdk/javascript/v2#teardown https://github.com/braintree/braintree-web/issues/29