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:

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:

Font Families

Partner can specify font families used in the application

Headings

Heading variants that be customized: h1, h2, h3, h4. Each variant can specify the following CSS properties:

Inputs

Global CSS styles for inputs consist of following CSS properties:

Footer Text Customization

Links

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

Labels

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

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:

Selects

Select elements can be customized with the following properties:

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.

Payment section customization

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

Payment method customization

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

Amount to Pay section customization

Common customization options

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

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', 'sans-serif']},
    ...
    });

Extensive customization of default styles

Please refer to our default_styles (opens in a new tab).js (opens in a new tab) file, containing all available customizable CSS properties.

Please refer to our custom_styles_extended_blue.js (opens in a new tab) 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.