Hosted Payment Method Page CSS
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:
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:
CSS Fields
Style Name | Description |
---|---|
| Main table that holds all the elements. |
| <tr> element for page title. |
| <td> element for page title. |
| <tr> element for page description. |
| <td> element for page title. |
| <tr> element for field. |
| <tr> element for a specified field. For example, z_hppm_field_row_creditCardNumber |
| <td> element for field label. |
| <td> element for a specified field label. For example, z_hppm_field_label_creditCardNumber |
| <td> element for a field value. |
| <td> element for a specified field value. For example, z_hppm_field_value_cell_creditCardNumber |
| <td> element for a field value (if it is required). |
| <td> element of an empty cell to the right of field value (space for “additional information”). |
| <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 |
| <div> element within an empty cell to the right of field value. |
| <div> element within an empty cell to the right of a specified field value. For example, z_hppm_field_info_creditCardNumber |
| <input> element of a field of “text” type. |
| <input> element of a field of “radio” type. |
| <select> element of a field. |
| <input> element of a specified field. For example, z_hppm_input_creditCardNumber |
| <input> element of a specified field (if it is required). For example, z_hppm_input_required_creditCardNumber |
| <img> element applied to each of the “accepted types”. |
| <img> element applied to a specified “accepted type”. For example, z_hppm_image_Visa |