CODEWITHSUNDEEP
validationstripe-payments
BobB
BobB

Reputation: 772

Stripe validate card element is filled out

When using saved cards or elements I need to validate one or the other is present when hitting submit.

I can see my own saved card radios easily but the Stripe elements are in an iframe.

Is there an event fired when the card is filled out? Or some means to check it is good to submit. I am sure I am missing something obvious.

Something like this scenario

form.addEventListener('submit', function(event) {
                event.preventDefault();
                $('button.buy').prop('disabled', true);
                if ($('.saved_cards input[type="radio"]:checked')) {
                    self.save_card = false;
                    self.payment_method = $('.saved_cards input[type="radio"]:checked').val();
                    self.make_payment().then(self.handleMakePaymentResponse);
                } else {
// There should be a way to validate card is filled out
// Stripe validates as you type but no way to know it is simply done.
// we need to know this is filled out.
                    stripe.createPaymentMethod({
.........

Upvotes: 1

Views: 3997

Answers (1)

hmunoz
hmunoz

Reputation: 3361

You would listen to the change event on an Element, and then check for the complete field on the event handler object: https://stripe.com/docs/js/element/events/on_change?type=cardElement

Upvotes: 5

Related Questions