Styling

You can customize the payment form's styling in two ways:

  1. Most of the elements on the Checkout form are represented using basic HTML and CSS. To modify their appearance, overwrite the corresponding styles in a CSS.

    For your convenience, we use the BEM methodology for naming the HTML and CSS structures. All checkout elements are prepended with "chckt-", for example:
    .chckt-pm__header

  2. All card payment method input fields on the Checkout form are represented as iframe elements, which securely capture payment data from your shoppers. To change their appearance, pass a styling object to the chckt.checkout call when initializing the payment form:

    var sdkConfigObj = {
    	context : 'test',
    	paymentMethods : {
    		card : {
    			sfStyles : styleObject
    		}
    	}
    }
     
    var checkout = chckt.checkout(data, '.your-payment-div', sdkConfigObj);

    In this case, the sfStyles value can be as follows:

    var styleObject = {
        base: {
            color: '#000',
            fontSize: '14px',
            lineHeight: '14px',
            fontSmoothing: 'antialiased'
        },
        error: {
            color: 'red'
        },
        placeholder: {
            color: '#d8d8d8'
        },
        validated: {
            color: 'green'
        }
    };

    Accepted base values and the CSS selectors they translate to:

    color : "color",
    font : "font",
    fontFamily : "font-family",
    fontSize : "font-size",
    fontSizeAdjust : "font-size-adjust",
    fontSmoothing: "font-smoothing",
    fontStretch : "font-stretch",
    fontStyle : "font-style",
    fontVariant : "font-variant",
    fontVariantAlternates : "font-variant-alternates",
    fontVariantCaps: "font-variant-caps",
    fontVariantEastAsian : "font-variant-east-asian",
    fontVariantLigatures : "font-variant-ligatures",
    fontVariantNumeric : "font-variant-numeric",
    fontWeight : "font-weight",
    letterSpacing: "letter-spacing",
    lineHeight : "line-height",
    mozOsxFontSmoothing : "moz-osx-font-smoothing",
    mozTransition : "moz-transition",
    outline : "outline",
    opacity : "opacity",
    textShadow : "text-shadow",
    transition : "transition",
    webkitFontSmoothing : "webkit-font-smoothing",
    webkitTransition: "webkit-transition"