Initialization and Styling

Search…
Using Secure Fields leaves you complete control over the styling of your payment form. The card number and CVV fields can be styled individually.
1
var styles = {
2
    // set style to all elements, JSON accepted too
3
    "*": "border: 2px solid black; background-color: blue; padding: .65em .5em",
4
​
5
    // or with JSON
6
    //'*': {
7
    //    border: '2px solid black',
8
    //    padding: '.65em .5em'       
9
    //    backgroundColor: 'blue',  // background-color
10
    //    backgroundImage: 'none',  // background-image
11
    //    boxSizing: 'border-box',  // box-sizing
12
    //    WebkitBoxShadow: 'none',  // -webkit-box-shadow
13
    //    WebkitAppearance: 'none'  // -webkit-appearance
14
    //}
15
​
16
    // ::hover on all elements
17
    "*::hover": "-webkit-box-shadow: none; -ms-box-shadow: none; -moz-appearance: none; ",
18
​
19
    // set style to one of the elements
20
    cardNumber: "font-weight: bold;",
21
    cvv: "color: green;",
22
​
23
    // setting style based on CSS classes (see 'Toggled classes')
24
    "cardNumber.valid:hover": "background-color: green;",
25
    "cardNumber.invalid:hover": "background-color: red;",    
26
​
27
    // pseudoselectors
28
    '*:focus': 'border: 1px solid #66AFE9',
29
    '*:hover': 'border: 1px solid #66AFE9',
30
    '*::placeholder': 'color: #999999',
31
    '*:-ms-input-placeholder': 'color: #999999' // thanks MS :( 
32
};
33
​
34
secureFields.initTokenize(
35
     "your-merchant-id",
36
     {
37
         cardNumber: "cardNumberPlaceholder",
38
         cvv: "cvvPlaceholder",
39
     },{            
40
         styles: styles,
41
         focus: "cardNumber" // or secureFields.focus("cardNumber");
42
     }
43
 );
Copied!
Dynamic styling
The individual fields can also be styled dynamically:
1
// the card number field
2
secureFields.setStyle("cardNumber", "border: 1px solid #ccc");
3
​
4
// the CVV field
5
secureFields.setStyle("cvv", "border: 1px solid #ccc")
Copied!
Toggled classes
Secure Fields automatically toggle CSS classes on the input fields based on various user input. Use "cardNumber.valid:hover": "background-color: green;" for example to apply different style based classes.
Class name
Description
valid
When the field contains valid input.
invalid
When the field contains invalid input. For example a wrong card number or CVV Code.
empty
When the field is empty.
identified
When a supported brand (for example Visa or Mastercard) was detected when typing in the card number field.
Advanced initialization
The initTokenize function allows to set the input type, placeholder value and which field to be focused right from the beginning. In addition it is possible to set an aria-label. The (random) example from below ensures the following:
The CVV field gets initial focus
The CVV field's input type gets set to tel
The placeholder value will be enter your cvv
The CVV field input will have aria-label="cvv aria label"
1
secureFields.initTokenize(
2
    merchantId,
3
    {
4
        cardNumber: "cardNumberPlaceholder",
5
        cvv:  {
6
            placeholderElementId: "cvvPlaceholder",
7
            inputType: "tel",
8
            placeholder: "enter your cvv",
9
            ariaLabel: "cvv aria label"
10
        }
11
    },{        
12
        styles: styles,
13
        focus: "cvv"
14
    }
15
);
Copied!
Setting up payment methods
By default all credit cards available in your merchant setup will be accepted. Use the paymentMethods option if there's a need to accept only a subset of card types.
1
secureFields.initTokenize(
2
    merchantId,
3
    {
4
        cardNumber: "cardNumberPlaceholder",
5
        cvv:  "cvvPlaceholder"
6
    },{        
7
        styles: styles,
8
        paymentMethods: ["ECA", "VIS"]  // allowing Mastercard and Visa only
9
    }
10
);
Copied!
Parameter values for “paymentmethod”:
Card Type
paymentmethod
Visa
VIS
MasterCard
ECA
AMEX
AMX
Diners
DIN
Discover
DIS
JCB
JCB
ELO
ELO
China UnionPay
CUP
Web fonts
Web fonts are supported via the standard @font-face CSS rule. Because of security concerns it is not permitted to link external resources. So, in order to get custom fonts, you need to:
Contact [email protected] and provide the font files (woff, woof2, ttf etc). The files will be uploaded into your merchant id hosted files space.
Reference the font files, by name (no path) in the styles section of the initTokenize call:
1
var styles = {
2
    // setting the font-family to both fields
3
    "*": "font-family: Metamorphous;",
4
    "@font-face": {
5
        "*": {
6
            fontFamily: "Metamorphous",
7
            fontStyle: "normal",
8
            fontWeight: 400,
9
            src: "url('metamorphous.woff2') format('woff2')"
10
        }        
11
    }
12
}
Copied!
Secure Fields (iframes)
Events
Last modified 4d ago
Copy link
Contents
Dynamic styling
Toggled classes
Advanced initialization
Setting up payment methods
Web fonts