Knowledge Center

Knowledge Center > Commerce > Hosted Commerce Pages > Hosted Checkout Pages > Checkout Page CSS

Checkout Page CSS

Zuora Hosted Checkout Pages are no longer under active development. Customers should use Payment Pages 2.0 for their secure payment acceptance requirements.

Overview

This section describes how to modify the CSS for Checkout pages. 

Customize CSS

You edit the CSS of the Checkout iFrame on the Checkout Page edit page to customize the look and feel of the iFrame. The following is an example of a CSS code and the resulting iFrame:

{   color:#8B6508;   background-color:#EED5B7;   font-family:arial;}8B6508

Screen shot 2012-03-20 at 11.01.04 AM.png

In addition to the basic style, various elements of the iFrame are tagged so that individual rows and labels can be customized. See the CSS Fields table below for a full list of the CSS elements tagged in the Checkout page iFrame.

CSS Fields

Use the following CSS fields to customize your Checkout pages:

Style Description
.z_maintable The common style of the outer elements, such as table.
.z_maintable tr The common style of the <tr> elements.
.z_maintable td The common style of the <td> elements.
.z_maintable input[type='text']  The common style of the <input type='text'> elements.
.z_maintable select The common style of the <select> elements.
.z_field_span The default style of the <span> elements which act as placeholder.
.z_field_required The default style of the required field frame, default as Green.
.z_field_error_info_cell The default style of the required field's error message.
.form img The default style of the <img> elements.
.z_breakLine The default style of the <div> elements which act as break line.
.z_custom_info_title_cell The style of the title of Account Info & Billing Info area.
.z_pricing_description_block The style of the Pricing description area, controls background, etc.
.z_pricing_description_inner_block The style of the Pricing description area, controls align and padding, etc.
.z_pricing_description:before The style of the Pricing description area (Radian corner)
.z_pricing_description:after The style of the Pricing description area (Radian corner)
.z_pricing_title_h1 The style of the title of Pricing description area.
.z_free_trial The style of the free trial area, controls text font, size, padding, etc.
.z_rounded_free_trial_block The style of the free trial area, controls background color.
.z_rounded_free_trial:before The style of the free trial area (Radian corner)
.z_rounded_free_trial:after The style of the  free trial area (Radian corner)
.z_charge_name_h2 The style of the charge name.
.z_charge_pricing_p The style of the charge pricing description.
.z_charge_pricing_quantity The  style of the charge pricing quantity input field.
.z_rounded_due_today_div The style of the total due today, controls text align, padding, etc.
.z_rounded_due_today_font span The style of the total due today, controls font, size, etc.
.z_field_captcha_label_cell The style of the Captcha label.
.z_captcha_block The style of the Captcha area, controls the outside frame border etc.
.z_captcha_block_cell The style of Captcha image.
.z_captcha_control_cell The style of Captcha Control Cell which includes the reload/image-only/audio-only/help button.
.z_captcha_reload_cell The style of Captcha Reload button.
.z_captcha_only_if_image_cell The style of Captcha Image-only button.
.z_captcha_only_if_audio_cell The style of Captcha Audio-only button.
.z_captcha_help_cell The style of Captcha Help button.
.z_captcha_input_cell The style of Captcha Response input field.
.z_policy_cell The style of Policy text.
.z_policy_terms The style of the Policy terms link.
.z_field_submit_button_cell The style of the <div> element of the Submit button.
a.z_submit_button The style of the Submit button.
a.z_submit_button span The style of the <span> element of the Submit button.
.z_powered_by The style of the Powered By icon.
.z_supportedTypes_container The default style of the Card Type outer element, controls width, align, etc.
.z_supportedTypes_cell The default style of the Card Type inner elements.
.z_image The default style of the Card Type icons.
.z_image_Visa The style of the Visa Card icon.
.z_label_text_supportedTypes_Visa The style of the Visa Card label.
.z_image_MasterCard The style of the Master Card icon.
.z_label_text_supportedTypes_MasterCard The style of the Master Card label.
.z_image_AmericanExpress The style of the American Express Card icon.
.z_label_text_supportedTypes_AmericanExpress The style of the American Express Card label.
.z_image_Discover The style of the Discover Card icon.
.z_label_text_supportedTypes_Discover The style of the Discover Card label.
.z_field_label_cell

The default style of the Specific field, controls all the custom input label, font color, size, weight, etc.

Some browers do not allow you to override CSS that extends the parent element style. In that case, use !important to mark the CSS. 

.z_field_label_span_cell The default style of <span> elements of the Specific fields.
.z_field_insert_padding The default style of the padding between the Specific fields.
.z_text_input The customization style of the input field.
.z_field_value_cell The customization style of <td> elements of the customer input fields.
.z_field_value_cell_required The customization style of  <td> elements of  the customer input fields(required  ).
.z_field_row The customization style of <tr> elements of the customer input fields.
.z_radio_input The customization style of <input type="radio"> elements of the customer input fields.
.z_select_input The customization style of <select> elements of the customer input fields.
.z_field_info_cell The customization style of <td> elements of the customer input field labels.

CSS Code

Various elements of the iFrame are tagged so individual rows and labels can be customized. You can view the source of the CSS to see the elements. Below is a copy of that source CSS:

<style>
/* CSS Note :
90% of the elements have the identifier - class={CSS NAME}.
 
Some class names are public, E.G. "z_field_label_cell", if you change it, all field label elements will be changed.
Some class names are private, E.G. "z_field_label_cell_firstName". If you change this, only first name elements will be changed.
You can use developer tool OR view page resource to capture the class name.
Override the class name for the page styles.
E.G.
You want to change the "First Name" label text style, capture the "First Name" element from the page resource.
<td class="z_field_label_cell z_field_label_cell_firstName" id="z_field_label_cell_firstName">...</td>
z_field_label_cell is the common name, other element also using this, if you want to change all, override it.
.z_field_label_cell{
font-size:20px;
}
z_field_label_cell_firstName only for first name element.
.z_field_label_cell_firstName{
font-size:20px;
}
By default, we provide some common/special elements CSS for genanter page at below, you can override them.
 */
/* ############################ PAGE STYLES ############################ */
/* ############################ MAIN TABLE COMMON STYLES ############################ */
.z_maintable{
/* MAIN FRAME FOR THE PAGE, OTHER/ALL ELEMENTS IN THIS TABLE */
font-family:Segoe UI,Arial,sans-serif;/* AS DEFAULT FONT FAMILY ON THE PAGE */
font-size:14px;/* USE TO CONTROL THE DEFAULT FONT SIZE */
}
.z_maintable tr {
height: 25px; /* USE TO CONTROL THE <tr> ELEMENT HEIGHT */
vertical-align: middle;/* USE TO CONTROL THE <tr>INSIDE ELEMENTS</tr> VERTICAL ALIGN */
}
.z_maintable td {
vertical-align: middle;  /* USE TO CONTROL THE <td>INSIDE ELEMENTS</td> VERTICAL ALIGN */
padding-top:3px; /* USE TO CONTROL THE <td> ELEMENT PADDING */
}
.z_maintable input[type='text'] {
/* USE TO CONTROL ALL THE <input type='text'> ELEMENTS STYPE, MAKE COMMON TEXT INPUT STYPE IDENTICAL.
SUCH AS HEIGHT, BORDER STYLE, FONT SIZE AND SO ON.
*/
height: 24px;
margin-left:0px;
border-top:#b1b3b2 1px solid;
border-bottom:#b1b3b2 1px solid;
border-left:#b1b3b2 1px solid;
border-right:#b1b3b2 1px solid;
line-height:24px;
font-size:15px;
}
.z_maintable select {
/* USE TO CONTROL ALL THE <select> ELEMENTS STYPE, MAKE COMMON SELECT STYPE IDENTICAL.
SUCH AS HEIGHT, BORDER STYLE, FONT SIZE AND SO ON.
*/
height: 24px;
margin-left:0px;
border-top:#b1b3b2 1px solid;
border-bottom:#b1b3b2 1px solid;
border-left:#b1b3b2 1px solid;
border-right:#b1b3b2 1px solid;
line-height:24px;
font-size:15px;
}
.z_fields_span {
/* USE TO CONTROL THE REQUIRED FIELDS FRAME, WIDTH,HEIGHT AND ALIGN.
EVEN THE FIELDS NOT REQUIRED, USE THIS SPAN TO OCCUPIES A FEW POSITION.
*/
    display: inline-block;
    width: 3px;
    height: 28px;
    vertical-align: middle;
    margin-right: 2px;
    overflow:hidden;
    float:left;
}
.z_fields_required{
/* USE TO CONTROL THE REQUIRED FIELDS FRAME
IF FIELDS REQUIRED, THE SPAN BACKBROUND COLOR IS *GREEN*.
*/
    background: #80C745;
}
.z_field_error_info_cell{
/* USE TO CONTROL THE REQUIRED FIELDS ERROR MESSAGE DISPLAY STYLE. FONT COLOR AND SIZE. */
color:#f00;
font-size:13px;
}
/* ############################ DEFAULT IMG STYLES ############################ */
.form img {
/* USE TO CONTROL ALL THE <img> ELEMENTS STYLES,  AS DEFAULT VERTICAL ALIGN IS MIDDLE */
vertical-align: middle;
}
/* ############################ DEFAULT BREAK LINE STYLES  ############################ */
.z_breakLine{
/* USE TO CONTROL THE <div> ELEMENTS STYPE, THE BOTTOM BORDER STYLE.*/
border-bottom:#989a97 1px dotted;
margin-top:5px;
}
/* ############################ "ACCOUNT INFO & BILLING INFO" ROW STYLES  ############################ */
.z_custom_info_title_cell{
/* USE TO CONTROL THE <span> ELEMENTS STYPE, FONT SIZE, TOP AND BOTTOM PADDING */
font-size:22px;
padding-top:10px;
padding-bottom:5px;
}
/* #################### PRICING DESCRIPTION BLOCK #################### */
.z_pricing_description_block{
/* USE TO CONTROL PRICING DESCRIPTION TABLE BACKGROUND COLOR */
background-color:#eef6df;
}
.z_pricing_description_inner_block{
/* USE TO CONTROL PRICING DESCRIPTION TABLE ALIGN, MAKE SOME LEFT AND RIGHT PADDING */
padding-left:20px;
padding-right:20px;
}
.z_pricing_description:before {
/* USE TO CONTROL PRICING DESCRIPTION MAKE A FEW RADIAN OF TABLE CORNET */
    background: transparent url(tag/images/rounded_green_tr.png) scroll no-repeat top right;
    margin-bottom: -20px;
    height: 30px;
    display: block;
    border: none;
    content: url(tag/images/rounded_green_tl.png);
    padding: 0;
    line-height: 0.1;
    font-size: 1px;
}
.z_pricing_description:after {
/* USE TO CONTROL PRICING DESCRIPTION MAKE A FEW RADIAN OF TABLE CORNET */
    display: block;
    line-height: 0.1;
    font-size: 1px;
    content: url(tag/images/rounded_green_bl.png);
    margin: 0 0 -1px 0;
    height: 9px;
    background: transparent url(tag/images/rounded_green_br.png) no-repeat scroll bottom right;
    padding: 0;
}
.z_pricing_title_h1{
/* USE TO CONTROL PRICING DESCRIPTION TITLE ALIGN, FONT STYLE. */
margin:3px 0px;
color:#70b43d;
font-size:21px;
font-weight:normal;
font-family:Arial,sans-serif;
}
.z_free_trial {
/* USE TO CONTROL PRICING DESCRIPTION FREE TRIAL *TEXT* AREA, ALIGN, FONT STYLE. */
    font-size: 14px;
    color: #fff;
    padding: 0 8px;
    zoom: 1;
    display: inline-block;
}
.z_rounded_free_trial_block {
/* USE TO CONTROL  PRICING DESCRIPTION FREE TRIAL *TEXT* BACKGROUND COLOR */
background-color:#6fb440;
display:inline-block;
}
.z_rounded_free_trial:before {
/*  USE TO CONTROL PRICING DESCRIPTION FREE TRIAL *TEXT* MAKE A FEW RADIAN OF BACKGROUND */
    background: transparent url(tag/images/button_green_tr.png) scroll no-repeat top right;
    height: 2px;
    display: block;
    border: none;
    content: url(tag/images/button_green_tl.png);
    padding: 0;
    line-height: 0.1;
    font-size: 1px;
}
.z_rounded_free_trial:after {
/*  USE TO CONTROL PRICING DESCRIPTION FREE TRIAL *TEXT* MAKE A FEW RADIAN OF BACKGROUND */
    display: block;
    line-height: 0.1;
    font-size: 1px;
    content: url(tag/images/button_green_bl.png);
    height: 2px;
    background: transparent url(tag/images/button_green_br.png) no-repeat scroll bottom right;
    padding: 0;
}
.z_charge_name_h2 {
/*  USE TO CONTROL PRICING DESCRIPTION AREA CHARGE NAME STYLE, FONT SIZE,WEIGHT AND ALIGN */
   font-size:15px;
  font-weight:bold;
   margin:5px 0px 0px;
}
.z_charge_pricing_p {
/*  USE TO CONTROL PRICING DESCRIPTION AREA CHARGE INFO STYLE, FONT COLOR AND ALIGN */
   color:#656766;
   margin:0px 0px 0px 15px;
}
.z_charge_pricing_quantity {
/*  USE TO CONTROL PRICING DESCRIPTION AREA QUANTITY TEXT STYLE, FONT SIZE,COLOR AND ALIGN */
   color:#656766;
   margin:5px 0px 0px 15px;
   font-size:11px;
   vertical-align: middle;
}
.z_rounded_due_today_div{
/*  USE TO CONTROL PRICING DESCRIPTION AREA TOTAL DUE TODAY TEXT STYLE, FONT ALIGN */
padding-right:5px;
text-align:right;
margin:10px 0px 3px;
vertical-align:top;
}
.z_rounded_due_today_font span{
/*  USE TO CONTROL PRICING DESCRIPTION AREA TOTAL DUE TODAY TEXT STYLE, FONT SIZE, WEIGHT AND FEIGHT. */
font-weight:bold;
font-size: 22px;
height:35px;
}
/* #################### PRICING DESCRIPTION END #################### */
/* #################### CAPTCHA AREA #################### */
.z_field_captcha_label_cell{
/*  USE TO CONTROL CAPTCHA AREA LABEL TEXT STYLE, FONT SIZE, COLOR.
USE vertical-align:top; BECAUSE CAPTCHA BLOCK CAN BE TALL.
 */
vertical-align:top;
font-size:14px;
color:#818181;
}
.z_captcha_block{
/*  USE TO CONTROL CAPTCHA AREA OUTSIDE FRAME STYLE. FRAME BORDER STYLE, WIDTH AND ALIGN. */
border-bottom: #d3d3d3 1px solid;
border-left: #d3d3d3 1px solid;
width: 200px;
border-top: #d3d3d3 1px solid;
border-right: #d3d3d3 1px solid;
margin-left:5px;
}
.z_captcha_block_cell{
/*  USE TO CONTROL CAPTCHA AREA INSIDE FRAME STYLE. FRAME TOP BORDER STYLE */
border-top:#d3d3d3 1px solid;
}
.z_captcha_block_cell .z_field_error_info_cell{
/*  USE TO CONTROL CAPTCHA AREA INSIDE ERROR INFO TEXT STYLE */
width:190px;
text-align:left;
overflow:hidden;
}
.z_captcha_input_cell{
/*  USE TO CONTROL CAPTCHA AREA INSIDE INPUT ELEMENTS STYLE, WIDTH AND ALIGN  */
width:140px;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
overflow:hidden;
display:block;
float:left;
}
.z_captcha_input_cell input{
/*  USE TO CONTROL CAPTCHA AREA INSIDE INPUT ELEMENTS WIDTH */
width:130px;
}
.z_captcha_reload_cell{
/*  USE TO CONTROL CAPTCHA AREA INSIDE RELOAD ICON STYLE */
padding-left:5px;
padding-bottom:5px;
padding-top:5px;
overflow:hidden;
float:left;
}
.z_captcha_help_cell{
/*  USE TO CONTROL CAPTCHA AREA INSIDE HELP ICON STYLE */
padding-left:5px;
padding-bottom:5px;
padding-top:5px;
overflow:hidden;
}
/* ###################  POLICY & TERMS ######################## */
.z_policy_cell{
/*  USE TO CONTROL TEXT FONT SIZE, COLOR AND ALIGN */
font-size:14px;
color:#818181;
padding-top:6px;
}
.z_policy_terms{
/*  USE TO CONTROL <a>TEXT</a> TEXT COLOR. */
color:#5f9831;
}
/* ######################## BUTTON AREA  ######################  */
.z_field_submit_button_cell{
/*  USE TO CONTROL BUTTON AREA ALIGN . */
padding-top:6px;
}
a.z_submit_buttion {
/*  USE TO CONTROL SUBMIT BUTTON STYLE, BACKGROUND, FONT COLOR AND ALIGN. */
    background: transparent url(tag/images/button_green_right.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 14px arial, sans-serif;
    height: 32px;
    margin-right: 6px;
    text-decoration: none;
    padding-right: 5px;
}
a.z_submit_buttion span {
/*  USE TO CONTROL SUBMIT BUTTON STYLE, BACKGROUND, FONT COLOR AND ALIGN. */
    background: transparent url(tag/images/button_green_left.gif) no-repeat;
    display: block;
    line-height: 22px;
    padding: 5px 13px 5px 18px;
    height: 22px;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}
.z_powered_by{
/*  USE TO CONTROL POWERD BY IMAGE ALIGN. */
vertical-align:bottom ;
text-align:right;
}
/* ############################ CARD TYPE DEFAULT STYLES ############################ */
.z_supportedTypes_container {
/* USE TO CONTROL THE CARD TYPE MIAN FRAME ELEMENTS STYLES, WIDTH AND ALIGN */
display:block;
clear-both;
width:250px;
vertical-align: middle;
}
.z_supportedTypes_cell {
/* USE TO CONTROL THE CARD TYPE INSIDE ELEMENTS  ALIGN. */
float:left;
vertical-align: middle;
}
.z_image {
/* USE TO CONTROL THE CARD TYPE INSIDE IMAGE  ALIGN. */
background-repeat: no-repeat;
    display:block;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
}
.z_image_Visa {
/* USE TO CONTROL THE VISA CARD TYPE IMAGE STYLE. */
background-image: url(tag/images/VisaCard_logo.gif);
width: 50px;
height: 24px;
}
.z_label_text_supportedTypes_Visa {
display: none;
}
.z_image_MasterCard {
/* USE TO CONTROL THE MASTERCARD CARD TYPE IMAGE STYLE. */
background-image: url(tag/images/MasterCard_logo.gif);
width: 40px;
height: 24px;
}
.z_label_text_supportedTypes_MasterCard {
display: none;
}
.z_image_AmericanExpress {
/* USE TO CONTROL THE AMERICAN EXPRESS CARD TYPE IMAGE STYLE. */
background-image: url(tag/images/AmericanExpress_logo.gif);
width: 30px;
height: 24px;
}
.z_label_text_supportedTypes_AmericanExpress {
display: none;
}
.z_image_Discover {
/* USE TO CONTROL THE DISCOVER CARD TYPE IMAGE STYLE. */
background-image: url(tag/images/DiscoverCard_logo.gif);
width: 40px;
height: 24px;
}
.z_label_text_supportedTypes_Discover {
display: none;
}
/* ############################ SPECIFIC FIELD STYLES ############################ */
.z_field_label_cell {
/* USE TO CONTROL ALL THE CUSTOM INPUT LABEL, FONT COLOR, SIZE, WEIGHT, AND ALIGN.
FOR SOME BROWSER, SOME CSS CAN NOT BE OVERRIDE WHICH EXTENDED PARENTS ELEMENT STYLE, YOU CAN USE !important MARK IT.
 */
padding-left:30px;
padding-right:5px;
color:#818181;
font-size:15px;
font-weight:normal;
/*
vertical-align:top !important;
*/
}
.z_field_label_cell .z_field_label_span_cell {
/* USE TO CONTROL ALL THE CUSTOM INPUT LABEL, MAKE SURE THE HEIGHT SOME WITH INPUT */
height:24px;
margin-top:0px;
margin-bottom:0px;
}
.z_field_insert_padding{
/* USE TO CONTROL ALL THE CUSTOM INPUT LABEL.
IF DISPLAY THE ERROR MESSAGE, IT OCCUPIED A FEW SPACE UNBER THE INPUT. USE THIS TO OCCUPIED A FEW SPACE UNBER THE LABEL.
 */
height:13px;
}
.z_hppm_input_cardSecurityCode {
/* USE TO CONTROL CARD SECURITY CODE INPUT WIDTH AND ALIGN. */
width: 50px;
vertical-align:top;
}
.z_text_input { /* USE TO CONTROL CUSTOM INPUT WIDTH. */
width: 220px;
}
/* ############################ CUSTOM STYLES ############################ */
 /* EMPTY CSS, PROVIDE THIS EXAMPLE FOR YOUR CUSTOMIZE. */
.z_field_value_cell { }
.z_field_value_cell_required { }
.z_field_row { }
.z_radio_input { }
.z_select_input { }
.z_field_info_cell { }
.z_info { }
</style>
<style>
</style>
  1.  
Last modified
10:37, 22 May 2017

Tags

Classifications

(not set)