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 regular button in the application is one of two variants : primary or secondary. Partner is able to customise the following CSS properties for the variants:

Property	Value
`buttons.mainActionsButtonWidthPct`	Float number Width of main actions buttons in percentage
`buttons.capitalizedButtonLabel`	True/False Sets all buttons to uppercase
`buttons.primary.base`	`{}`
`buttons.primary.base.backgroundColor`	Hex color string Example: `"#FFF"`
`buttons.primary.base.borderColor`	Hex color string Example: `"#000"`
`buttons.primary.base.color`	Hex color string Example: `"#4C4C4C"`
`buttons.primary.minHeight`	Float number
`buttons.primary.lineHeight`	Float number
`buttons.primary.fontWeight`	Integer number
`buttons.primary.fontSize`	Float number
`buttons.primary.borderWidth`	Float number
`buttons.primary.boxShadow`	`{}`
`buttons.primary.boxShadow.hOffset`	Float number
`buttons.primary.boxShadow.vOffset`	Float number
`buttons.primary.boxShadow.blur`	Float number
`buttons.primary.boxShadow.spread`	Float number
`buttons.primary.boxShadow.color`	Hex color string Example: `"#FFF"`
`buttons.primary.padding`	`{}`
`buttons.primary.padding.top`	Float number
`buttons.primary.padding.right`	Float number
`buttons.primary.padding.bottom`	Float number
`buttons.primary.padding.left`	Float number
`buttons.primary.hover`	`{}`
`buttons.primary.hover.backgroundColor`	Hex color string Example: `"#FFF"`
`buttons.primary.hover.borderColor`	Hex color string Example: `"#FFF"`
`buttons.primary.hover.color`	Hex color string Example: `"#FFF"`
`buttons.primary.disabled`	`{}`
`buttons.primary.disabled.backgroundColor`	Hex color string Example: `"#FFF"`
`buttons.primary.disabled.borderColor`	Hex color string Example: `"#FFF"`
`buttons.primary.disabled.color`	Hex color string Example: `"#FFF"`
`buttons.primary.borderRadius`	Float number
`buttons.primary.fontStyle`	String of value: `"normal"`\|`"italic"`\|`"oblique"`\|`"initial"`\|`"inherit"`

Pill buttons

Apart from regular buttons, a partner is also able to style pill buttons.

Pills are styled via separate property buttons.pill.

There are two kinds of pills:

Fully customizable pills

These take in all the styles that are specified inside buttons.pill.

Example:

TIP: To achieve link-type look on this kind of button, you can send:

{ 
  buttons.pill.backgroundColor: "#00000000", 
  buttons.pill.textDecoration: "underline" 
}

Partly customisable pills

These respect only buttons.pill.borderRadius from pill customization. The rest of styles (color, backgroundColor,…) matches secondary buttons styles specified in buttons.secondary property.

Example:

Property	Value
`buttons.pill.color`	Hex color string Example: `"#FFF"`
`buttons.pill.backgroundColor`	Hex color string Example: `"#FFF"`
`buttons.pill.borderRadius`	Float number
`buttons.pill.textDecoration`	String of value: “underline”\|”none”

Font Families

Partner can specify font families used in the application

Property	Value
`fontFamilies`	List 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:

Property	Value
`headings.capitalizedHeading`	True/False Sets all headings to uppercase
`headings.h1.fontSize`	Float number
`headings.h1.lineHeight`	Float number
`headings.h1.display`	String specifying display CSS style Examples: `"block"`; `"none"`; `"flex"`;
`headings.h1.fontWeight`	Integer number
`headings.h1.color`	Hex color string Example: `"#FFF"`
`headings.h1.alignment`	String of value: `"center"`\|`"left"`\|`"right"`
`headings.h1.fontStyle`	String of value: `"normal"`\|`"italic"`\|`"oblique"`\|`"initial"`\|`"inherit"`

Inputs

Global CSS styles for inputs consist of following CSS properties:

Property	Value
`input.height`	Float number
`input.fontSize`	Float number
`input.fontWeight`	Integer number
`input.backgroundColorValid`	Hex color string Example: `"#FFF"`
`input.backgroundColorInvalid`	Hex color string Example: `"#FFF"`
`input.borderColor`	Hex color string Example: `"#FFF"`
`input.borderColorFocused`	Hex color string Example: `"#FFF"`
`input.borderWidth`	Float number
`input.borderRadius`	Float number
`input.focusOutlineColor`	Hex color string Example: `"#FFF"`
`input.disabled`	`{}`
`input.disabled.backgroundColor`	Hex color string Example: `"#FFF"`
`input.disabled.borderColor`	Hex color string Example: `"#FFF"`
`input.disabled.color`	Hex color string Example: `"#FFF"`
`input.placeholderColor`	Hex color string Example: `"#FFF"`
`input.color`	Hex color string Example: `"#FFF"`
`input.fontStyle`	String of value: `"normal"`\|`"italic"`\|`"oblique"`\|`"initial"`\|`"inherit"`

Footer Text Customization

Property	Value
`footer.fontSize`	Float number
`footer.fontWeight`	Float number
`footer.color`	Hex color string Example: `"#FFF"`
`footer.iconLabelColor`	Hex color string Example: `"#FFF"`

Links

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

Property	Value
`links.black.fontSize`	Float number
`links.black.fontWeight`	Float number
`links.black.color`	Hex color string Example: `"#FFF"`
`links.black.textDecoration`	String specifying text decoration CSS style Example: `"none"`; `"underline"`;
`links.black.disabled`	`{}`
`links.black.disabled.color`	Hex color string Example: `"#FFF"`
`links.black.disabled.textDecoration`	String specifying text decoration CSS style Example: `"none"`; `"underline"`;
`links.black.hover`	`{}`
`links.black.hover.color`	Hex color string Example: `"#FFF"`
`links.black.hover.textDecoration`	String specifying text decoration CSS style Example: `"none"`; `"underline"`;
`links.black.fontStyle`	String of value: `"normal"`\|`"italic"`\|`"oblique"`\|`"initial"`\|`"inherit"`

Labels

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

Property	Value
`labels.active`	`{}`
`labels.active.color`	Hex color string Example: `"#FFF"`

Icons

Partners can customize payment method icons in Checkout3. The following icons can be changed: card, directBank, invoice, b2bInvoice, 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:

Property	Value
`icons`	`{}`
`icons.card`	`{}` object for specific variant styles
`icons.card.backgroundUrl`	String 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.color`	To use default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`icons.card.width`	Float number
`icons.card.height`	Float number
icons.card.alternativeFooterIcon	`String specifying an alternative public URL to an icon image. If used, it will be the main source for an icon image, overwriting public URL string from backgroundUrl. Only use this, if you want to use an alternative icon. For default public url to an icon image use backgroundUrl. Example: "https://avdonl0p0documentation.blob.core.windows.net/static/default_Alt_AvardaIconCard.svg"`

Selects

Select elements can be customized with the following properties:

Property	Value
`select.base`	`{}`
`select.base.backgroundColor`	Hex color string Example: `"#FFF"`
`select.base.color`	Hex color string Example: `"#FFF"`
`select.base.borderColor`	Hex color string Example: `"#FFF"`
`select.base.selectArrowUrl`	String specifying a public URL to an icon image Example: `"https://avdonl0p0documentation.blob.core.windows.net/static/default_selectArrow.svg"`
`select.disabled`	`{}`
`select.disabled.backgroundColor`	Hex color string Example: `"#FFF"`
`select.disabled.color`	Hex color string Example: `"#FFF"`
`select.disabled.borderColor`	Hex color string Example: `"#FFF"`
`select.disabled.selectArrowUrl`	String specifying a public URL to an icon image Example: `"https://avdonl0p0documentation.blob.core.windows.net/static/default_selectArrow.svg"`
`select.fontSize`	Float number
`select.lineHeight`	Float number
`select.height`	Float number
`select.borderWidth`	Float number
`select.fontWeight`	Integer 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.

Property	Value
`checkbox.primary`	`{}`
`checkbox.primary.width`	Float number
`checkbox.primary.height`	Float number
`checkbox.primary.checked`	`{}`
`checkbox.primary.checked.backgrondUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.unchecked`	`{}`
`checkbox.primary.unchecked.backgroundUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.checkedDisabled`	`{}`
`checkbox.primary.checkedDisabled.backgroundUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.uncheckedDisabled`	`{}`
`checkbox.primary.uncheckedDisabled.backgroundUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.checkedInvalid`	`{}`
`checkbox.primary.checkedInvalid.backgroundUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.uncheckedInvalid`	`{}`
`checkbox.primary.uncheckedInvalid.backgroundUrl`	String 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.color`	To use the default icon with customized color – use only `backgroundUrl` or only `color` Hex color string Example: `"#FFF"`
`checkbox.primary.focusOutlineColor`	Hex color string Example: `"#FFF"`
`checkbox.primary.checkedLabelColor`	Hex color string Example: `"#FFF"`

Payment section customization

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

Property	Value
`paymentSection`	`{}`
`paymentSection.borderWidth`	Float number
`paymentSection.borderColor`	Hex color string Example: `"#FFF"`
`paymentSection.backgroundColor`	Hex color string Example: `"#FFF"`
`paymentSection.borderRadius`	Float number
`paymentSection.cardTypeSwitch`	{}
`paymentSection.cardTypeSwitch.selectedBackgroundColor`	Hex color string Example: `"#FFF"`
`paymentSection.cardTypeSwitch.unselectedBackgroundColor`	Hex color string Example: `"#FFF"`
`paymentSection.cardTypeSwitch.selectedColor`	Hex color string Example: `"#FFF"`
`paymentSection.cardTypeSwitch.unselectedColor`	Hex 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.

Property	Value
`paymentMethods`	`{}`
`paymentMethods.selected`	`{}`
`paymentMethods.selected.labelColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect`	`{}`
`paymentMethods.selected.partPaymentPaymentTermSelect.selected`	`{}`
`paymentMethods.selected.partPaymentPaymentTermSelect.selected.labelColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect.selected.borderColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect.selected.backgroundColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect.unselected`	`{}`
`paymentMethods.selected.partPaymentPaymentTermSelect.unselected.labelColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect.unselected.borderColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.partPaymentPaymentTermSelect.unselected.backgroundColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.bulletIconColor`	Hex color string Example: `"#FFF"`
`paymentMethods.selected.radioButtonColor`	Hex color string Example: `"#FFF"`
`paymentMethods.unselected`	`{}`
`paymentMethods.unselected.labelColor`	Hex color string Example: `"#FFF"`
`paymentMethods.unselected.radioButtonColor`	Hex color string Example: `"#FFF"`
`paymentMethods.unselected.bulletIconColor`	Hex color string Example: `"#FFF"`

Amount to Pay section customization

Property	Value
`amountToPayStyles`	{}
`amountToPayStyles.alignment`	String of value: `"center"`\|`"left"`\|`"right"`
`amountToPayStyles.fontWeight`	Integer number
`amountToPayStyles.lineHeight`	Float number
`amountToPayStyles.fontSize`	Float number
`amountToPayStyles.fontStyle`	String of value: `"normal"`\|`"italic"`\|`"oblique"`\|`"initial"`\|`"inherit"`
`amountToPayStyles.color`	Hex 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.

Property	Value
`backgroundBorderRadius`	Float number BorderRadius of common elements that can’t be edited directly
`commonBorderColor`	Hex 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`
`spinnerColor`	Hex 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.

Property	Value
`activeBorderWidth`	Float number Border width for selected payment option
`borderRadius`	Float 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.