How to make all fields mandatory?

Questions
1

Hi team,

I am integrating Web Payment SDK with an existing form, where i need to ensure that all mandatory fields are filled before submitting, but seems there is no way that a Card object can tell whether CreditCard Number, CVV and expiration Date are mandatory or not… any suggestions? thanks

2

:wave: With the Web Payments SDK you could listen to the isCompletelyValid callback. If it’s true then you could allow the button to submit the form. :slightly_smiling_face:

3

Thanks.

However, the isCompletedValid can only tell whether the current field is valid or not.

Wish we could have something like this: Stripe JS Reference

4

With the other CardInputEventState you have all the same options. It has:

  • isCompletelyValid for complete
  • isEmpty for empty
  • hasFocusClass for when input field has been selected
  • hasErrorClass for an input error
  • isPotentiallyValid for when the value is being validated.
    :slightly_smiling_face:
5

@AChen

Actually, isCompletelyValid only applies to the field that generated the event.

In order to determine if all the inputs are valid, you will need to keep track of all the card fields individually. Pay particular attention to if a postalCode field is required or not since it only appears based on the cardNumber.

I had a similar issue. See BlazorSquareToolkit/InputSquarePayment.razor.js at main · c0g1t8/BlazorSquareToolkit (github.com). I listened for the focusClassRemoved event - line 41 and created a separate class to track the state - line 55.