Skip to main content

Hosted Checkout Pages


Hosted Checkout Pages

Zuora Hosted Checkout Pages are no longer under active development. Customers should use Payment Pages 2.0 for their secure payment acceptance requirements.

This article explains how to use hosted Checkout pages with your website.

For instructions about implementing hosted pages in Zuora Quotes or in your own Visualforce applications using our Zuora CPQ development toolkit, see PaymentPage Component.

How Checkout Pages Work

The following illustrations describe the Checkout page flow:



Configuration Pages in Zuora

Navigate to SettingsCommerce > Manage Checkout Pages. The key configuration pages are the List, New/Edit, View Detail, and Preview pages.

List Page

By default when performing the navigation above, you will see the List Page for all existing checkout pages that have been created in your Zuora tenant. It is also the starting point to create new checkout pages.

New / Edit Page

The New / Edit page is shown when a user chooses to create or edit a checkout page. The New / Edit page enables the configuration of a hosted page, such as:

  • The product and rate plan to sell on the Checkout page
  • Which account and billing fields will appear and/or require input
  • The labels of the displayed fields
  • The payment gateway to associate with the hosted page
  • CSS code to create visual style

View Detail Page

This page is presented after you save a checkout page or click the View link for an existing checkout page on the List Page.  This View Detail page provides a read-only overview of the configuration details for this checkout page, provides the HTML iframe code used to embed the checkout page on your website, and provides buttons to preview and edit the checkout page.

Preview Page

When you click the preview link or button corresponding to a Checkout page, you are presented with a preview of how that iframe will appear when you embed it onto your website for your subscribers to access.