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
  • .is-valid
  • .is-invaild
  • .is-empty
  • .is-onfocus

Note: All selectors can be combined in CSS to increase specificity. e.g input#pan.is-valid

Allowed CSS properties

  • color
  • font-family
  • font-size
  • font-style
  • line-height
  • text-align
  • font-weight
  • letter-spacing
  • text-transform

Fonts (web safe only)

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

CSS

Copied!
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

Copied!
.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

Copied!
.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.


Next steps


Event hooks
Create sessionState