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:
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.
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:
|
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" |
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:
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"
}
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” |
Partner can specify font families used in the application
Property | Value |
fontFamilies | List of Strings with font family names Example : ["Lato", "Helvetica"] |
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" |
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" |
Property | Value |
footer.fontSize | Float number |
footer.fontWeight | Float number |
footer.color | Hex color string Example: "#FFF" |
footer.iconLabelColor | Hex color string Example: "#FFF" |
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" |
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" |
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:
|
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:// |
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:// |
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).
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:// |
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:// |
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:// |
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:// |
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:// |
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:// |
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" |
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" |
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" |
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" |
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 |
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']},
...
});
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.