Created with Sketch.
Created with Sketch.

Custom CSS Styles

The Check-Out form is styled in a way that it can be used conveniently on both desktop and mobile devices. It is however possible to define custom CSS styles, in order to make the form look & feel like the page that hosts it. A custom styles can be provided in following ways:

  • Partial customization of default styles. In this case, the default style is partially changed, allowing to override specific default settings, other settings will remain the same. This way, partners can easily make minor modifications such as unifying fonts and colors with the rest of the site.
  • Extensive customization of default styles. List of all customizable default styles is available to be overridden by the styles provided by a partner. We recommend to use the first option whenever possible.

The JS object containing custom CSS styles must be provided during the form initialization in the init method. See “<showing the checkout3 form article>”. In case no styles are provided during the initialization, defaults are used automatically.

Buttons

Every button in the application is one of a two variants : primary,secondary. Partner is able to customise following css properties for the variants:

Property
Value
buttons.primary.base{}
buttons.primary.base.backgroundColorHex color string
Example: "#FFF"
buttons.primary.base.borderColorHex color string
Example: "#000"
buttons.primary.base.colorHex color string
Example: "#4C4C4C"
buttons.primary.minHeightFloat number
buttons.primary.lineHeightFloat number
buttons.primary.fontWeightInteger number
buttons.primary.fontSizeFloat number
buttons.primary.borderWidthFloat number
buttons.primary.boxShadow{}
buttons.primary.boxShadow.hOffsetFloat number
buttons.primary.boxShadow.vOffsetFloat number
buttons.primary.boxShadow.blurFloat number
buttons.primary.boxShadow.spreadFloat number
buttons.primary.boxShadow.colorHex color string
Example: "#FFF"
buttons.primary.padding{}
buttons.primary.padding.topFloat number
buttons.primary.padding.rightFloat number
buttons.primary.padding.bottomFloat number
buttons.primary.padding.leftFloat number
buttons.primary.hover{}
buttons.primary.hover.backgroundColorHex color string
Example: "#FFF"
buttons.primary.hover.borderColorHex color string
Example: "#FFF"
buttons.primary.hover.colorHex color string
Example: "#FFF"
buttons.primary.disabled{}
buttons.primary.disabled.backgroundColorHex color string
Example: "#FFF"
buttons.primary.disabled.borderColorHex color string
Example: "#FFF"
buttons.primary.disabled.colorHex color string
Example: "#FFF"
buttons.primary.borderRadius{}
buttons.primary.borderRadius.topLeftFloat number
buttons.primary.borderRadius.topRightFloat number
buttons.primary.borderRadius.bottomLeftFloat number
buttons.primary.borderRadius.bottomRightFloat number

Font Families

Partner can specify font families used in the application

PropertyValue
fontFamiliesList of Strings with font family names
Example : ["Lato", "Helvetica"]

Headings

Heading variants that be customized: h1, h2, h3, h4. Each variant can specify following css properties:

PropertyValue
headings.h1.fontSizeFloat number
headings.h1.lineHeightFloat number
headings.h1.displayString specifying display css style
Examples: "block"; "none"; "flex";
headings.h1.fontWeightInteger number
headings.h1.colorHex color string
Example: "#FFF"

Inputs

Global css styles for inputs consist of following css properties:

PropertyValue
input.heightFloat number
input.fontSizeFloat number
input.fontWeightInteger number
input.backgroundColorValidHex color string
Example: "#FFF"
input.backgroundColorInvalidHex color string
Example: "#FFF"
input.backgroundBorderColorHex color string
Example: "#FFF"
input.borderRadius{}
input.borderRadius.topLeftFloat number
input.borderRadius.topRightFloat number
input.borderRadius.bottomLeftFloat number
input.borderRadius.bottomRightFloat number
input.borderWidthFloat number
input.borderStyleString specifying border css style
Examples: "solid"; "dotted";
PropertyValue
footer.fontSizeFloat number
footer.fontWeightFloat number
footer.colorHex color string
Example: "#FFF"

Variants: default, blue, biggerBlue, smallNoDecoration, smallBlack. Each variant can have following css properties:

PropertyValue
links.default.fontSizeFloat number
links.default.fontWeightFloat number
links.default.colorHex color string
Example: "#FFF"
links.default.textDecoration
String specifying text decoration css style
Example: "none"; "underline";
links.default.hover{}
links.default.hover.colorHex color string
Example: "#FFF"
links.default.hover.textDecorationString specifying text decoration css style
Example: "none"; "underline";

Labels

Variants: blue, black, white, disabled, red and darkGray. Each variant can have following css properties:

PropertyValue
labels.blue.colorHex color string
Example: "#FFF"

Icons

Partners can customize payment method icons in the Checkout3. Following icons can be changed: card, directBank, invoice, partPayment, payOnDelivery.

Each icon variant has to specify following properties:

PropertyValue
icons.card.backgroundUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/Svg_example3.svg.png"
icons.card.widthFloat number
icons.card.heightFloat number

Selects

Select elements can be customized with following properties:

PropertyValue
select.borderRadius{}
select.borderRadius.topLeftFloat number
select.borderRadius.topRightFloat number
select.borderRadius.bottomLeftFloat number
select.borderRadius.bottomRightFloat number
select.boxShadow{}
select.boxShadow.hOffsetFloat number
select.boxShadow.vOffsetFloat number
select.boxShadow.blurFloat number
select.boxShadow.spreadFloat number
select.boxShadow.colorHex color string
Example: "#FFF"
select.fontSize
Float number
select.lineHeightFloat number
select.colorHex color string
Example: "#FFF"
select.borderWidthFloat number
select.borderStyleString specifying border css style
Examples: "solid"; "dotted";
select.borderColorHex color string
Example: "#FFF"
select.padding{}
select.padding.topFloat number
select.padding.rightFloat number
select.padding.bottomFloat number
select.padding.leftFloat number
select.margin{}
select.margin.topFloat number
select.margin.rightFloat number
select.margin.bottomFloat number
select.margin.leftFloat number
select.fontWeightInteger number
select.selectArrowUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/aea6a3749caaa.png"

In case you decide to customize select.selectArrowUrl, make sure you use small svg or png image, it will be used as a background with attributes no-repeat , 100% horizontal and 45% vertical positioning (arrow will be placed just below the middle of the right side of the select input).

Checkboxes

Following checkbox types are used in the application: primary, secondary. Partners can change one or both checkboxes and replace them with their custom checkboxes. Please make sure to provide all four variants of icons for checked, unchecked, and disabled checkboxes in order to preserve the style at all times while actions are performed in the application.

PropertyValue
checkbox.primary{}
checkbox.primary.widthFloat number
checkbox.primary.heightFloat number
checkbox.primary.checkedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png"
checkbox.primary.uncheckedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png"
checkbox.primary.checkedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png"
checkbox.primary.uncheckedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png"

Payment method customization

In addition to being able to customize checkboxes in general, partners can decide to replace checkboxes for payment method list – selection, for example, square checkboxes can be replaced by a circular radio button icons.

PropertyValue
paymentMethod.checkbox{}
paymentMethod.checkbox.widthFloat number
paymentMethod.checkbox.heightFloat number
paymentMethod.checkbox.checkedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png"
paymentMethod.checkbox.uncheckedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png"
paymentMethod.checkbox.checkedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png"
paymentMethod.checkbox.uncheckedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png"
paymentMethod.activePaymentMethodLabelColorHex color string
Example: "#FFF"

Please refer to our default “<styles.js>” file , containing all available customizable CSS properties.

Partial customization of default styles

In this case, the default style is partially changed, allowing to override specific default settings, other settings will remain the same. This way, partners can easily make minor modifications such as unifying fonts and colors with the rest of the site. However, if really complex modifications are required, the second mode may be more appropriate.

Example of changing font families globally for the Checkout:

window.avardaCheckoutInit({
    ...
      "styles": {fontFamilies: ['Lato', 'Helvetica']},
    ...
    });

Extensive customization of default styles

const styles = {
  buttons: {
    primary: {
      base: {
        backgroundColor: '#4c4c4c',
        borderColor: '#3f3f3f',
        color: '#fff',
      },
      minHeight: 48,
      lineHeight: 24,
      fontWeight: 700,
      fontSize: 18,
      borderWidth: 1,
      boxShadow: {
        hOffset: 0,
        vOffset: 7,
        blur: 3,
        spread: -3,
        color: '#000',
      },
      padding: {
        top: 10,
        right: 16,
        bottom: 10,
        left: 16,
      },
      hover: {
        backgroundColor: '#333333',
        borderColor: '#212121',
        color: '#fff',
      },
      disabled: {
        backgroundColor: '#25B5BC',
        borderColor: '#25B5BC',
        color: '#FFFFFF',
      },
      borderRadius: {
        topLeft: 4,
        topRight: 4,
        bottomLeft: 4,
        bottomRight: 4,
      },
    },
    secondary: {
      base: {
        backgroundColor: '#fff',
        borderColor: '#dcdcdc',
        color: '#333',
      },
      minHeight: 48,
      lineHeight: 24,
      fontWeight: 500,
      borderWidth: 1,
      fontSize: 16,
      boxShadow: {
        hOffset: 0,
        vOffset: 7,
        blur: 3,
        spread: -3,
        color: '#000',
      },
      padding: {
        top: 10,
        right: 16,
        bottom: 10,
        left: 16,
      },
      hover: {
        backgroundColor: '#e6e6e6',
        borderColor: '#adadad',
        color: '#000',
      },
      disabled: {
        backgroundColor: '#25B5BC',
        borderColor: '#25B5BC',
        color: '#FFFFFF',
      },
      borderRadius: {
        topLeft: 4,
        topRight: 4,
        bottomLeft: 4,
        bottomRight: 4,
      },
    },
  },
  fontFamilies: ['Lato', 'Helvetica'],
  headings: {
    h1: {
      fontSize: 26,
      lineHeight: 30,
      display: 'block',
      fontWeight: 700,
      color: '#000',
    },
    h2: {
      fontSize: 22,
      lineHeight: 26,
      display: 'block',
      fontWeight: 700,
      color: '#000',
    },
    h3: {
      fontSize: 18,
      lineHeight: 20,
      display: 'block',
      fontWeight: 700,
      color: '#000',
    },
    h4: {
      fontSize: 16,
      lineHeight: 16,
      display: 'block',
      fontWeight: 700,
      color: '#000',
    },
  },
  input: {
    height: 50,
    fontSize: 16,
    fontWeight: 400,
    backgroundColorValid: '#fff',
    backgroundColorInvalid: '#fee7e7',
    backgroundBorderColor: '#dcdcdc',
    borderRadius: {
      topLeft: 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    },
    borderWidth: 1,
    borderStyle: 'solid',
  },
  footer: {
    fontSize: 12,
    fontWeight: 400,
    color: '#777777',
  },
  links: {
    default: {
      fontSize: 13,
      fontWeight: 400,
      color: '#4c4c4c',
      textDecoration: 'underline',
      hover: {
        color: '#262626',
        textDecoration: 'underline',
      },
    },
    blue: {
      fontSize: 13,
      fontWeight: 400,
      color: '#009fe3',
      textDecoration: 'underline',
      hover: {
        color: '#006996',
        textDecoration: 'underline',
      },
    },
    biggerBlue: {
      fontSize: 16,
      fontWeight: 400,
      color: '#009fe3',
      textDecoration: 'underline',
      hover: {
        color: '#006996',
        textDecoration: 'underline',
      },
    },
    smallNoDecoration: {
      fontSize: 11,
      fontWeight: 400,
      color: '#4c4c4c',
      textDecoration: 'none',
      hover: {
        color: '#262626',
        textDecoration: 'none',
      },
    },
    smallBlack: {
      fontSize: 11,
      fontWeight: 400,
      color: '#4c4c4c',
      textDecoration: 'underline',
      hover: {
        color: '#262626',
        textDecoration: 'underline',
      },
    },
  },
  icons: {
    card: {
      backgroundUrl: "https://avdonl0p0documentation.blob.core.windows.net/static/Svg_example3.svg.png",
      width: 30,
      height: 30,
    },
  },
  checkbox: {
    primary: {
      width: 20,
      height: 20,
      checkedUrl: 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
      uncheckedUrl: 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
      checkedDisabledUrl:
        'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
      uncheckedDisabledUrl:    'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
    },
  },
  paymentMethod: {
    checkbox: {
      width: 20,
      height: 20,
      checkedUrl: 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
      uncheckedUrl: 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
      checkedDisabledUrl:
        'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
      uncheckedDisabledUrl:    'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
    },
  activePaymentMethodLabelColor: "#25B5BC",
  },
  select: {
    borderRadius: {
      topLeft: 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    },
    boxShadow: {
      hOffset: 0,
      vOffset: 1,
      blur: 4,
      spread: 0,
      color: '#00000014',
    },
    fontSize: 16,
    lineHeight: 20,
    height: 30,
    color: '#000000',
    borderWidth: 0,
    borderStyle: 'solid',
    borderColor: '#000000',
    padding: {
      top: 1,
      right: 5,
      bottom: 1,
      left: 5,
    },
    margin: {
      top: 5,
      right: 0,
      bottom: 5,
      left: 0,
    },
    fontWeight: 100,
    selectArrowUrl: 'https://avdonl0p0documentation.blob.core.windows.net/static/aea6a3749caaa.png'
  },
};
   

Please note that due to the nature of the application, the styles may change without a prior notice.