Tips for preventing the occurrence of numerous instances of braintree.setup in Angular

Question

Tips for preventing the occurrence of numerous instances of braintree.setup in Angular

I am encountering an issue with a Braintree payment form displayed in a modal window:

$scope.displayModalBraintree = function () {
    $scope.modal = 'modal_payment_form.html', $scope.$on('$includeContentLoaded', function () {
        braintree.setup('tokenStringFromServer', 'paypal', {
            container: 'paypal',
            locale: 'da_dk',
            onReady: function (integration) {
                console.log('ready', integration)
            }
        })
    })
})

When I click the button to trigger displayModalBraintree, everything works correctly the first time. However, if I click the button again, two Paypal buttons appear and the log shows "ready ready".

I have attempted to resolve this issue by using the teardown method as suggested at https://github.com/braintree/braintree-web/issues/29#issuecomment-137555915, but it has not resolved the problem.

javascript angularjs paypal braintree

Answer 1

Answer №1

^{Just to be transparent: I am employed at Braintree. If you need more assistance, feel free to reach out to our support team.}

The issue arises from constantly adding a new listener for $includeContentLoaded each time $scope.displayModalBraintree is called without cleaning up the previous listeners. This leads to multiple calls of braintree.setup. For instance, if you run it a second time, braintree.setup gets executed twice. And with each subsequent invocation, the function runs multiple times.

An effective solution could involve defining the listener outside of $scope.displayModalBraintree as shown below:

var clientToken, braintreeVault;

$scope.$on('$includeContentLoaded', function () {
  braintree.setup(clientToken, 'paypal', {
    container: 'paypal',
    onReady: function (integration) {
        braintreeVault = integration;
    }
  })
});

$scope.displayModalBraintree = function () {
  $scope.getToken().then(function (token) {
    clientToken = token;
    $scope.modal = 'modal_payment_form?' + (new Date().getTime());
  })
};

Alternatively, you could consider destroying the listener after the modal loads, but moving it outside of $scope.displayModalBraintree seems like a more logical approach.

Answer 2

^{Just to be transparent: I am employed at Braintree. If you need more assistance, feel free to reach out to our support team.}

The issue arises from constantly adding a new listener for $includeContentLoaded each time $scope.displayModalBraintree is called without cleaning up the previous listeners. This leads to multiple calls of braintree.setup. For instance, if you run it a second time, braintree.setup gets executed twice. And with each subsequent invocation, the function runs multiple times.

An effective solution could involve defining the listener outside of $scope.displayModalBraintree as shown below:

var clientToken, braintreeVault;

$scope.$on('$includeContentLoaded', function () {
  braintree.setup(clientToken, 'paypal', {
    container: 'paypal',
    onReady: function (integration) {
        braintreeVault = integration;
    }
  })
});

$scope.displayModalBraintree = function () {
  $scope.getToken().then(function (token) {
    clientToken = token;
    $scope.modal = 'modal_payment_form?' + (new Date().getTime());
  })
};

Alternatively, you could consider destroying the listener after the modal loads, but moving it outside of $scope.displayModalBraintree seems like a more logical approach.

Answer 3

Answer №2

_{I am a part of the team at Braintree.}

Our documentation on teardown has been recently updated since the comment on Github was made. To resolve any issues, you can try adding integration = null in your teardown function, as shown in this example code snippet. If that solution does not work, please share the code where teardown is called so we can assist you further.

Answer 4

_{I am a part of the team at Braintree.}

Our documentation on teardown has been recently updated since the comment on Github was made. To resolve any issues, you can try adding integration = null in your teardown function, as shown in this example code snippet. If that solution does not work, please share the code where teardown is called so we can assist you further.

Tips for preventing the occurrence of numerous instances of braintree.setup in Angular

Answer №1

Answer №2

Similar questions

Incorporating an external TypeScript script into JavaScript

Error during the production build of Next.js Internationalized Routing: Prerendering page encountered an unexpected issue

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

Use Javascript's JQuery library to apply functionality to a newly inserted and cloned

Chosen Dropdown selection - Retrieve/Receive information

How to create a transparent background on a canvas

Improving Zen Coding to integrate with JavaScript files on Sublime Text2

How do I set up a timing mechanism in a VSCode extension to automatically clear error messages after a specified duration?

Show the selected checkbox options upon clicking the submit button

I provided Array.Filter with a function instead of a predicate, and surprisingly it gave back the entire array. How is that possible?

What is the process for retrieving an excel file from the backend to the frontend?

Establishing the Backbone router configuration

Experiencing difficulties coding SVGs

Is there a way to extract specific data from a JSON file and calculate the average in order to generate a line graph using JavaScript

Ways to resolve the error "Expected an assignment or function call but found an expression with no-unused-expressions"

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Node js does not support iteration for DirectoryFiles

How to toggle a class using ng-click in AngularJS

Encountering an undefined response in API call using Fetch with Express Nuxt

personalizing material-ui component styles – set select component color to be pure white