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>