Braintree javascript client - Teardown call does not remove the existing integration - gettings error on my hosted fields

Question

I am currently trying to integrate braintree to my angularJS web app and I face the below issue.

When the user selects to perform a payment, I have a modal that opens to display my payment form. In the modal's controller, I run at the beginning the braintree.setup(...) function. I use hosted fields in my form. Everything works fine (submit a test card number and get back the nonce successfully), but when I close the modal and then reopen it, I get the below error for the hosted fields I use:

Object {message: "Cannot place two elements in "#card-number""}
Object {message: "Cannot place two elements in "#cvv""}
Object {message: "Cannot place two elements in "#expiration-month""}
Object {message: "Cannot place two elements in "#expiration-year""}

I tried to use the teardown method that is provided (as it is shown on docs), but still keep getting that error.

In modal's controller, I call the function $scope.setupBraintree($scope.token) when I have got the token from server. $scope.setupBraintree is defined like:

$scope.setupBraintree = function(token){

    braintree.setup(token, "custom", {
        id: "paymentForm",
        hostedFields: {
            number: {
                selector: "#card-number"
            },
            cvv: {
                selector: "#cvv"
            },
            expirationMonth: {
                selector: "#expiration-month"
            },
            expirationYear: {
                selector: "#expiration-year"
            }
        },
        onReady: function(integration){
            $scope.checkout = integration;
        }
    });
};

Then, when user closes the modal, the $scope.cancel() is called, which is defined like:

$scope.cancel = function() {

    $scope.checkout.teardown(function () {
                 $scope.checkout = null;
                // braintree.setup can safely be run again!
    });

    $uibModalInstance.dismiss('cancel');
};

So I call the teardown method when I want the braintree integration to be destroyed (when modal closes). When I close the modal, the $scope.checkout is indeed null (so that means the teardown run as expected), however when I open the modal again (and again I perform a new request to the server to get a client token) I got the above errors regarding the hosted fields so I am wondering if I have missed something there or is there any issue with teardown on hosted fields.

Thanks for your help, Babis

Answer 1

Everything is fine with the teardown method. The issue was that an event registered on the modal was fired twice, hence setup was running twice the second time the modal was opening.

Fixed that and teardown worked as expected, each time the modal loads the setup function runs smoothly