Styles

Internal styles

Customize your fields by specifying your styles configuration for typography and colors. Setting your styles configuration is optional.

Allowed selectors

• input

• #pan

• #expiry

• #cvv

• #cvvOnly

• .is-valid

• .is-invalid

• .is-empty

• .is-onfocus

Note

All selectors can be combined in CSS to increase specificity. e.g input#pan.is-valid. #cvvOnly is used to target the CVC field in the CVC only flow.

Allowed CSS properties

• color

• font-family

• font-size

• font-style

• line-height

• text-align

• font-weight

• letter-spacing

• text-transform

• caret-color

Fonts (web safe only)

Example	Font-family
Georgia, serif	"Georgia, serif"
Palatino Linotype,Book Antiqua, Palatino, serif	"'Palatino Linotype','Book Antiqua', Palatino, serif"
Times New Roman, Times, serif	"Times New Roman, Times, serif"
Arial, Helvetica, sans-serif	"Arial,Helvetica, sans-serif"
Arial Black, Gadget, sans-serif	"'Arial Black', Gadget, sans-serif"
Comic Sans MS, Cursive, sans-serif	"'Comic Sans MS', Cursive, sans-serif"
Impact, Charcoal, sans-serif	"Impact, Charcoal, sans-serif"
Lucida Sans Unicode, sans-serif	"Lucida Sans Unicode"
Lucida Sans Unicode, Lucida Grande, sans-serif	"'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
Tahoma, Geneva, sans-serif	"Tahoma, Geneva, sans-serif"
Trebuchet MS, Helvetica, sans-serif	"'Trebuchet MS', Helvetica, sans-serif
Verdana, Geneva, sans-serif	"Verdana, Geneva, sans-serif"

Here's an example of how you would set your styles configuration.

JavaScript

  styles: {
          "input": {
            "color": "black",
            "font-weight": "bold",
            "font-size": "20px",
            "letter-spacing": "3px"
          },
          "input#pan": {
            "font-size": "24px"
          },
          "input.is-valid": {
            "color": "green"
          },
          "input.is-invalid": {
            "color": "red"
          },
          "input.is-onfocus": {
            "color": "black"
          }
        }

External styles

Our SDK exposes internal states by adding classes to your checkout form. Use these classes to style your form using your website CSS.

Form tag

• .is-valid

• .visa

• .mastercard

• .amex

• .jcb

• .diners

• .maestro

• .discover

CSS

.card .checkout.visa .label .type:before {
  background-image: url("./visa.jpg")
}
.card .checkout.mastercard .label .type:before {
  background-image: url("./mastercardjpg");
}
.card .checkout.amex .label .type:before {
  background-image: url("./amex.jpg")";
}

Field tag

• .is-onfocus

• .is-empty

• .is-invalid

• .is-valid

CSS

.card .checkout .field.is-onfocus {
  border-color: black;
}
.card .checkout .field.is-empty {
  border-color: orange;
}
.card .checkout .field.is-invalid {
  border-color: red;
}
.card .checkout .field.is-valid {
  border-color: green;
}

Warning

The validation does not check if your customer's card details are correct. The validator only checks the formatting of the entered details.