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"
input.focusedIconColor	Allows changing color of icon when input in focus. Useful in combination with input.focusOutlineColor Hex color string Example: "#FFF"

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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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://avdab0p0documentation.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"
amountToPayStyles.title	{}
amountToPayStyles.title.fontSize	Float number
amountToPayStyles.title.fontWeight	Float number
amountToPayStyles.title.fontStyle	String of value: "normal"|"italic"|"oblique"|"initial"|"inherit"
amountToPayStyles.title.alignment	String of value: "center"|"left"|"right"

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

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.