Styling Your Brand on the Payment Page
Integrate hosted payments to apply your brand styling to the payment page using elements from your browser’s developer tools.

The following sample code includes class
and id
to style the payment page with your desired branding:
<style>
.Clearent-header {
height: 90px;
background-color: #E8F2FE;
border-radius: 5px 5px 0 0;
}
.Clearent-merchant-logo {
background-image: url('images/logo_gears.png');
background-size: 100px 100px;
background-repeat: no-repeat;
height: 100px;
width: 100px;
float: left;
}
.Clearent-title {
margin-top: 5px;
margin-left: 10px;
float: left;
font-size: 30px;
font-weight: bold;
color: #fff;
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 3px black;
}
.Clearent-body {
clear: both;
padding-top: 0px;
}
.Clearent .glyphicon {
color: #888;
font-weight: bold;
}
.Clearent .input-group-addon {
border-color: #337AB7;
}
.Clearent .form-control {
border-color: #337AB7;
}
.Clearent-cancel,
.Clearent-submit {
text-transform: lowercase;
}
.Clearent-submit {
border-color: #ccc;
background-color: #E8F2FE;
color: #000;
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 3px #fff;
}
.Clearent-submit:hover {
background-color: #fff;
}
</style>
Last updated
Was this helpful?