Configure Your Z-Payments Page

Overview

This section describes how to confiure a Z-Payments Page in the Zuora application. Z-Payments Page is a premium offering so please contact Zuora to inquire about terms and access.

Configure Your Z-Payments Page

Before any integration work can begin, the hosted page must be set up within Zuora by navigating to the Details Page of the backend configurations pages and following the steps below:

1. In Zuora, select Settings > Z-Payments Settings > Setup Hosted Pages.
2. Select a Type of payment. 
3. Click create new hosted page.
4. 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).

      Important:  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. Zuora appends this to the Hosted Domain entry to create the full URL that the callback is sent to. Specify a value in the format /app/callback_file.jsp. There is no requirement to include a file extension (for example, .jsp or .php) for the callback path. However, the callback path must begin with a forward slash character ( / ) character, as shown above.
   • 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. Instructions for modifying the CSS can be found in the Z-Payments Page CSS section.
5. Click generate and save page.
6. 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.
7. The preview page includes sample HTML code. You can embed this code in your website to test how the Z-Payments Page would look like in your checkout flow. 

What's Next

Related