Can someone help me figure out how to display the Stripe payment popup only when the Bootstrap 4 form is valid?
✔ The Bootstrap code is functioning correctly when the form is invalid.
𐄂 Issue: I attempted to use an 'if else' statement to make the Stripe popup appear when the form is valid, but it's not working :(
(function() {
'use strict';
window.addEventListener('load', function() {
// Grab all the forms we want to apply customized Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Iterate over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
var handler = StripeCheckout.configure({
key: 'pk_test_zef7efzhke73gefezzzhgu3',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Send the token ID to your server-side code for processing.
}
});
// Initiate Checkout with additional options:
handler.open({
name: 'Test',
description: '2 widgets',
currency: 'eur',
amount: 2000
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();