Skip to main content

Payment Pages Settings


Payment Pages Settings

Payment Pages Configuration Overview

In Zuora Quotes, you can configure to allow your users to add a payment method, e.g., a credit card, while creating a quote. In the Q4 2014 release, this feature is implemented using the PaymentPage component that is based on Zuora's Payment Pages 2.0Payment Pages 2.0 is the newest of the Zuora Hosted Pages offerings. It provides you a simple and streamlined implementation experience while enabling your subscribers to send payment details to your company in a secure, PCI-compliant manner.

This setting works in both legacy CPQ and CPQ X.

The Payment Page creates a new payment method in the following steps:

  1. On the Quote Detail page, user clicks New Payment Method that you added to the page.
  2. On the Payment Page, user adds a payment information for the quote.
  3.  When user clicks Submit on the Payment Page, the new payment method is created in Zuora.
  4. The ID of the newly created electronic payment method is written back to the Electronic Payment Method Id field on the Quote object.
  5. If the quote is for a new billing account, the value of the Electronic Payment Method Id field is used to populate the DefaultPaymentMethodId of the newly created account in Zuora.
  6. If the quote is linked to an existing account in Zuora, the account's DefaultPaymentMethodId is updated after the payment method is created.

The high level steps to set up a Zuora Payment Page is:

  1. Set up a Payment Page in Zuora.
  2. Retrieve the Payment Page Settings in Zuora Quotes.
  3. (Optional) Using the plugins available on the PaymentPage component, customize your Payment Page.
  4. Test the Payment Page.
  5. (Optional) Add a Payment Page to the Quote Wizard.
    1. Create a custom Visualforce page for the Quote Wizard. See Payment Page Use Case for an example page, its controller, and a callback page.
    2. Add the custom Visualforce page from the previous step to the Quote Wizard.
  6. (Optional) Add the Payment Page button on the Quote Detail page.
    1. Create a custom Visualforce page for the custom button. See Payment Page Use Case for an example page, its controller, and a callback page.
    2. Add a custom button on the Quote (zqu__Quote__c) object using the custom Visualforce page. See Use Case: Create a Payment Page Button for an example.
    3. Add the custom button to the Quote Detail page.
  7. Test Payment Page submission and see if a new payment method is created in Zuora.

Set up a Payment Page in Zuora

To set up a Payment Page in Zuora:

  1. Create a new Payment Page as described in Configure Payment Pages 2.0.
  2. The following property values are required for the Salesforce integration:
    • Hosted Domain - https://<Name space>.<Salesforce server instance>
      • <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 "".
      • For example, or
    • Callback Path: /apex/zqu__PaymentPageCallback

Retrieve Payment Page Settings in Zuora Quotes

Once you have successfully configured a Payment Page in Zuora, pull that Payment Page setting information in Zuora Quotes. When you make any change to Payment Page settings in Zuora, you also need to retrieve the Payment Page settings in Zuora Quotes.

To retrieve the Payment Page settings in Zuora Quotes:

  1. On the Zuora Config tab, click Payment Pages Settings.
  2. Click Refresh Payment Pages to get the current list of Payment Pages set up on Zuora. 
  3. If you want to change the dimensions of the iFrame or designate a Payment Page as the default page, click Edit next to Payment Page Setting you want to edit.
  4. Click Save.

Default Payment Page

If you select the Default field of a Payment Page, the Payment Page becomes the default Payment Page in Zuora Quotes. Use the default Payment Page to implement an out of the box Payment Page without additional coding. 

To use the code-free setup option with the default Payment Page, the default Payment Page must be configured with the following field settings. See Configure Payment Pages 2.0 for more information about the fields.

  • Hosted Domain: https://zqu.<Salesforce Server instance>
  • Callback Path: /apex/PaymentPageCallback

After setting up the default Payment Page, you can use the out of the box Visualforce page, CreatePaymentMethodin the Quote Wizard or Quote menu button to quickly support payment processing in your quote flow. The CreatePaymentMethod page uses the default Payment Page if no page Id is specified in the pageId URL parameter.

Test the Payment Page

Once you have finished configuring the Payment Page in Zuora and pull the setting information to Zuora Quotes, use the zqu__CreatePaymentMethod Visualforce page to test your configuration. This page embeds the PaymentPage component and fills in the component attributes using the query parameters specified in the URL.

The following is an example URL to test the Payment Page:

If you do not see the scroll bar on the Payment Page iFrame, grant field level access to the iFrame Height (zqu__Height__c)  field of the Payment Page Setting (zqu__HostedPageLiteSetting__c) object.