Using Secure Fields gives you complete control over the styling of your payment form. The fields containing the card number and card security code can be styled individually to match your corporate or brand design. To style our Secure Fields, you can specify various options inside the variable styles.

var secureFields = new SecureFields();
var styles = {
    // your style goes here
};

secureFields.init(
	{{transactionId}}, {
		cardNumber: "cardNumberPlaceholder",
		cvv: "cvvPlaceholder",
	 },{
         styles: styles
     }
 );

You can also dynamically apply a custom style for each field if required.

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

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

Toggled CSS classes

Secure Fields automatically toggles CSS classes based on user input within the fields. You can use "cardNumber.valid:hover": "background-color: green;" to apply different styles depending on the user action. We have added four custom selectors to our Secure Fields to apply a different style if the fields are empty, valid, invalid or a supported card type has been detected.

Selector name	Description
`valid`	Toggled when the field contains valid input.
`invalid`	Toggled when the field contains invalid input. For example a wrong card number or card security code.
`empty`	Toggled when the field is empty.
`identified`	Toggled when a supported card brand (for example Visa or Mastercard) was detected when typing in the card number field.

Further initialization settings

The init function allows you to set an input type, a placeholder, and also define which field needs to be focused right from the beginning.

secureFields.init(
	{{transactionId}},
    {
        cardNumber: "cardNumberPlaceholder",
        cvv:  {
            placeholderElementId: "cvvPlaceholder",
            inputType: "tel",
            placeholder: "enter your cvv"
        }
    },{
        styles: styles,
        focus: "cvv"
    }
);

By default, all card brands available in your merchant setup will be accepted. Use the array paymentMethods if you need to only accept specific card brands.

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

Web fonts are supported via the standard @font-face CSS rule. Due to security measures, we do not allow to link to external resources. In order to use custom fonts, you need to contact us and send us your font files (woff, woof2, ttf). We will uploade the font files to your merchant configuration.

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

Complete example

Below is a working example including styling and initialization options discussed above.

var secureFields = new SecureFields();
var styles = {
    // Style Applying to all Elements
    "*": "border: 2px solid black;
      background-color: blue; padding: .65em .5em",

    // JSON:
    //'*': {
    //    border: '2px solid black',
    //    padding: '.65em .5em'       
    //    backgroundColor: 'blue',  // background-color
    //    backgroundImage: 'none',  // background-image
    //    boxSizing: 'border-box',  // box-sizing
    //    WebkitBoxShadow: 'none',  // -webkit-box-shadow
    //    WebkitAppearance: 'none'  // -webkit-appearance
    //}

    // ::hover Applying to all Elements
    "*::hover": "-webkit-box-shadow: none;
      -ms-box-shadow: none; -moz-appearance: none; ",

    // Specific Style for Each Element
    cardNumber: "font-weight: bold;",
    cvv: "color: green;",

    // Toggled CSS Classes
    "cardNumber.valid:hover": "background-color: green;",
    "cardNumber.invalid:hover": "background-color: red;",

    // Further Selectors
    '*:focus': 'border: 1px solid #66AFE9',
    '*:hover': 'border: 1px solid #66AFE9',
    '*::placeholder': 'color: #999999',
    '*:-ms-input-placeholder': 'color: #999999'
  
		// Custom Font
    "*": "font-family: Metamorphous;",
    "@font-face": {
        "*": {
            fontFamily: "Metamorphous",
            fontStyle: "normal",
            fontWeight: 400,
            src: "url('metamorphous.woff2') format('woff2')"
        }        
    }
};

secureFields.init(
	{{transactionId}}, {
			cardNumber: "cardNumberPlaceholder",
			cvv: "cvvPlaceholder",
	 },{
			styles: styles,
			focus: "cardNumber",
			paymentMethods: ["ECA", "VIS"]  // allowing MC and Visa only
     }
 );