Created with Sketch.
Created with Sketch.
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.backgroundColorHex color string
Example: "#FFF"
buttons.primary.base.borderColorHex color string
Example: "#000"
buttons.primary.base.colorHex color string
Example: "#4C4C4C"
buttons.primary.minHeightFloat number
buttons.primary.lineHeightFloat number
buttons.primary.fontWeightInteger number
buttons.primary.fontSizeFloat number
buttons.primary.borderWidthFloat number
buttons.primary.boxShadow{}
buttons.primary.boxShadow.hOffsetFloat number
buttons.primary.boxShadow.vOffsetFloat number
buttons.primary.boxShadow.blurFloat number
buttons.primary.boxShadow.spreadFloat number
buttons.primary.boxShadow.colorHex color string
Example: "#FFF"
buttons.primary.padding{}
buttons.primary.padding.topFloat number
buttons.primary.padding.rightFloat number
buttons.primary.padding.bottomFloat number
buttons.primary.padding.leftFloat number
buttons.primary.hover{}
buttons.primary.hover.backgroundColorHex color string
Example: "#FFF"
buttons.primary.hover.borderColorHex color string
Example: "#FFF"
buttons.primary.hover.colorHex color string
Example: "#FFF"
buttons.primary.disabled{}
buttons.primary.disabled.backgroundColorHex color string
Example: "#FFF"
buttons.primary.disabled.borderColorHex color string
Example: "#FFF"
buttons.primary.disabled.colorHex color string
Example: "#FFF"
buttons.primary.borderRadiusFloat number

Font Families

Partner can specify font families used in the application

PropertyValue
fontFamiliesList 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:

PropertyValue
headings.h1.fontSizeFloat number
headings.h1.lineHeightFloat number
headings.h1.displayString specifying display css style
Examples: "block"; "none"; "flex";
headings.h1.fontWeightInteger number
headings.h1.colorHex color string
Example: "#FFF"

Inputs

Global css styles for inputs consist of following css properties:

PropertyValue
input.heightFloat number
input.fontSizeFloat number
input.fontWeightInteger number
input.backgroundColorValidHex color string
Example: "#FFF"
input.backgroundColorInvalidHex color string
Example: "#FFF"
input.borderColorHex color string
Example: "#FFF"
input.borderRadiusFloat number
input.borderWidthFloat number
input.focusOutlineColorHex color string
Example: "#FFF"
input.hintColorHex color string
Example: "#FFF"
input.placeholderColorHex color string
Example: "#FFF"

Variants: default, blue, biggerBlue, smallNoDecoration, smallBlack. Each variant can have following css properties:

PropertyValue
links.default.fontSizeFloat number
links.default.colorHex color string
Example: "#FFF"
links.default.textDecoration
String specifying text decoration css style
Example: "none"; "underline";
links.default.hover{}
links.default.hover.colorHex color string
Example: "#FFF"
links.default.hover.textDecorationString 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 four variants of icons for checked, unchecked, and disabled checkboxes in order to preserve the style at all times while actions are performed in the application.

PropertyValue
checkbox.primary{}
checkbox.primary.widthFloat number
checkbox.primary.heightFloat number
checkbox.primary.checkedUrlString specifying a public URL to an icon image
Example: "https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png"
checkbox.primary.uncheckedUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png"
checkbox.primary.checkedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png"
checkbox.primary.uncheckedDisabledUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png"
checkbox.primary.checkedInvalidUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedChecked.svg"
checkbox.primary.uncheckedInvalidUrlString specifying a public URL to an icon image
Example:
"https://avdonl0p0documentation.blob.core.windows.net/static/default_CheckboxRedUnchecked.svg"
checkbox.primary.focusOutlineColorHex color string
Example: "#FFF"
checkbox.primary.checkedLabelColorHex color string
Example: "#FFF"

Header

Header customisation

PropertyValue
header.backgroundColorHex color string
Example: "#FFF"
header.fontColorHex color string
Example: "#FFF"
header.activeLanguageUnderlineColorHex color string
Example: "#FFF"
header.customerNameColorHex color string
Example: "#FFF"s
header.logo{}
header.logo.backgroundUrlString specifying a public URL to an icon image
Example: "https://avdonl0p0documentation.blob.core.windows.net/static/Elm_logo.svg.png"
header.logo.widthFloat number
header.logo.heightFloat number

Extensive customisation of default styles

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

{
    "buttons": {
        "primary": {
            "base": {
                "backgroundColor": "#4c4c4c",
                "borderColor": "#3f3f3f",
                "color": "#fff"
            },
            "minHeight": 48,
            "lineHeight": 24,
            "fontWeight": 700,
            "fontSize": 18,
            "borderWidth": 1,
            "boxShadow": {
                "hOffset": 0,
                "vOffset": 7,
                "blur": 3,
                "spread": -3,
                "color": "#000"
            },
            "padding": {
                "top": 10,
                "right": 16,
                "bottom": 10,
                "left": 16
            },
            "hover": {
                "backgroundColor": "#333333",
                "borderColor": "#212121",
                "color": "#fff"
            }
        },
        "secondary": {
            "base": {
                "backgroundColor": "#fff",
                "borderColor": "#dcdcdc",
                "color": "#333"
            },
            "minHeight": 48,
            "lineHeight": 24,
            "fontWeight": 500,
            "borderWidth": 1,
            "fontSize": 16,
            "boxShadow": {
                "hOffset": 0,
                "vOffset": 7,
                "blur": 3,
                "spread": -3,
                "color": "#000"
            },
            "padding": {
                "top": 10,
                "right": 16,
                "bottom": 10,
                "left": 16
            },
            "hover": {
                "backgroundColor": "#e6e6e6",
                "borderColor": "#adadad",
                "color": "#000"
            }
        }
    },
    "fontFamilies": [
        "Lato",
        "Helvetica"
    ],
    "headings": {
        "h1": {
            "fontSize": 26,
            "lineHeight": 30,
            "display": "block",
            "fontWeight": 700,
            "color": "#000"
        },
        "h2": {
            "fontSize": 22,
            "lineHeight": 26,
            "display": "block",
            "fontWeight": 700,
            "color": "#000"
        },
        "h3": {
            "fontSize": 18,
            "lineHeight": 20,
            "display": "block",
            "fontWeight": 700,
            "color": "#000"
        },
        "h4": {
            "fontSize": 16,
            "lineHeight": 16,
            "display": "block",
            "fontWeight": 700,
            "color": "#000"
        }
    },
    "input": {
        "height": 50,
        "fontSize": 16,
        "fontWeight": 400,
        "backgroundColorValid": "#fff",
        "backgroundColorInvalid": "#fee7e7",
        "backgroundBorderColor": "#dcdcdc",
        "borderRadius": 0,
        "borderWidth": 1,
        "borderStyle": "solid"
    },
    "links": {
        "default": {
            "fontSize": 13,
            "color": "#4c4c4c",
            "textDecoration": "underline",
            "hover": {
                "color": "#262626",
                "textDecoration": "underline"
            }
        },
        "blue": {
            "fontSize": 13,
            "color": "#009fe3",
            "textDecoration": "underline",
            "hover": {
                "color": "#006996",
                "textDecoration": "underline"
            }
        },
        "biggerBlue": {
            "fontSize": 16,
            "color": "#009fe3",
            "textDecoration": "underline",
            "hover": {
                "color": "#006996",
                "textDecoration": "underline"
            }
        },
        "smallNoDecoration": {
            "fontSize": 11,
            "color": "#4c4c4c",
            "textDecoration": "none",
            "hover": {
                "color": "#262626",
                "textDecoration": "none"
            }
        },
        "smallBlack": {
            "fontSize": 11,
            "color": "#4c4c4c",
            "textDecoration": "underline",
            "hover": {
                "color": "#262626",
                "textDecoration": "underline"
            }
        }
    },
    "checkbox": {
        "primary": {
            "width": 20,
            "height": 20,
            "checkedUrl": "https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png",
            "uncheckedUrl": "https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png",
            "checkedDisabledUrl": "https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png",
            "uncheckedDisabledUrl": "https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png"
        }
    }
    ,"header": {
        "backgroundColor": "#1eff00",
        "fontColor": "#000000",
        "activeLanguageUnderlineColor": "#ffffff",
        "customerNameColor": "#0011ff",
        "logo": {
            "backgroundUrl": "https://avdonl0p0documentation.blob.core.windows.net/static/Elm_logo.svg.png",
            "width": 64,
            "height": 64
        }
    }
}
 

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