.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
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.
focused: when a field is selected - 2.
valid: when a field has been validated - 3.
has-content: when user has entered data into a field - 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
});
In the
fields object that is returned, you can access the following:Property Name | Type | Description |
|---|---|---|
showValidationError | bool | whether validation error should be shown or not |
errors | array of strings | errors associated with a particular field; one or more |
type | string | field type: number, cvv, expirationDate, expirationYear, expirationMonth |
isFocused | bool (nullable) | |
isValid | bool (nullable) | If null, then it can be valid or invalid, and requires a server side validation |
cardType | string (nullable) | Only applicable if field type is number. One of: mastercard, visa, amex, dinersclub, discover, jcb, unknown |
Last modified 7mo ago