Elements Options

The elements in the Firstoken SDK have configurable options that enhance both functionality and customization to suit the client's design.

Option	Description	Example value
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.	{ "color": "#1b1d1f", "box-sizing": "border-box", "font-size": "16px" }
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).	75000000
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).	00ff81e1
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 autocomplete: "off"	"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.	/^[A-Za-z]+$/
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".	["Florida", "Texas", "Virginia", "California"],
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".	"-- Please select a state --"
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")	yearLength: 2
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".