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. Custom styles can be provided in the following ways:

  • Partial customization of default styles. In this case, the default style is partially changed, allowing to override of 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. A list of all customizable default styles is available to be overridden by the styles provided by a partner. We recommend using 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 two variants : primary,secondary. Partner is able to customise the following CSS properties for the variants:

Property
Value
buttons.mainActionsButtonWidthPctFloat number
Width of main actions buttons in percentage
buttons.capitalizedButtonLabelTrue/False
Sets all buttons to uppercase
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
buttons.primary.fontStyleString of value: "normal"|"italic"|"oblique"|"initial"|"inherit"

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 the 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"
headings.h1.alignmentString of value: "center"|"left"|"right"
headings.h1.fontStyleString of value: "normal"|"italic"|"oblique"|"initial"|"inherit"

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.borderColorFocusedHex color string
Example: "#FFF"
input.borderWidthFloat number
input.borderRadiusFloat number
input.focusOutlineColorHex color string
Example: "#FFF"
input.disabled{}
input.disabled.backgroundColorHex color string
Example: "#FFF"
input.disabled.borderColorHex color string
Example: "#FFF"
input.disabled.colorHex color string
Example: "#FFF"
input.placeholderColorHex color string
Example: "#FFF"
input.colorHex color string
Example: "#FFF"
input.fontStyleString of value: "normal"|"italic"|"oblique"|"initial"|"inherit"
PropertyValue
footer.fontSizeFloat number
footer.fontWeightFloat number
footer.colorHex color string
Example: "#FFF"
footer.iconLabelColorHex color string
Example: "#FFF"

Variants: black, footerTermsAndConditions. Each variant can have the following CSS properties:

PropertyValue
links.black.fontSizeFloat number
links.black.fontWeightFloat number
links.black.colorHex color string
Example: "#FFF"
links.black.textDecoration
String specifying text decoration CSS style
Example: "none"; "underline";
links.black.disabled{}
links.black.disabled.colorHex color string
Example: "#FFF"
links.black.disabled.textDecorationString specifying text decoration CSS style
Example: "none"; "underline";
links.black.hover{}
links.black.hover.colorHex color string
Example: "#FFF"
links.black.hover.textDecorationString specifying text decoration CSS style
Example: "none"; "underline";
links.black.fontStyleString of value: "normal"|"italic"|"oblique"|"initial"|"inherit"

Labels

Variants: active, disabled and error. Each variant can have the following CSS properties:

PropertyValue
labels.active{}
labels.active.colorHex color string
Example: "#FFF"

Icons

Partners can customize payment method icons in Checkout3. The following icons can be changed: card, directBank, invoice, partPayment, payOnDelivery, loanPayment, paymentHandledByPartner1, paymentHandledByPartner2, paymentHandledByPartner3.

All paymentHandledByPartner options by default do not have a fallback icon and you either have to provide the backgroundUrl or no icon will appear. Also, both the WIDTH and HEIGHT for these icons are required – WON’T WORK WITHOUT IT. The rest of the icons have a fallback icon that is shown if no backgroundUrl is provided and works with only width, only height or both provided.

Each icon variant has to specify the following properties:

PropertyValue
icons{}
icons.card{} object for specific variant styles
icons.card.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example: "https://avdonl0p0documentation.blob.core.windows.net/static/default_AvardaIconCard.svg"
icons.card.colorTo use default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
icons.card.widthFloat number
icons.card.heightFloat number

Selects

Select elements can be customized with the 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.base.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.disabled.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

The 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 six variants of icons for checked, unchecked, checkedDisabled, uncheckedDisabled, checkedInvalid and uncheckedInvalid 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.checked{}
checkbox.primary.checked.backgrondUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryChecked.svg"
checkbox.primary.checked.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.unchecked{}
checkbox.primary.unchecked.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example: "https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryUnchecked.svg"
checkbox.primary.unchecked.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.checkedDisabled{}
checkbox.primary.checkedDisabled.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryCheckedDisabled.svg"
checkbox.primary.checkedDisabled.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.uncheckedDisabled{}
checkbox.primary.uncheckedDisabled.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxPrimaryUncheckedDisabled.svg"
checkbox.primary.uncheckedDisabled.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.checkedInvalid{}
checkbox.primary.checkedInvalid.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedChecked.svg"
checkbox.primary.checkedInvalid.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.uncheckedInvalid{}
checkbox.primary.uncheckedInvalid.backgroundUrlString specifying a public URL to an icon image – use only backgroundUrl or only color
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedUnchecked.svg"
checkbox.primary.uncheckedInvalid.colorTo use the default icon with customized color – use only backgroundUrl or only color
Hex color string
Example: "#FFF"
checkbox.primary.focusOutlineColorHex color string
Example: "#FFF"
checkbox.primary.checkedLabelColorHex color string
Example: "#FFF"

Payment section customization

Through this property, you can customize the look of the payment section as a whole.

PropertyValue
paymentSection{}
paymentSection.borderWidthFloat number
paymentSection.borderColorHex color string
Example: "#FFF"
paymentSection.backgroundColorHex color string
Example: "#FFF"
paymentSection.borderRadiusFloat number
paymentSection.cardTypeSwitch{}
paymentSection.cardTypeSwitch.selectedBackgroundColorHex color string
Example: "#FFF"
paymentSection.cardTypeSwitch.unselectedBackgroundColorHex color string
Example: "#FFF"
paymentSection.cardTypeSwitch.selectedColorHex color string
Example: "#FFF"
paymentSection.cardTypeSwitch.unselectedColorHex color string
Example: "#FFF"

Payment method customization

In addition to being able to customize the whole payment method section, you can pass styles specific directly for payment methods.

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

Amount to Pay section customization

PropertyValue
amountToPayStyles{}
amountToPayStyles.alignmentString of value: "center"|"left"|"right"
amountToPayStyles.fontWeightInteger number
amountToPayStyles.lineHeightFloat number
amountToPayStyles.fontSizeFloat number
amountToPayStyles.fontStyleString of value: "normal"|"italic"|"oblique"|"initial"|"inherit"
amountToPayStyles.colorHex 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
backgroundBorderRadiusFloat number
BorderRadius of common elements that can’t be edited directly
commonBorderColorHex color string
Example: "#FFF"
The border color of common elements that don’t otherwise have a specified border color, should be the same as input.borderColor
spinnerColorHex color string
Example: "#FFF"
Color for initial Avarda logo spinner

PaymentSection customization options

Payment options are customized by the same properties as ‘payment method’ and in addition, there are two more properties which can be customized.

PropertyValue
activeBorderWidthFloat number
Border width for selected payment option
borderRadiusFloat number
Border radius for payment options

Partial customization of default styles

In this case, the default style is partially changed, allowing to override of 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 the “Blue” theme of the application.

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