Destroying and recreating the dropin

I think you guys should expose a drop-in API for destroying the thing, cause as it is, we have to do it ourselves and it can be a pain, since simply emptying the container will keep the event handler bound to the purchase button, meaning the requestPaymentMethod will be called multiple times.

This is how I used to do it (which was buggy since it would trigger the requestPaymentMethod multiple times upon re-creating it):

    createDropin : function() {
        var self = this;

        // Braintree
        var submitButton = document.querySelector('#braintree-submit-button');

        braintree.dropin.create({
            authorization: 'xxx', // @TODO change
            selector: '#braintree-dropin',
            paypal: {
                flow: 'checkout',
                amount : this.getMoney(),
                currency: 'EUR'
            }
        }, function (err, dropinInstance) {
            if (err) {
                // Handle any errors that might've occurred when creating Drop-in
                console.error(err);
                return;
            }

            submitButton.addEventListener('click', function () {
                dropinInstance.requestPaymentMethod(function (err, payload) {
                    if (err) {
                        // Handle errors in requesting payment method

                        //self.displayResponse(err, 'bg-danger');
                        return;
                    }

                    // Send payload.nonce to your server
                    self.sendPayload(payload);
                });
            });
        });
    },

    destroyDropin : function() {
        $('#braintree-dropin').empty();
    },

Now I do it like this, which works almost perfectly:

    _submitButton : null,
    _submitButtonEventCallback : null,

    createDropin : function() {
        var self = this;

        // Braintree
        self._submitButton = document.querySelector('#braintree-submit-button');

        var dropin = braintree.dropin.create({
            authorization: 'xxx', // @TODO change
            selector: '#braintree-dropin',
            paypal: {
                flow: 'checkout',
                amount : this.getMoney(),
                currency: 'EUR'
            }
        }, function (err, dropinInstance) {
            if (err) {
                // Handle any errors that might've occurred when creating Drop-in
                Rollbar.error("Braintree drop-in creation failed.", err);
                return;
            }

            self._submitButtonEventCallback = function() {
                dropinInstance.requestPaymentMethod(function (err, payload) {
                    if (err) {
                        Rollbar.info("Braintree error in requesting payment method.", err);

                        self.displayResponse(err, 'bg-danger');
                        return;
                    }

                    // Send payload.nonce to your server
                    self.sendPayload(payload);
                });
            };

            self._submitButton.addEventListener('click', self._submitButtonEventCallback);
        });
    },

    destroyDropin : function() {
        var self = this;
        $dropin = $('#braintree-dropin');

        self._submitButton.removeEventListener('click', self._submitButtonEventCallback);
        self._submitButtonEventCallback = null;

        $dropin.empty();
    },

What I’m doing is I’m using removeEventListener to get rid of the current click handler when destroying it.

Is this a good approach? Pls don’t laugh at my JS, I’m a PHP guy 😄

[jackellenberger]

Hey @ndabAP, we played around with patching this in the current major version and weren’t really happy with any of the solutions, so we’re planning on fixing this issue the right way™ in the next major version. We don’t have an ETA for that yet, but it is being worked on and should include a solution for this issue. Thanks for your patience!

[intelliot]

Thanks for asking about this!

We have a teardown() function that you should call to destroy Drop-in. Example:

var dropinInstance;

braintree.dropin.create({
    // ...
}, function (err, dropin) {
    // ...
    dropinInstance = dropin;
});

// Destroy Drop-in
dropinInstance.teardown(function(err) {
    if (err) { console.error('An error occurred during teardown:', err); }
});

We’ll add documentation of this to our README.

Removing the click event listener is fine. Here’s an alternative:

var dropinInstance;

braintree.dropin.create(/* ... */, function(err, dropin) {
    // ...
    dropinInstance = dropin;
});

_submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(/* ... */);
});

The click event listener here uses dropinInstance, which you can overwrite at any time.

Does this help?