Pesquisar

Are you looking for test card numbers?

Would you like to contact support?

Atenção, esta página não se encontra disponível em Português
Classic-integration icon

Styling

Customize the styling of your payment form.

The Checkout SDK integrations are being phased out
This means we are:
  • No longer developing the Checkout SDK.
  • Not accepting new Checkout SDK integrations.
We strongly recommend you switch to the latest Web Drop-in integration. We will announce the end-of-life plan in 2022. From the moment we announce the end-of-life plan, you will have approximately 12 months to migrate.

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

Styling the checkout form

Most of the elements on the Checkout form are represented using basic HTML and CSS. To modify their appearance, overwrite the corresponding styles in 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

Styling the card fields

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"