Learn how to create a new Hosted Page in Zuora, configure it for Salesforce integration, and save the necessary API security key and parameter values.

1. Create a new Hosted Page as described in Configure Hosted Payment Method Pages and Implement Checkout Pages.
2. The following property values are important for the Salesforce integration:

   • Hosted Domain - https://<Name space>.<Salesforce server instance>.visual.force.com.

     • <Name space> denotes the name space of the Visualforce page this Hosted Page is embedded to, "zqu" if a standard Zuora Quotes page or "c" if it is your custom page.
     • <Salesforce server instance> is the subdomain of the url, the portion of the URL before "salesforce.com". For example, https://zqu.na14.visual.force.com.
       Note:

       Salesforce server URL may be changed by Salesforce. When this happens, you need to update this setting. Otherwise, Zuora may refuse to render this Hosted Page in Salesforce anymore.

   • Callback Path

     • For out-of-the-box Hosted Payment Method page: /apex/HPMCallback
     • For out-of-the-box Checkout Page: /apex/CheckoutCallback?hostedPageName=Z-Checkout

   • CSS - Optionally you can create custom CSS for your Hosted Page, which will be embedded as an iFrame in the Salesforce Visualforce page. For your convenience, the package contains a sample CSS that you can copy directly into the CSS field.

     1. In Salesforce, navigate to Setup > Develop > Static Resources.

     2. Click HPMCSS.

     3. Click View file.

     4. Copy the file content and paste it into the CSS input field of the Hosted Payment Page definition.

3. After you save the Hosted Page in Zuora, navigate back to Hosted Pages List and click get api security key. Save the API Security Key value.
4. in the HTML code section, the iFrame HTML code is displayed. For example:

   <iframe id="z_hppm_iframe" name="z_hppm_iframe" src="PublicHostedPage.do?method=requestPage&id=8a8ae4ac3483f6f90134c4eb490e0304&tenantId=320&timestamp=1326321987096&token=njUGP2xHGGaNKNzDYi5JPrGCp2I2v6sG&signature=OWM5OGM5ZjJhZjMxMTNmMDQ3MmVmODE5MWZiMjFhMTM="></iframe>

5. Save the values for the following parameters. You need to enter the values in Salesforce as described in the next section.

   Zuora Parameter	Zuora CPQ Setting
   Id in the iFrame HTML	Page ID
   Tenant ID	Tenant ID
   API Security Key	API Security Token