This section describes how to configure a Hosted Checkout Page, a.k.a. Hosted Subscribe Page, in Zuora.
Configure a Hosted Checkout Page
As the first step for integrating and using a Checkout page on your commerce website, you must create a Hosted Checkout page in Zuora.
To create a new Hosted Checkout page:
- In Zuora, navigate to Settings > Commerce > Manage Checkout Pages.
- On All Checkout Pages, click new checkout page.
- In the Name field, enter a name for the page. This name is used to identify your page in Zuora. It is different from the title displayed on the page that you specify in the Page Title field.
A green vertical bar to the left of an input field indicates that the field is required.
To edit a Hosted Checkout page:
- In Zuora, navigate to Settings > Commerce > Manage Checkout Pages..
- On All Checkout Pages, locate the page that you want to edit in the Hosted Pages list, and click View for that page.
- Click edit at the top right of the resulting page.
Use the fields in the following sub-sections to configure the remainder of your Hosted Checkout page.
Customer Subscription Configuration
Use the fields in the Customer Subscription Configuration section to configure the subscription that will be created by the Checkout Page.
- Currency: Select the currency in which the subscription will be sold. This configuration page will then show only your products and rate plans in the Product and Rate Plan fields that have pricing defined for the selected currency.
- Product: Select the product that you want to sell on this Checkout page.
- Rate Plan: Select a rate plan for the product that you want to sell on this Checkout page.
If you change the underlying definition of the product or rate plan that you have chosen for this Checkout page, those changes will automatically be reflected on your checkout page.
- Term Setting: Select the term type of the subscription, Termed or Evergreen.
- If you select Termed, you must also select the Initial Term and Renewal Term for the subscription, and also whether to Auto Renew the subscription at the end of its term. You can specify the default values in Settings > Billing > Define Default Subscription Settings.
- Trigger Dates: If trigger conditions are enabled in your tenant, a new subscriber's Contract Effective Date will be set to the date that customer completes the Checkout page on your website.
If you require Service Activation and Customer Acceptance dates in your Zuora tenant, you can use these configuration fields to specify whether the Checkout page should set those trigger dates to be the same as the Contract Effective Date, or whether a future date should be used.
If you are using an edition of Zuora that does not enable trigger conditions, you will instead see a section to simply designate whether or not to offer new subscribers a free trial period for a certain number of days.
- Bill Cycle Day: Select the bill cycle day to use for all subscriptions created by the Checkout page. In many cases, you will want to select the Auto-set Bill Cycle Day, presuming you have enabled Auto-set as a Billing Period Start Day within your Settings > Billing > Define Billing Periods settings page.
- Payment Gateway: Select a payment gateway to use to process payments for this customer. The gateway must have been pre-configured in your Zuora tenant settings.
- Payment Processing: Select this option if you wish to generate an invoice and collect payment as soon as the customer submits the Checkout page. If you offer a free trial period, clear this option.
Hosted Checkout Page creates new customer accounts in your tenant that are Auto Pay, Due Upon Receipt, in Billing Batch 1, and using the Default Communication Profile. Because those are set by Zuora, those options are not provided as configuration settings.
Checkout Page Display
Use the fields in the Checkout Page Display section to configure the look and feel of the Checkout page.
- Page Title: Optionally enter a title to appear at the top of this Checkout page.
- Pricing Description: Configure how you want the pricing description to be displayed on the page. This field is set to Use Zuora Default Text. The Zuora default text is automatically generated based on the charges defined within the rate plan that you have selected for this Checkout page.
- For each field in the Customer Inputs section:
- Enabled: Select to display the field.
- Required: Select to make this field a require field.
The First Name and LastName fields are required by Zuora, as are certain mandatory credit card fields, so these fields must exist on your Checkout page.
- Label Name: Enter the display label to be shown on this hosted page.
- If you want to change the default display order of the input fields within a section, enter the number representing the display order of the field within the section.
The display order of the input field sections cannot be changed.
- Captcha Security Validation: Select this to enable the Captcha security validation. Captcha deters automated bots from using this page to submit fraudulent transactions. However, if you enable Captcha, your users will be required to complete an additional step during their checkout process.
Hosted Checkout page uses reCaptcha. When your customer enters the correct characters and clicks Subscribe, the page will redirect to the callback page. If your customer inputs the wrong characters, reCaptcha will display an error message.
You can use CSS to modify the Captcha block. See CSS Fields for Captcha for more information.
- Security Validation Label: Enter the label of the Captcha area. Available only if the Captcha Security Validation is selected.
- Terms of Service URL: Specify the URL of your terms of service.
- Subscribe Button Label: Enter the text that you want to appear on the subscribe button. This is the button that a user clicks to submit the Checkout page and create a new subscription.
- Custom CSS: Enter the custom CSS code for your page. See Checkout Page CSS for instructions on modifying the CSS.
In the Return Values section, configure the following:
- Return URL: Specify a full path to the return URL that Zuora should call upon a successful submission of this Checkout page.
- Additional Return Parameters: Select any optional fields that you would like Zuora to return in the Return URL upon a successful submission of this Checkout page. The optional fields are:
- account_id: The account ID for the customer subscription
- first_name: The first name on the account
- last_name: The last name on the account
- organization: The organization on the account
- email: The email address on the account
- subscription_id: The ID of the customer subscription
- product_id: The ID of the product added to the customer subscription
- product_rate_plan_id: The ID of the product rate plan added to the customer subscription
Preview and Save the Hosted Checkout Page
To preview and save the Checkout page iFrame:
- Click preview at the bottom of the Hosted Checkout configuration page.
- Zuora opens a preview of the iFrame, which shows the page as it will be displayed on your website.
- If you want to make changes to the Checkout page, return to the configuration page and make further changes.
- Click save to save your new Checkout page.
- In the Usage Information section on the following page, use the HTML code, the Page ID, and the API Security Key to embed this Checkout page onto a page on your website.
Using Zuora Tax with Hosted Checkout Pages
If you use Hosted Checkout pages and have Zuora Tax enabled, the appropriate taxes, as defined via Zuora Tax tax rates, will be displayed automatically and will be applied to your new subscribers who are using Checkout pages to complete their orders.
If you are using Zuora Tax, there is no additional work required on your part to have taxation appear in your Checkout pages. However, you must configure your Checkout pages to collect the appropriate location information from subscribers, for example, the Country, State/Province, and Postal Code fields, for tax to be calculated. If your users do not enter this information, they will not be able to complete the checkout process.