Initialization and Styling

Minimum style guide

For the basics on how to style and initialize your payment form, check out the following guide:

🦉

Initialize and Style Secure Fields

Open Recipe

Dynamic styling

Individual fields can also be styled dynamically, for example

// the card number field
secureFields.setStyle("cardNumber", "border: 1px solid #ccc");

// the CVV field
secureFields.setStyle("cvv", "border: 1px solid #ccc")

Toggled classes

Secure Fields automatically toggles CSS classes on the input fields based on various user inputs. For example, to apply different style-based classes, you can use

"cardNumber.valid:hover": "background-color: green;"

Class name	Description
`valid`	When the field contains valid input.
`invalid`	When the field contains invalid input. For example, an incorrect card number or CVV code.
`empty`	When the field is empty.
`identified`	When a supported brand (for example, Visa or Mastercard), is detected when typing in the card number field.

Advanced initialization

The initTokenize function allows you to set the input type, placeholder value and which field should be focused on right from the beginning. In addition, it is possible to set an aria-label. Check out the following example where these options are set:

🦉

Advanced Initialization

Open Recipe

Setting up payment methods

By default, all credit card types available in your merchant setup will be accepted. You can use the paymentMethods object to specify a subset of card types if you need to. For example,

secureFields.initTokenize(
  merchantId, {
    cardNumber: "cardNumberPlaceholder",
    cvv: "cvvPlaceholder"
  }, {
    styles: styles,
    paymentMethods: ["ECA", "VIS"] // allowing Mastercard and Visa only
  }
);

Card brands have the following codes:

Card brand	paymentMethod code
Visa	`VIS`
Mastercard	`ECA`
AMEX	`AMX`
Diners	`DIN`
Discover	`DIS`
JCB	`JCB`
ELO	`ELO`
UnionPay	`CUP`

Web fonts

These are supported via the standard @font-face CSS rule. Due to security concerns, it is not permitted to link external resources. To get custom fonts,

Get in touch with us and provide the font files (e.g. woff, woff2, ttf). These files wil be uploaded to your merchantId hosted file space.
Reference the font files by name (not path) in the styles section of the initTokenize call, for example:

var styles = {
  // setting the font-family to both fields
  "*": "font-family: Metamorphous;",
  "@font-face": {
    "*": {
      fontFamily: "Metamorphous",
      fontStyle: "normal",
      fontWeight: 400,
      src: "url('metamorphous.woff2') format('woff2')"
    }
  }
}