Learn how to integrate Zuora Hosted Payment Pages into your VisualForce page by including sample pages, defining confirmation pages, modifying callback redirects, and customizing CSS styles and images.

1. nclude the HPMSample page and the HPMConfirm pages in your pages.

   For example, define a page named PaymentMethodCreation:

   <apex:page>
   			// Your page contents go here.
   			<!-- Begin HPM Include -->
   			<apex:include pageName="HPMSample"/>
   			<!-- End HPM Include -->
   		</apex:page>

2. Define a confirmation page named PaymentMethodCreationConfirm:

   <apex:page>
   			// Your page contents go here.
   			<!-- Begin HPM Include -->
   			<apex:include pageName="HPMConfirm"/>
   			<!-- End HPM Include -->
   		</apex:page>
   

3. 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;
   		  }

   1. 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.
4. 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 Salesforce.com at Static Resources > HPMSubmitButton.

   The following table lists the Hosted Payment Pages CSS elements for the Salesforce.com 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.