Hosted Payment Page Styling Guide

Version info

Version 2.2 - Release 23.07

1. Detailed component descriptions

This guide describes the basic html elements in detail, including global components and specific CSS rules used for browser compatibility.

A merchant specific stylesheet should only contain the elements that needs to be changed. Remaining elements will be styled according to the Market Pay Gateway Hosted Payment Page default stylesheet.

1.1. Global components

Each section contains a screenshot of the specific element, its description, and the most relevant CSS.

1.1.1 .header

.header – used as the header for payment summary section.

.header {
    background-color: #f9f9f9;
    color: #3e3e3e;
    margin-bottom: 1.429em;
    padding: 1.429em;
    border: 1px solid #cacaca;
}

.titleHeader – contains the elements for the mobile payment header, hidden in the web version.

.paymentSummary – used as a wrapper for the payment summary content.

1.1.2 .summaryLine

.summaryLine – used as a wrapper for the payment summary content line.

.amountLine – used as a container for the payment summary amounts line.

.label – used for amount label on the left e.g. “Payment amount”.

.summaryLine .label {
    display: inline-block;
    padding-top: 0px;
}

.amountHolder – holds amount values on the right e.g. “$250.00”.

.summaryLine .amountHolder {
    float: right;
    text-align: right;
    padding-top: 0px;
    display: inline-block;
}

1.1.3 .paymentHeader

.paymentHeader – used as the header for the payment accordion.

.paymentHeader {
    font-size: 1em;
    color: #3e3e3e;
    background-color: #f9f9f9;
    height: 3.286em;
    line-height: 3.286em;
    vertical-align: middle;
    border-top: 1px solid #cacaca;
    width: 100%;
    display: table;
}

.iconHolder – there are two icon holders: one for the circle on the left, and one for the arrow on the right.

.paymentHeader .iconHolder {
    width: 2.857em;
    min-width: 2.857em;
    display: table-cell;
    vertical-align: middle;
}

.paymentHeaderTitle – holds the payment title text.

.paymentHeader .paymentHeaderTitle {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 100%;
    font-weight: normal;
}

1.1.4 .paymentBody, .profilePaymentBody

.paymentBody – used as the main payment container. If the payment is open, has classes – active, animate.

.paymentBody, .profilePaymentBody {
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 0;
    vertical-align: top;
}

.header – contains the elements for the mobile payment header, hidden in the web version.

.cardBody – is used as an example. For every payment this class is unique. It contains the payment specific information inputs and controls.

1.1.5 .walletItem

.walletItem – used as the main container for saved payment method. Additional class active added if the payment is open.

.walletItem {
    overflow-x: hidden;
    position: relative;
    border: 1px solid transparent;
    border-bottom: 1px solid #e4e4e4;
    margin: 0 1.5em;
}

.profilePaymentHeader – contains the header section. Additional class active added if the payment is open.

.profilePaymentHeader {
    display: block;
    text-transform: none;
    border-top: none;
    background-color: transparent;
    height: auto;
    line-height: normal;
    overflow-y: hidden;
}

.profilePaymentBody – contains saved payments. Additional classes active, animate added if the payment is open.

.profilePaymentBody {
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 0;
    vertical-align: top;
}

.profilePaymentBody.edit – acts as a container for the saved payments method edit popup.

1.1.6 .profilePaymentHeader

.profilePaymentHeader – used as the header for the saved payments method.

.profilePaymentHeader {
    display: block;
    text-transform: none;
    border-top: none;
    background-color: transparent;
    height: auto;
    line-height: normal;
    overflow-y: hidden;
}

.profileHeaderMarker – used as a container for saved payments radio button.

.profileHeaderMarker {
    vertical-align: top;
    line-height: 4.25em;
    display: inline-block;
    width: 2.857em;
}

.infoHolder – used as a container for the saved payments logo and additional information.

.walletItem .infoHolder {
    color: #9a9a9a;
    font-weight: normal;
    line-height: normal;
    display: inline-block;
    padding-bottom: 0.417em;
}

.buttonHolder.edit – holds the edit button for the saved payments method.

.walletItem .buttonHolder.edit {
    cursor: pointer;
    text-align: center;
    line-height: 0;
    display: inline-block;
    margin: 1.5em 0.5em 0 0;
    float: right;
}

1.1.7 .dialogBox

.dialogBox – used as a container for all popups on the site. It is also used as an overlay behind the popup. Additional classes active, animate added if popup is open.

.dialogBox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    text-align: left;
}

.dialogBoxBody – used for the actual popup to be seen on the overlay (.dialogBox).

.dialogBox .dialogBoxBody {
    background-color: white; 
    border: 1px solid #cacaca;
    border-radius: 2px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    margin: 2em auto;
    max-width: 80%;
    padding: 1.429em;
    width: 30em;
}

.dialogBoxHeader – used to define the popup header.

.dialogBoxText – used as the container for the main content.

.buttonHolder – contains popup action buttons and acts as a footer.

.dialogBox .buttonHolder {
    margin: 0;
    padding: 0 1.25em 1.25em 1.25em;
    text-align: right;
}

For convenience every popup has a unique class:

.redeemVoucherContainer
.editProfileContainer
.cvcInfo
.confirmDeleteDialog
.termsAndConditionsDialog

1.1.8 .creditCardIcons

.creditCardIcons – used for holding available credit card and 3D security logos for Credit Card payments.

.creditCardIcons {
margin-bottom: 0.833em;
	display: block;
	width: 100%;
}

.cardLogos – used for holding available credit card logos.

.cardLogos {
	display: inline-block;
}

.securityLogoHolder – used for holding available credit card 3D security logos.

.securitylogoHolder {
	display: inline-block;
    	float: right;
}

1.1.9 .inputContainer

figure 119-1

In this example we will use the Card Number Input.

.inputContainer – used for almost any kind of input: text, number, select and auto-complete.

Every input container has an additional class to specify nature of the input. In this example – .cardNumberInput. Additional class active added if the input is focused.

.inputContainer {
    box-sizing: border-box;
    display: table;
    font-size: 1em;
    height: 3em;
    border: 1px solid #cacaca;
    border-radius: 2px;
    position: relative;
    width: 100%;
    margin-bottom: 0.833em;
    padding-right: 0em;
    padding-left: 0.714em;
    padding-right: 1.428em;
    background-color: white;
    -webkit-transition: border 0.2s ease-out;
    -moz-transition: border 0.2s ease-out;
    transition: border 0.2s ease-out;
}

CardNumberInput InputCointainer – consists of:

.labelContainer – which moves to the top left corner when you add classes .filled and .animated to the .inputContainer.

.inputContainer.filled .labelContainer {
    font-size: 75%;
    color: #a0a0a0;
    opacity: 0;    
}

.inputContainer.filled.animated .labelContainer {
    opacity: 1;
    margin-top: 0.6em;
    transition-property: opacity, margin-top;
    transition-duration: 0.1s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

input – which is type="tel" to allow only numbers.

.inputContainer.input {
    border: medium none;
    color: #cbcbcb;
    display: table-cell;
    font-size: inherit;
    height: 1.4em;
    padding-top: 0.632em;
    width: 100%;
    background-color: transparent;
    padding-left: 0;
    transition: padding-top 0.2s ease-out;
    -webkit-transition: padding-top 0.2s ease-out;
    -moz-transition: padding-top 0.2s ease-out;
}

figure 119-2

.errorMsg – used to store error messages. An additional class .error is added to the .inputContainer, to indicate the incorrect information. The error message is displayed as a tooltip.

.inputContainer + .errorMsg {
    position: absolute;
    color: white;
    z-index: 1000;
    background-color: #1c272d;
    border-radius: 2px;
    padding: 1em;
    width: 23.833em;
    -ms-transform: translate(-90%, 0);
    -webkit-transform: translate(-90%, 0);
    transform: translate(-90%, 0);
    display: none;
    text-align: center;
    left: 278px;
    bottom: 42px;
}

.inputContainer.error {
    border-color: #e71d32;
}

.inputContainer.error:before, .inputContainer.error:after – used to draw an X sign on error in the .inputContainer.

.inputContainer.error:after,
.inputContainer.error:before {
    content: '';
    position: absolute;
    border: 1px solid #e71d32;
    border-radius: 2px;
    width: 10px;
    right: 6px;
    top: 50%;
}
.inputContainer.error:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.inputContainer.error:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(-45deg);
}

.inputContainer.valid:after – used to draw a check sign if the input contents is valid.

.inputContainer.valid:after{
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    border: 2px solid #6FB55F;
    border-radius: 2px;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 6px;
    top: 40%;
}

1.1.10 .fancySelect, .suggestHolder

This is a custom <select> component. It consist of:

.inputContainer – see the description in 1.1.9 .inputContainer paragraph.

.selectList/.suggestHolder – which is the main container for the select options or the autocomplete options.

.suggestHolder, .selectList {
    position: absolute;
    border: 1px solid #72757C;
    background: no-repeat #FFFFFF;
    display: block;
    z-index: 1001;
    -webkit-transform: translate3d(0,0,1px);
    transform: translate3d(0,0,1px);
}

1.1.11 .checkboxContainer

figure 1111-1

figure 1111-2

For check boxes we use the iCheck resource. Additional information can be found here: https://github.com/drgullin/icheck.

Every check box sits in a .checkboxContainer which consist of:

.icheckbox_square-blue – where the iCheck box is stored.

.icheckbox_square-blue {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 1.429em;
    height: 1.429em;
    background-color: white;
    border: 1px solid #cacaca;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease-out;
    -webkit-transition: border-color 0.2s ease-out;
    -moz-transition: border-color 0.2s ease-out;
}

.icheckbox_square-blue:hover {
    border-color: #72757C;
}

.icheckbox_square-blue.checked {
    background-image: url("images/ui/sprite.svg");
    background-position: 58.621% 0;
    background-size: 3000% auto;
    background-repeat: no-repeat;
    background-color: transparent;
    border-color: #72757C;
}

label – which consist of text that follows the check box.

.checkboxContainer label {
    font-size: 1em;
    vertical-align: middle;
    margin-left: 1em;
}

1.1.12 .commandButton

.commandButton – used for all buttons who either cancel an action or submits the form.

.commandButton, .cancelButton {
    background-color: #1565c0;
    color: white;
    font-size: 1em;
    font-weight: bold;
    height: 3em;
    line-height: 3em;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    padding: 0 1.428em;
    cursor: pointer;
    border: 1px solid #1565c0;
    border-radius: 2px;
    box-sizing: border-box;
    transition: border-color 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out;
    -webkit-transition: border-color 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out;
    -moz-transition: border-color 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out;
}

1.1.13 CSS reset

This section contains a set of CSS rules that resets the styling of most HTML elements to a consistent baseline, since every browser has its own default 'user agent' stylesheet, used to make unstyled websites appear more legible.

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img,
    ins, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
    legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0px;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1;
    position: relative;
    font-size: 14px;
    background-color: white;
}
body.inFrame {
    overflow-y: hidden;
}
button, input {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
input:focus, textarea:focus {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input,:focus {
    outline: none;
}
input:disabled {
    background-color: #FFFFFF;
}
select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}