Initialization and Styling

Have complete control over the styling of your payment form.

Minimum style guide

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

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 nameDescription
validWhen the field contains valid input.
invalidWhen the field contains invalid input. For example, an incorrect card number or CVV code.
emptyWhen the field is empty.
identifiedWhen 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:

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,

  merchantId, {
    cardNumber: "cardNumberPlaceholder",
    cvv: "cvvPlaceholder"
  }, {
    styles: styles,
    paymentMethods: ["ECA", "VIS"] // allowing Mastercard and Visa only

Card brands have the following codes:

Card brandpaymentMethod code

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')"