Skip to main content

Create a Hosted Payment Page in Zuora

Zuora

Create a Hosted Payment Page in Zuora

Overview

After installing the Hosted Payment Pages package in Salesforce.com, you must set up the hosted page in Zuora.

Configure Your Hosted Payment Pages Settings in Zuora

To configure the hosted page in Zuora:

  1. In Zuora, select Settings > Payments > Setup Payment Page and Payment Link.
  2. Configure the tenant-level settings for the hosted payment page.
  3. Select a Type of payment. 
  4. Click create new hosted page.
  5. Enter the following information:
    • Name: Enter a name for your page. This name is used to identify your page in Zuora. It is different from the title displayed on the page (specified in the Page Title field).
    • Hosted Domain: Specify the domain name that your callback file resides on. It should be in the format: http://www.domain.com (or https://www.domain.com).
      • For example, https://c.na14.visual.force.com. In this example, na14 is the Salesforce server name. This name will be different for your organization. You can also create a Force.com Site, which has a static domain, to serve as the hosted domain for the callback action. For example, https://hpm-developer-edition.na12.force.com.

        The Hosted Domain address must match the domain of the webpage that is accessed in order to use the submit button. For example, if the domain is configured as http://www.domain.com but you submit the hosted page on http://domain.com, the submission will not work. The hosted page can only be submitted if the user accesses http://www.domain.com

    • Callback Path: Enter the path that the callback file resides on: /apex/HPMCallback. Zuora appends this to the Hosted Domain entry to create the full URL that the callback is sent to.
    • Payment Gateway: Select a payment gateway to use. The gateway must be configured in your Zuora environment.
    • Page Title: Enter a title for the page (optional).
    • Page Description: Enter a description for the page (optional).
    • Page Fields: Select which fields to display (Enabled), and which fields are required (Required). Use the New Label Name fields to change how the payment fields are displayed on your hosted page.
    • CSS: Enter custom CSS code for your page. This will be used for the iframe embedded in the Salesforce VisualForce page. The installation package includes a sample CSS file that you can copy into the CSS field when creating the hosted payment page in Zuora. See "Use the Sample CSS File," below, for instructions about using the sample CSS. 
  6. Click generate and save page.
  7. Zuora will display a Page Preview, which shows the page as it will be displayed on your website. Click edit to make any changes to the page.
  8. The preview page includes sample HTML code. Copy and save the following information from the code, which you will use in the next step, Configure the Hosted Payment Pages Settings in Salesforce.com:
    • id: Copy this information and save it as the HPM Page ID.
      • For example: <iframe id="z_hppm_iframe" name="z_hppm_iframe" src="PublicHostedPage.do?method=requestPage&id=8a8ae4ac3483f6f90134&tenantId=320&timestamp=1326321987096&token=njUGP2xHGG&signature=OWM5OGM5ZjJhZj"></iframe>
    • tenantId: Copy this information and save it as the Tenant ID.
      • For example, in the following code sample the tenant ID is 320
        <iframe id="z_hppm_iframe" name="z_hppm_iframe" src="PublicHostedPage.do?method=requestPage&id=8a8ae4ac3483f6f90134&tenantId=320&timestamp=1326321987096&token=njUGP2xHGG&signature=OWM5OGM5ZjJhZj"></iframe>
  9. Return to the Hosted Pages list. Click get api security key and save the security key. You will use that information in the next step, Configure the Hosted Payment Pages Settings in Salesforce.com.

Use the Sample CSS File

The installation package includes a sample CSS file that you can copy into the CSS field when creating the hosted payment page in Zuora.

To view the sample file:

  1. Log in to Salesforce.com.
  2. Navigate to user name > Setup
  3. In the navigation pane on the left side of the screen, select Develop > Static Resources.
  4. Click HPMSampleCSS to view information about the file.
  5. On the, HPMSampleCSS detail page, click View file
  6. Copy the CSS code and paste it into the CSS field in the Zuora.

See Basic Hosted Payment Pages Integration for instructions about modifying the CSS.