Skip to main content

Develop Payment Pages 2.0 to replace HPM 1.0


Develop Payment Pages 2.0 to replace HPM 1.0

Before you begin

Ensure that you have located your HPM 1.0 implementation codes and removed them. See Locate the HPM 1.0 URL implementation code for details.


Payment Pages 2.0 Implementation Process provides detailed instructions for developing Payment Pages 2.0. This article summarizes the steps to provide an overview of the process, as well as guidance on error handling and sample code.

Step 1: Configure Payment pages 2.0

See Configure Payment pages 2. 0 for instructions. The steps are almost the same as those for HPM 1.0. You can configure more advanced security measures and payment methods for HPM 2.0 pages.

Step 2: Generate token and signature for Payment Pages 2.0

To generate the digital signature and token for your Payment Pages 2.0 form, you can use one of the following methods:

  • Use the Generate RSA signature REST API. 
  • Submit a Zuora CORS REST request to the Zuora server in your local client.

For detailed instructions, see the following articles:

This is different from HPM 1.0. HPM 1.0 uses the API key to generate the signature.

Step 3: Integrate the Payment Pages

The below steps describe how to set up the client code to integrate Payment Pages 2.0 to your commerce web page:

  1. Include the Zuora JavaScript library.
  2. Provide the client parameters for Payment Pages 2.0.
  3. Optionally, pre-populate the Payment Pages 2.0 form fields.
  4. Implement the callback function.
  5. Optionally, integrate Payment Pages 2.0 with advanced options.
  6. Render the Payment Pages 2.0 form.
  7. Add a <div> container for Payment Pages 2.0.

Alternatively, you can use Direct POST to implement Payment Pages 2.0 if you want full control over the look and feel of your payment form. See Implement Payment Pages 2.0 via Direct POST for details.

Error handling

See the following articles for details:

Sample Code 

See Sample Code for Payment Pages 2.0 for how to extract the Payment Pages 2.0 sample source code.

Generate signature

Here is an example in the file in the Payment Pages 2.0 sample code suite on Zuora GitHub site.

public static JSONObject generateSignature(String pageId) throws Exception {
  HttpClient httpClient = new HttpClient();
  PostMethod postRequest = new PostMethod(endPoint); 
      postRequest.addRequestHeader("apiAccessKeyId", username);
      postRequest.addRequestHeader("apiSecretAccessKey", password);
      postRequest.addRequestHeader("Accept", "application/json");
      RequestEntity requestEntity = new StringRequestEntity(buildJsonRequest(pageId), "application/json", "UTF-8");

Implement the callback function

Refer to callback.jsp in the Payment Pages 2.0 sample code suite on Zuora GitHub site for the example.

Add a <div> container for Payment Pages 2.0

Here is an example. See Add an HTML Container for Payment Pages 2.0 for more information.

  <div class="firstTitle"><font size="5" style="margin-left: 90px; height: 80px;">Inline, Submit Button Inside Hosted Page.</font></div>
  <div class="item"><button id="showPage" onclick="showPage()" style="margin-left: 150px; height: 24px; width: 130px;">Open Hosted Page</button><button onclick='window.ocation.replace("Homepage.jsp")' style="margin-left: 20px; width: 140px; height: 24px;">Back To Homepage</button></div>
  <div class="title"><div id="zuora_payment"></div></div>
  <div id="checkBoxDiv" class="item" hidden>
     <input id="agreement" type="checkbox" onclick="agree()"> agreement

Error handling

Refer to Inline_ButtonIn_CITMIT.jsp in the Payment Pages 2.0 sample code suite on Zuora GitHub site for the example. See Customize Error Messages for Payment Pages 2.0 for more information.