Knowledge Center

Knowledge Center > Zuora CPQ > Zuora Quotes > Zuora Config Settings > Hosted Payment Pages 1.0 Settings > Configure Hosted Payment Pages in Previous Zuora Quotes > Basic Hosted Payment Pages Integration

Basic Hosted Payment Pages Integration


The HPMSample page has encapsulated all necessary components and business logic required to integrate with Zuora Hosted Payment Page. The easiest way to integrate with Hosted Payment Pages in your own VisualForce page is to follow the steps in this topic.  

Include the HPMSample and HPMConfirm Pages

Include the HPMSample page and the HPMConfirm pages in your pages. For example, define a page named PaymentMethodCreation

  // Your page contents go here.

  <!-- Begin HPM Include -->
  <apex:include pageName="HPMSample"/>
  <!-- End HPM Include -->


Next, define a confirmation page named PaymentMethodCreationConfirm:

  // Your page contents go here. 

  <!-- Begin HPM Include -->
  <apex:include pageName="HPMConfirm"/>
  <!-- End HPM Include -->


Modify Callback Redirect Pages in HPMSample

The HPMSample page contains the JavaScript functions, callbacksuccess() and callbackfailure()

        function callbacksuccess(pmid) {
          window.location = "{!$Page.HPMConfirm}?pmid=" + pmid; 
        function callbackfailure( paramString ) {            
            var redirUrl = "{!$Page.HPMSample}" + paramString;                   
            window.location = redirUrl;

Replace the default redirect pages in callbacksuccess() and callbackfailure() with your own pages. For example, replace Page.HPMSample with your own page that contains HPMSample: Page.PaymentMethodCreation, and replace Page.HPMConfirm with your own page that contains HPMConfirm:Page.PaymentMethodCreationConfirm

Modify CSS Styles and Images

The default CSS styles are provided in the HPMSampleCSS.resource file for the HPM Div elements in both the HPMSample and HPMConfirm pages. You can replace the default CSS styles with your own CSS code. 

You can also replace the Submit button image with your own image. The image is located in at Static Resources > HPMSubmitButton.  

The following table lists the Hosted Payment Pages CSS elements for the integration: 

 Page  CSS Element Name Description
HPMSample #zforce_hpm_frame The HPM div that contains the HPM iframe and the submit button. 
HPMConfirm     #zforce_hpm_callback_result     The Confirmation div that contains the HPM callback confirmation message and the payment method ID.
HPMConfirm #zforce_hpm_callback_result .confirm_message     The Confirmation message style class.

What's Next

See Advanced Hosted Payment Pages Integration for information about advanced integration options. 

Last modified



(not set)