home

Zuora Payments

Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableZuora AIRelease NotesBasicsEntitlementsSupport and policies
Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableZuora AIRelease NotesBasicsEntitlementsSupport and policies

Welcome to Zuora Product Documentation

Explore our rich library of product information

Show Contents

thumbnailZuora Payments

Payment Pages CSS

Design Payment Pages 2.0 CSS

Learn how to customize the visual style of Payment Pages 2.0 using CSS files, including responsive and non-responsive options, and manage associated resources like images and JavaScript.

The CSS pack includes the following folders and files:

  • css : This folder contains two types of CSS files. You use one of these CSS files to customize the visual style of your Payment Pages 2.0 form.

    • hpm2.css : Responsive CSS that delivers the Payment Pages form in various screen sizes on devices, such as mobile, tablet, or desktop. By default, this CSS is included in hpm2.html .

    • hpm2_nonresponsive.css : The CSS file designed to render the Payment Pages form in desktop screen size. If you want to use this CSS file, edit hpm2.html and replace hpm2.css with hpm2_nonreponsive.css .

  • img : This folder contains local copies of the image files used in Payment Pages 2.0.

  • js : This folder contains local copies of the JavaScript files used in the Payment Pages form.

  • hpm2.html : This is a copy of a Payment Pages form. You use this file as a working canvas while designing the look and formatting of your Payment Pages form.

To design the Payment Pages 2.0 style using the attached package :

  1. Create a sandbox folder for this exercise.
  2. Download the zip file, hpm2_style.zipNo Content found for /db/organizations/zuora/repositories/prod-sitemap/content/documents/external_publications/payments/Payment_Pages_2.0/I_Design_Payment_Pages_2.0_CSS/hpm2_style.zip.
  3. Unzip the file in the sandbox folder you created in the first step, and the folder structure will be created as described above.
  4. Start up your web server.
  5. Edit the hpm2.css file under the css folder to update the style and format of the Payment Pages 2.0 form. Save hpm2.css . If you are using the non-responsive CSS, update and save hpm2_nonresponsive.css instead of hpm2.css .
  6. In a browser, open hpm2.html to see how the Payment Pages 2.0 form looks with the changes you made in Step #5. This file is in the top folder of the sandbox folder.
  7. Repeat Step #5 and #6 as necessary to customize the look and format of the Payment Pages 2.0 form.
  8. After you finalize the style of your Payment Pages 2.0 form, replace the default CSS elements with your updated CSS elements. Copy the CSS elements in hpm2.css file and paste them to the CSS field on the Payment Pages configuration page.

Note that implementing customized JavaScript is not allowed for security reasons.

Last updated: March 30, 2026