Skip to main content

Preview Payment Pages 2.0

Zuora

Preview Payment Pages 2.0

  1. Last updated
  2. Save as PDF

Overview

This article describes features available on the Preview Hosted Payment Method Page.

Preview Payment Page

When you save a Payment Page after creating or editing the form, the Preview Hosted Payment Method Page page appears. You can perform the following actions on the preview page:

  • Preview the Payment Page
  • Edit the Payment Page
  • Set the Payment Page form type

To preview and edit a Payment Page:

  1. After creating or editing a Payment Page, click generate and save page.
  2. Alternatively, in the Hosted Pages List, click Page Name or Preview for the Payment Page.
  3. On the Preview Hosted Payment Method Page, click edit to make changes to the Payment Page configuration. 
  4. In the Page Preview section, the following preview options are available:
    • Form Type: Select the format to display your Payment Page. When you make a selection, the preview form appears in the format you chose.
      • inline: Your Payment Page form is embedded within your commerce page.
      • overlay: Your Payment Page form appears as an overlay when the form is loaded. 
    • Locale: Click the Locale field and select a locale that you have set up on the Add Translations to Hosted Payment Method page. Your preview form appears in the locale you selected. If a translation has not been provided for the locale, the form is displayed in the default locale as shown on the configuration page.
      See Translate and Localize Payment Pages 2.0 about setting up locales for Payment Pages 2.0.

Retrieve Required Values for Payment Page JavaScript Client

On the preview page, retrieve the information you need to integrate this Payment Page in your client.

To retrieve the implementation information required for your client code:

  1. After creating or editing a Payment Page, click generate and save page.
  2. Alternatively, in the Hosted Pages List, click Page Name or Preview for the Payment Page.
  3. In the Implementation Details section on the Preview Hosted Payment Method Page, retrieve the following information that you need to provide in your client code:
    • Hosted Domain: The domain address you typed in the Hosted Domain field when you created or edited the Payment Page. Zuora validates this field for you. You will see an error message displayed on HPM iframe if the validation fails. Note that the Overlay Hosted Page mode does not support the Hosted Domain validation.
    • Callback Path: The callback path you typed in the Callback Path field when you created or edited the Payment Page.
    • Hosted Page URL: The URL from which your Payment Page will be served. This is a read-only value that Zuora generates. You need to pass this value to your client code as a JavaScript parameter, url, when you load the Payment Page. See Provide Parameter Values for the Payment Pages 2.0 Form about passing this parameter and others to the client Javascript.