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".

Last updated

Was this helpful?