Styling

PayEx Checkout allows for styling customization of both Checkin and Payment Menu

A merchant can add styling properties to the JavaScript function call, when creating the script tag that inititates the hosted views for Checkin and Payment Menu. 

Example

The style property enables customization of most aspects of the hosted views. Below is a code example with a screenshot of how it affects the hosted views.

JavaScript Object
{
    style: {
        body: {
            backgroundColor: "#555",
            color: "#bbb"
        },
        button: {
            backgroundColor: "#36ac4c",
            color: "#fff"
        },
        secondaryButton: {
            backgroundColor: "#555",
            border: "solid 1px #bbb"
        },
        formGroup: {
            color: "#bbb",
            backgroundColor: "#555"
        },
        label: {
            color: "#bbb"
        }
    }
}

Result

1551703691987-895.png

Elements

The different elements, pseudo-elements and element states that can be styled are provided in the below code example.

JavaScript Object
{
    style: {
        fontFace: [{}],
        body: {},
        menuCard: {
            selected: {}
        },
        instrumentCard: {
            selected: {}
        },
        formGroup: {},  
        label: {},
        input: {
            focus: {},
            invalid: {}   
        },  
        button: {
            active: {},
            hover: {}
        },
        secondaryButton: {
            active: {},
            hover: {}
        },
        infoBox: {},
        header: {},
        link: {}
    }
}

Attributes

The different CSS attributes that can be styled for each elements are provided in the below code example.

JavaScript Object
{
    backgroundColor: "#555",
    border: "1px solid black",
    borderRadius: "5px",
    boxShadow: "10px 5px 5px red;",
    font: "italic small-caps bold normal 14px/1.5em Verdana, Arial, Helvetica, sans-serif",
    color: "hotpink",
    margin: "2px 3px 2px 3px",
    padding: "3px 2px 3px 2px"
}

Special Attributes

Some elements have special attributes in addition to the standard ones. These are showcased below.

JavaScript Object
{
   "fontFace": [
        {
           "fontFamily": "SwedbankHeadlineBold",
           "src": "url(https://ecom.payex.com/externalresourcehost/content/fonts/SBP_SwedbankHeadline-Bold.woff) format('woff')",
           "fontWeight": "600",
           "fontStyle": "normal"
        }
    ],
   "menuCard": {
       "selected": {
           "highlightColor": "#FDC129"
        }
    }
}
PropertyTypeDescription
style.menuCard.selected.highlightColor<color>The color of the top-border of a selected menu card.
style.fontFace.fontFamilystringThe name of the font.
style.fontFace.srcstringThe url and format of the font.
style.fontFace.fontWeightstringThe thickness of the font.
style.fontFace.fontStylestringThe style of the font.

 

Created by Fredrik Köhler on 2018/10/26 11:14