JavaScript Testing to see if Credit Card card information is ready for submit

Questions
1

I would like to keep my “Complete Purchase” button disabled/grayed out until the user has entered populated the necessary credit card fields and the data is ready for tokenization/sending to Square.

Is there any way of doing this?

I know I have access to the credit card error message (and error classes are added to that element). However, it appears that this element has the exact same state “sq-card-message sq-card-message-no-error” when the form is completely blank, or when it is filled out correctly and ready for submission. There appears to be no way of detecting if the form has been correctly populated and is ready for tokenization/submission.

For now, I’m just enabling the purchase button if they are paying by credit card, but I would rather keep the button disabled until the credit card payment is ready for submission/tokenization.

2

This is possible if you listen to the addEventListeners callbacks. The Web Payments SDK has CardInputEventState Boolean isCompletelyValid that you can use to validate that all the form fields are filled out before enabling the customer to submit. :slightly_smiling_face:

3

Ok thanks, I see it now, thanks for your help.

Minor quibble, it would help if the “objects” page was organized, rather than just a giant list of the everything in the kitchen sink. I didn’t realize there were events listed on this page (had to Control-F) until you mentioned it.

4

We’re constantly working to improve our features based on feedback like this, so I’ll be sure to share your request to the API product team. :slightly_smiling_face: