Skip to main content

Hosted Payment Method Page CSS

Zuora

Hosted Payment Method Page CSS

  1. Last updated
  2. Save as PDF

This article is for the Hosted Payment Method Pages 1.0. Payment Pages 2.0 are now generally available, and are a replacement for the Hosted Payment Method Pages 1.0. Please consider using Payment Pages 2.0, as there are no further plans for Hosted Payment Method Pages 1.0.

Overview

This section describes how to modify the CSS for a Hosted Payment Method page.

Customize CSS

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

HPM_CSS.png

css2.png

In addition to the basic CSS 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 Hosted Payment Method iFrame.

Here is an example:

HPM_CSS1.png

css4.png

CSS Fields

Style Name

Description

.z_hppm_maintable

Main table that holds all the elements.

.z_hppm_page_title_row

<tr> element for page title.

.z_hppm_page_title_cell

<td> element for page title.

.z_hppm_page_description_row

<tr> element for page description.

.z_hppm_page_description_cell

<td> element for page title.

.z_hppm_field_row

<tr> element for field.

.z_hppm_field_row_[Field Name]

<tr> element for a specified field.

For example, z_hppm_field_row_creditCardNumber

.z_hppm_field_label_cell

<td> element for field label.

.z_hppm_field_label_cell_[Field Name]

<td> element for a specified field label.

For example, z_hppm_field_label_creditCardNumber

.z_hppm_field_value_cell

<td> element for a field value.

.z_hppm_field_value_cell_[Field Name]

<td> element for a specified field value.

For example, z_hppm_field_value_cell_creditCardNumber

.z_hppm_field_value_cell_required

<td> element for a field value (if it is required).

.z_hppm_field_info_cell

<td> element of an empty cell to the right of field value (space for “additional information”).

.z_hppm_field_info_cell_[Field Name]

<td> element of an empty cell to the right of a specified field value (space for “additional information”).

For example, z_hppm_field_info_cell_creditCardNumber

.z_hppm_field_info

<div> element within an empty cell to the right of field value.

.z_hppm_field_info_[Field Name]

<div> element within an empty cell to the right of a specified field value.

For example, z_hppm_field_info_creditCardNumber

.z_hppm_text_input

<input> element of a field of “text” type.

.z_hppm_radio_input

<input> element of a field of “radio” type.

.z_hppm_select_input

<select> element of a field.

.z_hppm_input_[Field Name]

<input> element of a specified field.

For example, z_hppm_input_creditCardNumber

.z_hppm_input_required_[Field Name]

<input> element of a specified field (if it is required).

For example, z_hppm_input_required_creditCardNumber

.z_hppm_image

<img> element applied to each of the “accepted types”.

.z_hppm_image_[Type]

<img> element applied to a specified “accepted type”.

For example, z_hppm_image_Visa