Last Updated: 19 September 2024 | Change Log

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.

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.