Credit Card Fields: Dynamic Changes

When Flex Fields is successfully initialized, each field wrapper gains two new CSS classes: splitit-flex-field and splitit-flex-field-{type}, where type is either cvv, cardholder-name, number, expiration-date, expiration-month, or expiration-year. In addition, user interactions with Flex Fields add and remove CSS classes:
  1. 1.
    focused: when a field is selected
  2. 2.
    valid: when a field has been validated
  3. 3.
    has-content: when user has entered data into a field
  4. 4.
    invalid: when a field isn't valid
You can customize the UI using the field wrapper classes and/or the user interaction classes. In addition, when any of the fields undergoes one of the four user interaction events, the JavaScript event onFieldUpdate() is called, which enables you to run custom code as follows:
}).onSuccess(function (result) {
}).onFieldUpdate(function(fields) {
// Respond to a field event with custom UI

Fields Object

In the fields object that is returned, you can access the following:
Property Name
whether validation error should be shown or not
array of strings
errors associated with a particular field; one or more
field type: number, cvv, expirationDate, expirationYear, expirationMonth
bool (nullable)
bool (nullable)
If null, then it can be valid or invalid, and requires a server side validation
string (nullable)
Only applicable if field type is number. One of: mastercard, visa, amex, dinersclub, discover, jcb, unknown
Last modified 7mo ago