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();

