Created with Sketch.
Created with Sketch.
Checkout 3.0

Custom CSS Styles

The Checkout 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 Checkout form. 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.borderRadiusFloat 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.borderColorHex color string
Example: "#FFF"
input.borderWidthFloat number
input.borderRadiusFloat number
input.focusOutlineColorHex color string
Example: "#FFF"
input.hintColorHex color string
Example: "#FFF"
input.placeholderColorHex color string
Example: "#FFF"
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{}
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, loanPayment.

Each icon variant has to specify following properties:

PropertyValue
icons{}
icons.labelColorHex color string
Example: "#FFF"
icons.card{} object for specific variant styles
icons.card.backgroundUrlString specifying a public URL to an icon image
Example: "https://avdonl0p0documentation.blob.core.windows.net/static/default_AvardaIconCard.svg"
icons.card.widthFloat number
icons.card.heightFloat number

Selects

Select elements can be customized with following properties:

PropertyValue
select.base{}
select.base.backgroundColorHex color string
Example: "#FFF"
select.base.colorHex color string
Example: "#FFF"
select.base.borderColorHex color string
Example: "#FFF"
select.selectArrowUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_selectArrow.svg"
select.disabled{}
select.disabled.backgroundColorHex color string
Example: "#FFF"
select.disabled.colorHex color string
Example: "#FFF"
select.disabled.borderColorHex color string
Example: "#FFF"
select.selectArrowUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_selectArrow.svg"
select.fontSizeFloat number
select.lineHeightFloat number
select.heightFloat number
select.borderWidthFloat number
select.fontWeightInteger number

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/default_CheckboxPrimaryChecked.svg"
checkbox.primary.uncheckedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryUnchecked.svg"
checkbox.primary.checkedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryCheckedDisabled.svg"
checkbox.primary.uncheckedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryUncheckedDisabled.svg"
checkbox.primary.checkedInvalidUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedChecked.svg"
checkbox.primary.uncheckedInvalidUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedUnchecked.svg"
checkbox.primary.focusOutlineColorHex color string
Example: "#FFF"
checkbox.primary.checkedLabelColorHex color string
Example: "#FFF"

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
paymentMethods{}
paymentMethods.selected{}
paymentMethods.selected.labelColorHex color string
Example: "#FFF"
paymentMethods.selected.borderColorHex color string
Example: "#FFF"
paymentMethods.selected.borderWidthFloat number
paymentMethods.selected.backgroundColorHex color string
Example: "#FFF"
paymentMethods.selected.partPaymentPaymentTermSelect{}
paymentMethods.selected.partPaymentPaymentTermSelect.selected{}
paymentMethods.selected.partPaymentPaymentTermSelect.selected.labelColorHex color string
Example: "#FFF"
paymentMethods.selected.partPaymentPaymentTermSelect.selected.borderColorHex color string
Example: "#FFF"
paymentMethods.selected.partPaymentPaymentTermSelect.selected.backgroundColorHex color string
Example: "#FFF"
paymentMethods.selected.bulletIconColorHex color string
Example: "#FFF"
paymentMethods.unselected{}
paymentMethods.unselected.labelColorHex color string
Example: "#FFF"
paymentMethods.unselected.backgroundColorHex color string
Example: "#FFF"
paymentMethods.unselected.borderColorHex color string
Example: "#FFF"

Common customization options

Collection of general options that are used commonly in the application, or are specific only for one purpose.

PropertyValue
amountToPayColorHex color string
Example: "#FFF"
Color of amount to pay summary
backgroundBorderRadiusFloat number
BorderRadius of common elements that can’t be edited directly
commonBorderColorHex color string
Example: "#FFF"
Border color of common elements that don’t otherwise have specified border color, should be the same as input.borderColor

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

Please refer to our default_styles.js file, containing all available customizable CSS properties.

Please refer to our custom_styles_extended_blue.js file, containing styles prepared as an example of “Blue” theme of the application.

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