Elements Options
Last updated
Was this helpful?
Last updated
Was this helpful?
The elements in the Firstoken SDK have configurable options that enhance both functionality and customization to suit the client's design.
type
It is used to identify what type of field is being initialized.
It only allows preconfigured values such as "card-number", "card-holder", "card-expiration-date", "card-security-code", and "amount".
"card-number"
name
It is used to know the name of the field that will be assigned, in this case, the client can choose the name to assign to each element.
It should be noted that spaces should be replaced with "_" and the chosen name must match the field name configured in the Mapping Data of the created Inbound Route.
"card_number"
placeholder
It is used to provide a suggestion or example of what is expected for the user to enter in the field.
"XXXX-XXXX-XXXX-XXXX"
css
It is an object that contains predefined classes and pseudo-classes to style the field (In the CSS section, it indicates which classes and pseudo-classes can be used)
This configuration can be a globally defined object for all fields or individually defined for each field.
errorColor
It is a variable used to configure the color of the error that the client wants to define in case of an error in the field.
Only hexadecimal color values are allowed (without "#" character).
successColor
This variable is used to configure the color of the success message that the client wants to define when the field is successfully filled.
Only hexadecimal color values are allowed (without the "#" character).
autocomplete
It is used to configure whether the field supports form autocomplete.
It accepts values defined by the client, such as "cc-name" or "name". If the client does not want this option, they can set it to
"cc-number"
brandIcon
It is used to enable or disable the option to automatically display the brand icon of the card, depending on the card entered (only applicable to the card number field).
Accepted values are "true" or "false". If this option is not provided, the default value is "false".
"true"
regexPattern
It is used only in SDK elements of type "text", and in this option, the regex pattern to be used for validating the input text field is sent.
decimalSeparator
It is used to configure the decimal symbol in the amount field. It can only be used in SDK elements of type "amount". Accepted values are "," or "."
","
values
It is an array of strings containing the values to be used in the select field. This configuration can only be used in SDK elements of type "select".
emptyValueText
It is the value that is placed when the field is in a zero state or when no value is intended to be sent in that field. This configuration can only be used in SDK elements of type "select".
selectedValue
It is the predefined value when initializing the select field. It should be passed a number indicating the position of the element to be selected in the values array. This configuration can only be used in SDK elements of type "select".
0 (This means that the selected value will be the one at position "0" in the values array.)
yearLength
It is used to configure the format of year in the expiration date field. It can only be used in SDK elements of type "card-expiration-date" and "expiration-year". Accepted values are "2" or "4" (Depends on the year format "YY" or "YYYY")
required
It is used to identify whether the initialized field is required or not.
Accepted values are "true" and "false".
"true"
password
It is used to configure if the input type must be type password to hide the value.
Accepted values are "true" and "false".