Why stripe is throwing the error after unmounting the card element?

53 views Asked by At

After unmounting the card element, the below error occurs

v3/:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted. at Oe (v3/:1:85179) at e._handleMessage (v3/:1:90713) at e._handleMessage (v3/:1:102981) at v3/:1:88616

Below is the js code.

test.js file

$('#edit_cc_details').on('click', function(){
        var stripe = Stripe($('#frmAdditionalCards').data('stripe-publishable-key'));
        var elements = stripe.elements();
        cardElement = elements.create('card');
        cardElement.mount('#new_credit_card');

        var form = document.getElementById('frmAdditionalCards');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            // console.log(card);
            stripe.createToken(cardElement).then(function(result) {
                if (result.error) {
                    // Inform the user if there was an error.
                    alert(result.error.message);
                } else {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('frmAdditionalCards');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        }
    });

    $('#cancel_cc_details').on('click', function(){
        if (cardElement) {
            cardElement.unmount();
        }
    });

I tried adding the below line, it removes the mounted card element. But after submitting the form it throws the error.

cardElement.unmount();

enter image description here enter image description here

0

There are 0 answers