I'm sure I'm doing something wrong that's super simple, but I can't figure out what.
Goal: I'm showing a loading modal while processing a card payment with stripe. But if the user enters in something incorrect such as no expiration date or something similar, I'd like the loading modal to close and allow the user to fix their problem.
Issue: The loading modal is just staying open indefinitely, when I tell it to hide the modal, it does nothing.
I have a feeling maybe because it's calling it from an async function it doesn't wanna do what it's told? I am a novice to Javascript and JQuery so if it's simple, could you explain why?
Here is the Pay with card method:
// Submit payment
// Calls stripe.confirmCardPayment
// If the card requires authentication Stripe shows a pop-up modal to
// prompt the user to enter authentication details without leaving your page.
var payWithCard = async function (stripe, card, clientSecret) {
stripe
.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: billingAddressStuff.strName,
address: {
line1: billingAddressStuff.strStreet1,
line2: billingAddressStuff.strStreet2,
postal_code: billingAddressStuff.strZip,
state: billingAddressStuff.strStateName,
},
email: billingAddressStuff.strEmail
}
}
})
.then(function (result) {
if (result.error) {
$("#loadMe").modal("hide"); // This is what is not doing anything when it's called
// Show error to your customer
showError(result.error.message);
return false;
} else {
// The payment succeeded! now process the order
document.getElementById("TheSubmitButton").disabled = true;
PlaceOrder();
return true;
}
});
};
Here is what calls the pay with card:
// On submit, pay with card!
var form = document.getElementById("payment-form");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Show loader
$("#loadMe").modal({
backdrop: "static", //remove ability to close modal with click
keyboard: false, //remove option to close with keyboard
show: true //Display loader!
});
// Complete payment when the submit button is clicked
// get billing info
billingAddressStuff.strName = document.getElementById("strBillName").value;
billingAddressStuff.strCompanyName = document.getElementById("strBillCompanyName").value;
billingAddressStuff.strStreet1 = document.getElementById("strBillAddress").value;
billingAddressStuff.strStreet2 = document.getElementById("strBillAddress2").value;
billingAddressStuff.strCity = document.getElementById("strBillCity").value;
billingAddressStuff.strStateName = document.getElementById("strBillState").value;
billingAddressStuff.strZip = document.getElementById("strBillZip").value;
billingAddressStuff.strPhone = document.getElementById("strBillPhone").value;
billingAddressStuff.strEmail = document.getElementById("strBillingEmail").value;
// else, save locally
document.getElementById("TotalsModel").PI.value = data.clientSecret;
// check stock and prices before charging the card
var StockIsGood = false;
var PriceIsGood = false;
var AllItemsActive = false;
StockIsGood = CheckStock();
PriceIsGood = CheckPrice();
AllItemsActive = CheckActiveItems();
// if all good, then continue and process the payment at the given price.
if (StockIsGood && PriceIsGood && AllItemsActive) {
payWithCard(stripe, card, data.clientSecret);
}
else {
$("#loadMe").modal("hide");
}
});
This is what I get in the result:

Update: If you wish to see the issue yourself, go to test.shop.vents-us.com use login [email protected] password: HelloWorld1! Put whatever in the cart, and make your way to the credit card fields and play.
Here's the modal HTML:
<!-- Modal -->
<div class="modal fade center" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="loadMeLabel">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<strong>Loading...</strong>
</div>
</div>
</div>
</div>

payWithCard()declaredasync? You never useawaitinside it, and the caller doesn't await it.4242 4242 4242 4242is a valid test card, so you're not getting an error. Why do you expect it to close the modal?