Stripe elements getting destroyed

Question

i have this javascript code that create a modal dinamically with a div where stripe loads it's element divs to save my clients card details. Since they can show and hide modal, i devided to hook a calback into the hidden event of the modal and remove it from the dom. Meaning each time the user click the button to add a new payment method he gets a new modal added to the dom. Also, to prevent duplicate stripe elements of the same type on the same page i destroy the "element". On the first try everything works great, but after every time a try to "destroy" the elements stripe trows an exception saying the element has already been destroyed.. Here's the code:

static createNewPaymentMethod() {
    var stripe = Stripe("My_Publishable_Key");

    var modal = "<DIVS_WITH_THE_MODAL>";

    $("body").append(modal);
    $("#ID_OF_THE_MODAL").modal("show");

    var elements = stripe.elements();
    var stripeCardElement = elements.create('card');

    stripeCardElement.mount('#ID_OF_THE_MODAL .card-element');

    $(document).on("hidden.bs.modal", "#ID_OF_THE_MODAL", function(){
        stripeCardElement.destroy();
        $("#ID_OF_THE_MODAL").remove();
    });
}

I tried change the call to the variable stripeCardElement to elements.getElement('card') and then call destroy on that but as with the first try, that call returns null after the first modal shows...

Answer 1

Just a quick fix, i changed stripeCardElement.destroy(); to stripeCardElement.unmount(); and it seems to work but i kind of think the way i was coding was actually better.. dont know if there is some diference in the approach inside stripe JS api..