Basic Hosted Payment Pages Integration
Overview
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
:
<apex:page> // Your page contents go here. <!-- Begin HPM Include --> <apex:include pageName="HPMSample"/> <!-- End HPM Include --> </apex:page>
Next, 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>
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 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. |
What's Next
See Advanced Hosted Payment Pages Integration for information about advanced integration options.