Last Updated: 25 April 2024 | Change Log


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

All selectors can be combined in CSS to increase specificity. e.g

Allowed CSS properties

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

Fonts (web safe only)

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.


  styles: {
          "input": {
            "color": "black",
            "font-weight": "bold",
            "font-size": "20px",
            "letter-spacing": "3px"
          "input#pan": {
            "font-size": "24px"
          "": {
            "color": "green"
          "": {
            "color": "red"
          "": {
            "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


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

Field tag

  • .is-onfocus
  • .is-empty
  • .is-invalid
  • .is-valid


.card .checkout {
  border-color: black;
.card .checkout {
  border-color: orange;
.card .checkout {
  border-color: red;
.card .checkout {
  border-color: green;

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