Type of Elements

The Firstoken Captures SDK JS has different types of elements that can be used. The following are the elements that can be used:

card-number

Used for capturing PAN value

FT.field("#cc-number", { 
      type: "card-number",
      name: "card_number",
      placeholder: "Card Number",
      autocomplete: "cc-number",
      errorColor: "750000",
      successColor: "038846e1",
      brandIcon: true,
      required: "true",
      css: css
    });

card-holder

Used for capturing Card holder name value

FT.field("#cc-holder", {
      type: "card-holder",
      name: "card_holder",
      placeholder: "Name on card",
      autocomplete: "cc-holder",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });

card-expiration-date

Used for capturing expiration date of the card

FT.field("#cc-expiration-date", {
      type: "card-expiration-date",
      name: "card_expiration_date",
      placeholder: "MM / YY",
      autocomplete: "cc-exp-month / cc-exp-year",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });

card-security-code

Used for capturing the 3/4 security digits of the card

FT.field("#cc-cvv", {
      type:"card-security-code",
      name: "card_security_code",
      placeholder: "CVV",
      autocomplete: "cc-csc",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });

expiration-year

Used for capture the card expiration year (separately)

FT.field("#cc-expiration-year", {
      type: "expiration-year",
      name: "card_year",
      placeholder: "YY",
      autocomplete: "cc-exp-year",
      errorColor: "750000",
      successColor: "038846e1",
      yearLength: "2",
      required: "true",
      css: css
    });

expiration-month

Used for capture the card expiration month (separately)

FT.field("#cc-expiration-month", {
      type: "expiration-month",
      name: "card_month",
      placeholder: "MM",
      autocomplete: "cc-exp-month",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });

text

Used for capturing text input.

FT.field("#text-1", {
      type: "text",
      name: "city",
      placeholder: "City",
      autocomplete: "off",
      required: "true",
      regexPattern: "/^[A-Za-z]+$/",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });

amount

Used for capturing monetary amounts.

FT.field("#total-amount", {
      type: "amount",
      name: "amount",
      placeholder: "Monto",
      decimalSeparator: ",",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });

select

Used for capturing a selection from a predefined list of options.

FT.field("#states", {
      type: "select",
      name: "states",
      values: ["Miranda", "DC", "Zulia", "Merida"],
      emptyValueText: "-- Please select a state --",
      selectedValue: 0,
      required: "true",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });

radio

Used to select one option from a collection of radio buttons that describe a set of related options

FT.field("#remember", {
      type: "radio",
      name: "remember",
      values: ["Yes", "No"],
      required: "true",
      selectedValue: 0,
      css: css
   });

These elements can be used to capture different types of data in the Firstoken Captures SDK JS.