Estonia Checkout

Custom CSS Styles

The Checkout Estonia 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 more like a partner’s page that redirects to it. A custom styles can be provided in following ways:

Partial customisation of default styles. In this case, the default style is partially changed, allowing to override specific default settings, other settings will remain the same. This way, partners can easily make minor modifications such as unifying fonts and colours with their site.
Extensive customisation of default styles. List of all customisable default styles is available to be overridden by the styles provided by a partner. We recommend to use the first option whenever possible.

JSON object containing custom CSS styles must be uploaded to /api/Partner/customstyles. Partner has to use access token in order to get authorised with our backend application, see Embed Checkout Estonia. Additionally during the payment initialisation, partner should send useCustomStylesflag. In case flag is not provided during the initialisation, or is sent as false defaults are used automatically. (see Embed Checkout Estonia)

Partial customisation of default styles

Example of changing font families globally for the Checkout Estonia:

# Save custom styles JSON for Checkout Estonia
POST {api_url}/api/Partner/customstyles
Content-type: application/json
Authorization: Bearer {partner_access_token} 

{
    "fontFamilies": [
        "Arial Black",
        "Gadget",
        "sans-serif"
    ],
}

Adjust the payment initialisation call accordingly and set useCustomStylesto true:

# Initialise payment
POST {api_url}/api/Partner/payment
Content-type: application/json
Authorization: Bearer {partner_access_token} 

{
  "items": [
    {
      "description": "string",
      "amount": 0,
      "taxAmount": 0,
      "taxCode": "string",
      "notes": "string"
    }
  ],
  "orderReference": "string",
  "merchantUrl": "string",
  "campaignCode": "string",
  "useCustomStyles": true
}

List of properties

Buttons

Every button in the application is one of a two variants : primary,secondary. Partner is able to customise following css properties for the variants:

Property	Value
`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

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 following css properties:

Property	Value
`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"`

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.borderColor`	Hex color string Example: `"#FFF"`
`input.borderWidth`	Float number
`input.placeholderColor`	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"`

Links customization

Variants: black, primary. Each variant can have 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.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.disabled`	`{}`
`links.black.disabled.color`	Hex color string Example: `"#FFF"`
`links.black.disabled.textDecoration`	String specifying text decoration css style Example: `"none"`; `"underline"`;

Checkboxes

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_ch_est_CheckboxPrimaryChecked.svg"`
`checkbox.primary.checked.color`	To use 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_ch_est_CheckboxPrimaryUnchecked.svg"`
`checkbox.primary.unchecked.color`	To use 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_ch_est_CheckboxPrimaryCheckedDisabled.svg"`
`checkbox.primary.checkedDisabled.color`	To use 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_ch_est_CheckboxPrimaryUncheckedDisabled.svg"`
`checkbox.primary.uncheckedDisabled.color`	To use 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 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_ch_est_CheckboxRedUnchecked.svg"`
`checkbox.primary.uncheckedInvalid.color`	To use 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"`

Labels customization

Variants: active, disabled, error. Each variant can have following css properties:

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

Header

Header customisation

Property	Value
`header.backgroundColor`	Hex color string Example: `"#FFF"`
`header.fontColor`	Hex color string Example: `"#FFF"`
`header.activeLanguageUnderlineColor`	Hex color string Example: `"#FFF"`
`header.customerNameColor`	Hex color string Example: `"#FFF"`
`header.logo`	`{}`
`header.logo.backgroundUrl`	String specifying a public URL to an icon image Example: `"https://avdonl0p0documentation.blob.core.windows.net/static/Elm_logo.svg.png"`
`header.logo.width`	Float number
`header.logo.height`	Float number
`header.mobileMenuBorderColor`	Hex color string Example: `"#FFF"`

Extensive customisation of default styles

Please refer to our default_styles.json file, containing all available customizable CSS properties.

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