Guides
API Reference

Skin Customisation

In this section, you will learn about how to customise the ANYpay Checkout Skin

Suggest Edits

Checkout Page Structure

The Checkout Pages are structured in three main parts

  1. Header
  2. Payment Section
  3. Footer

Default Skin

The default skin that will configured against each account will be with PXP's branding as shown below.

1006

Checkout Selection Screen where you are presented to select your payment method

991

Checkout Payment Screen where you are requested to enter your chosen payment information

Custom Skin

Should the Merchant wish to customise the the look & feel of ANYpay Checkout, they can do so by configuring their requirements within a theme file, called the theme.less which is in CSS format.

Below is the contents of the theme.less file and all of the parameters and sections which can be customised.

It is assumed that the developer will have some CSS knowledge.
For more information, please see https://www.w3schools.com/css/default.asp

Alongside the theme.less file, the merchant will be required to provide a logo.png file with a copy of their company/brand logo with the dimensions 223x95 pixels and a bit depth of 32. The logo is not shown on the Checkout page if displayed in an iframe but the file is still required in order to obtain a skin ID.

@import "..\..\variables.less";
@import "..\..\base.less";

@site-background-color:#FFFFFF;
@primary-accent-color:#030A3A;
@secondary-accent-color:#0C6EFD;

@primary-font-color:#646F79;
@primary-header-color:#FFFFFF;

@inverted-font-color:#dddddd;
@inverted-header-color:#eeeeee;

@item-background-color1: #888888;
@item-background-color2: #FFFFFF;

@error-field-border-color: #ff0000;
@error-field-background-color: #ffcccc;

@infobox-offset-top:0px;
@border-radius: 5px;

button.button-pay{background-color:@primary-accent-color}

.selectedPaymentMethodLogo
{
    border: 2px solid @primary-accent-color
}

button.button-custom {
	background-color:@primary-accent-color;
	border-bottom:1px solid @primary-accent-color;
}
	
.button-custom:hover {
    background-color:@primary-accent-color;
	border-bottom:1px solid @primary-accent-color;
}
	
.button-custom:active {
    background-color:@primary-accent-color;
	border-bottom:1px solid @primary-accent-color;
}

.form .section .select-group .select.error{
		border: 1px solid #e0635b;
	}

body{
    background-color:@site-background-color;
}

h1
{
	font-size: 36px;
}

h2
{
	font-size: 30px;
}

h3
{
	font-size: 24px;
}

h4
{
	font-size: 18px;
}

h5
{
	font-size: 14px;
}

/*define header appearence*/
/*Uncomment your chosen option*/
//.header_noHeader();
//.header_logoWithTextCentered();
//.header_logoWithTextLeft();
//.header_logoNoTextCentered();
.header_logoNoTextLeft();

/*define header appearence when Checkout is loaded in an iFrame*/
/*Uncomment your chosen option*/
//.header_inIframe_showFullHeader();
.header_inIframe_hideFullHeader();
//.header_inIframe_hideBannerOnly();
//.header_inIframe_hideInfoboxOnly();


//***Exit Button Options***
//.backlinkIcon(@iconfont:'icomoon-ultimate', @iconchar:'\e1d7', @iconsize:3em, @posTopValue:1em, @posRightValue:2em )
//.backlinkIcon();

//Shows text (e.g. 'Exit') instead of icon. 
//.backlinkText(@fontsize:1em, @posTopValue:1em, @posRightValue:2em)
.backlinkText(1.6em, 0.3em, 1em);

//.pageBanner( @pb-back:#0D522E, @ph-back:#0D522E, @font-color:#FFFFFF, @topPadOuter:1em, @bottomPadOuter:3em, @topPadInner:1em, @bottomPadInner:1em)
.pageBanner(@primary-header-color, @primary-header-color, @primary-accent-color, 1em, 1em, 1em, 1em);

//.infoboxcontainer( @ic-back:transparent, @ib-back:#dddddd, @font-color:#333333, @topPadOuter:1em, @bottomPadOuter:1em, @topPadInner:1em, @bottomPadInner:1em)
.infoboxcontainer(   @item-background-color2, @item-background-color2, #212529, 0em, 0em, 1em, 1em);

//.infobox(@pos:-40px, @padding:1em 0, @border-radius:5px, @font-size:1.3em, @font-color:#333)
.infobox(@infobox-offset-top, 1em 0, @border-radius, 1.2em, @primary-font-color);

//.line(  @lback:#ddd, @font-color:#666, @font-size:1.1em, @border:2px solid #bbb )
.line(@item-background-color2, @primary-font-color, 1.1em, 2px solid @inverted-header-color );
.lineSelected(  @primary-accent-color,@inverted-font-color, 1.1em, 2px solid @inverted-font-color,@site-background-color);

//.paymentmethods(@pmlogoback:#ccc, @pmlogopadding-top-bottom:1em, @pmtextback:#222, @pmtextcolor:#fff, @borderradius:5px, @pmtextfontsize:0.8em)
.paymentmethods(@item-background-color2, 1em, @primary-accent-color, @inverted-font-color, @border-radius, 0.9em );
.hideFeesAndLimits();

//.footer(  @fback:#0D522E, @height:5em, @margin:1.5em 0 0.5em, @font-size:1.1em, @color:#FFFFFF, @iconspace:42px, @iconspaceborderradius:50%, @topicon-font:'FontAwesome',@topiconchar:'\f077', @topiconsize:2em )
.footer();

.footer_inIframe_hideFooter();

.validationSummary();
.errorField(@errormain: @error-field-border-color, @errorsoft: @error-field-background-color);

.exitConfirmModal();

.deleteConfirmModal();

div.container.padSides{
    padding-left:10px;
    padding-right:10px;
}

.backLinkInternal {
    padding-top:1em;
    display:block;
    a{
        color: @primary-accent-color;
        font-size: 1.1em;
        text-decoration:none;
    }
    a:before {
      font-family: 'FontAwesome';
      speak: none;
      -webkit-font-smoothing: antialiased;
      content: "\f060";
      padding-right:0.5em;
  
    }
}

.forwardLinkInternal {
    padding-top:1em;
    display:block;
    a{
        color: @primary-accent-color;
        font-size: 1.1em;
        text-decoration:none;
    }
    a:before {
      font-family: 'FontAwesome';
      speak: none;
      -webkit-font-smoothing: antialiased;
      content: "\f061";
      padding-right:0.5em;
  
    }
}

.modal {
 	margin-left: 0px;
 	display: none;
 	position: fixed;
 	z-index: 1050 !important;
 	top: 0;
 	left: 0;
 	height: 100%;
 	width: 100%;
 	background: rgba(255, 255, 255, .8)
 	url(../Images/modal.gif)
 	scroll
 	50% 50%
 	no-repeat;
 	opacity: 0.80;
 	-ms-filter: progid:DXImageTransform..Microsoft.Alpha(opacity=80);
 	filter: alpha(opacity=80)
 }
 
 body.loading {
 	overflow: hidden;
 }

 body.loading .modal {
 	display: block;
 }

//.hidePaymentdetailHeaders();
.showPaymentdetailHeaders();

.disabled-button {
	background-color: @inverted-font-color !important;
	color: @primary-font-color;
}

.page-banner .pageHeader div.customerLogo img{
	 max-height:56px;
}

.page-banner{
	border-bottom: 1px solid black;
}

div.line{
	border-radius: 5px;
    border: 0.13em solid @primary-accent-color;
    margin-bottom: 2px;
}

div.line span.select:before{
	color: @primary-accent-color;
}

footer table,
footer .footer-line {
	background-color: @primary-accent-color;
}

.logoback{
	border: 1px solid @primary-accent-color;
}

footer .footer-line a.go-top:before {
	color: @primary-accent-color;
}

.container .portfolio-container .work-post .work-post-content {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

h1, h2, h3, h4{
	color: #212529;
}

p, h5, h6{
	color: #646F79;
}

.backlink span.exitLinkText {
	line-height: 107%;
	border-width: 2px;
	top: 0.1em;
	right: 0.1em;
}

.page-banner .pageHeader {
    min-height: 29px !important;
}

@media (min-width: 400px){
	.page-banner .pageHeader div.customerLogo img {
		margin-left: -30px;
	}
}

div#formPaymentMethod {
    margin-top: -4px;
}

div.line span.select {
    vertical-align: middle !important;
}

.tooltip::after{
	background: @primary-accent-color !important;
}

button.button-pay {
    background-color: #0C6EFD;
}

Updated about 2 years ago