**Last updated**: 24 June 2025 | [**Change log**](/products/checkout/web/changelog/)

# 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


```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


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

### Field tag

- `.is-onfocus`
- `.is-empty`
- `.is-invalid`
- `.is-valid`


### CSS


```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.