## Zoho Billing - Product, solutions, integrations, support, and resources Index Access the complete documentation index at: https://www.zoho.com/us/billing/llms.txt Use this file to discover all available documentation pages before proceeding. # Customize Hosted Payment Page Templates After [creating a new template](/us/billing/help/settings/hosted-payment-pages/templates.html#create-template), you control exactly how your checkout page looks and behaves. To access template configuration: * Log in to your Zoho Billing organization. * Go to _Settings_. * Select **Hosted Payment Pages**. * Open the template you want to edit. * Configure the tabs in the left panel (General Preferences, Order Details, Payment Information, Messages & Notes, Thank You Page) and **Save**. ![Template Configuration](/billing/images/help/images/hosted-payment-page/configuration.png) **Scenario:** Patricia is the Subscription Manager at Zylker Technologies LLC. Her company offers annual software subscriptions through a Hosted Payment Page. She wants to create a branded, secure, and seamless checkout experience for her customers. Using Zoho Billing’s Hosted Payment Page, she customizes the page design, configures customer and payment information fields, sets up user verification and legal agreements, personalizes checkout messages, and even displays a customized Thank You page after a successful subscription in just minutes. ## General Preferences The **General Preferences** tab controls the visual appearance and behaviour of your checkout page. Use this section to customize branding, layout, buttons, background, and customer verification settings. ### Page Properties In this section, you can customize the overall look of your Hosted Payment Page. Field Description **Favicon** A small icon displayed on the browser tab that enhances brand recognition. Click **Upload** and select a file from your device. Maximum file size is 1 MB. **Browser Tab Name** The name displayed on the browser tab when a customer is on your Hosted Payment Page. **Width** The width of the page in pixels. **Note:** This option is available only in the Multi-Page template. **Font** The font used across the page. Select from the dropdown. **Section Headers** The size (in pixels) and color of section header text. Select a color using the color picker or enter a hex code. **Input Field** The size (in pixels) and placeholder color of input fields. Select a color using the color picker or enter a hex code. **Note:** This option is available only in the Multi-Page template. **Field Radius** The border radius of input fields in pixels. Higher values create a more rounded appearance. **Note:** This option is available only in the Multi-Page template. **Order Summary Header** The background color and font color of the Order Summary section. **Note:** This option is available only in the Multi-Page template. ### Header & Footer In this section, you can customize the header and footer sections of your Hosted Payment Page. **Note:** If you embed the Hosted Payment Page in an iFrame on your website, the header and footer sections are hidden. See [Embed as an iFrame](/us/billing/help/settings/hosted-payment-pages/embedding-and-sharing.html#iframe). Field Description **Display Title Band** Enable this option to show a title band in the header. Use it to display your company name, logo, and description. **Note:** Available only in the Multi-Page template. **Title** The title displayed in the header title band. Use the `%CompanyName%` placeholder to display your organization’s name automatically. Set the font size and color. **Note:** Available only when **Display Title Band** is enabled in the Multi-Page template. **Organization Logo** Check this option to display your organization’s logo in the title band. **Note:** Available only when **Display Title Band** is enabled in the Multi-Page template. **Description** Optional description text in the title band. Enter the text, then set the font size and color. **Note:** Available only when **Display Title Band** is enabled in the Multi-Page template. **Background Color** The background color of the title band. Enter a hex code or use the color picker. **Note:** Available only when **Display Title Band** is enabled in the Multi-Page template. **Customize Header Content** Custom HTML or text to display in the page header. You can use the text editor and insert placeholders. HTML is supported, allowing you to embed images. **Customize Footer Content** Custom HTML or text to display in the page footer. Use the text editor and insert placeholders as needed. **Header & Footer Background Color** The background color for the header and footer content areas. **Display Contact Information** Enable this to display your email address, phone number, and website (from your Organization Profile) in the footer. Set the font size and color. **Note:** Available only in the Single Page template. **Enable Social Sharing** Allow customers to share your Hosted Payment Page on social media. Enter a label to display in the footer and a pre-filled message for customers to share. ### Button Properties In this section, you can customize the appearance of action buttons on your Hosted Payment Page. Field Description **Background Color** The button’s background color. Use the color picker or enter a hex code. **Background Color on Hover** The button’s background color when a customer hovers over it. **Label Color** The color of the button text. **Border Radius** The border radius of the button in pixels. Higher values create a rounded button. **Note:** This option is available only in the Multi-Page template. **Label Size** The font size of the button text in pixels.**Note:** This option is available only in the Multi-Page template. ### Background In this section, you can customize the background of your Hosted Payment Page. Field Description **Color** The background color of the page. Use the color picker or enter a hex code. **Image** Upload a custom background image. Maximum file size is 1 MB. **Image Position** The position of the background image on the page. Select from the dropdown. **Image Repetition** Whether the background image repeats. Select from the dropdown. Repetition is based on the **Image Position** setting. **Scroll Behaviour** Whether the background image stays fixed or scrolls with the page content. ### User Verification In this section, you can configure how customers are authenticated before they proceed with checkout. This helps provides an ectra layer of security for your customers. User Verification is now available in both Multi-Page and Single Page templates. Field Description **Select Verification Mode** Choose how customers are verified before checkout: **Proceed Without Verification**: Customers can proceed directly without any identity check. A new customer record is created in Zoho Billing using the details entered. **Verify with Email**: Customers receive a one-time code to their email address before proceeding. If an existing email is entered, no duplicate customer is created. **Sign In to Existing Account or Sign Up**: Customers must sign in to their existing portal account or create a new one. Signing up creates a new customer with Customer Portal access. **Allow customers to update their information** Enable this option to let verified customers update their contact information and add new addresses directly from the Hosted Payment Page. **Note:** Not available when **Select Verification Mode** is set to **Proceed Without Verification**. **Allow guest users** Enable this option to let customers skip sign-in or sign-up and proceed as a guest. A customer record is still created based on the checkout details, but no portal access is granted. **Note:** Available only when **Select Verification Mode** is set to **Sign In to Existing Account or Sign Up**. **Insight:** For the India edition, mobile OTP verification is available for Hosted Payment Pages and Customer Portal logins. Customers can verify their identity using an OTP sent to their registered mobile number when **Verification Mode** is set to _Verify with Email_, _Sign In to Existing Account_, or _Sign Up_. This feature is currently in early access. Reach out to us at [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com) to enable it for your organization **Insight:** When **Sign In to Existing Account or Sign Up** is selected, the checkout behaviour differs by customer type: * **New customers**: Sign up, which creates a customer record and grants Customer Portal access. * **Existing customers**: Sign in with existing portal credentials and continue checkout. * **Guest users** (when enabled): Skip sign-in and proceed to checkout. A customer record is created but portal access is not granted. ### Visitor Behaviour Tracking You can connect **Google Analytics** or **Meta Pixel** to track visitor behaviour on a specific template. This is configured per template from the General Preferences tab. For full instructions on setting up tracking and viewing the data, see [Tracking Visitors](/us/billing/help/settings/hosted-payment-pages/visitor-tracking.html). * * * ## Order Details The **Order Details** tab controls what your customers see and fill in during the order and account information steps of checkout. Use this section to configure order summary display, customer fields, address collection, and custom fields. **Note:** You can reorder the fields withhin _Account Information, Billing Address_, and _Shipping Address_ sections by dragging them in the live preview panel. ### Order Summary In this section, you can configure what information is shown in the order summary table and how customers can interact with it. Field Description **Show Order Summary** Enable this option to display the order summary section to your customers. **Title** The label displayed as the Order Summary section header. **Plan** The label for the plan section header. **Note:** Plans and Addons are shown as separate sections only in the Multi-Page template. In the Single Page template, they are combined under the **Item** section header. **Addon** The label for the addon section header. **Quantity** The label for the quantity column. **Allow customers to edit quantities**: Enable this option to let customers change the quantity of each item or addon. **Price Label** The label for the price column. **Setup Fee Label** The label for the setup fee line item. **Credits Applied Label** The label for the credits applied line item. **Subtotal Label** The label for the subtotal line item. **Enable Coupons** Enable this option to allow customers to apply coupons during checkout. You can also customize the placeholder text displayed in the coupon input field. **Make Setup Fee Taxable** Enable this option to include the setup fee in tax calculations. **Note:** Available only in specific editions, based on the taxation policies of the region. **Show Billing Frequency** Enable this option to display the billing frequency of the subscription in the order summary. **Show Billing Cycle** Enable this option to display the number of billing cycles for the subscription. **Show Plan and Addon Descriptions** Enable this option to display the description of plans and addons in the order summary table. **Button Label** The label on the button at the bottom of the Order Summary page. **Note:** Available only in the Multi-Page template. **Note:** For organizations created after 24 July 2026, the **Enable Coupons** and **Total Label** fields are available in the [Final Summary](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#final-summary) section. For existing organizations, this update is currently in early access. Contact [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com) to enable it for your organization. ### Tax Registration Information If taxes are enabled for your organization, additional tax registration fields may be displayed in the hosted payment page based on your edition and region to comply with local tax regulations. These fields are shown in the [**Order Summary**](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#order-summary) section for Single Page checkout and the [**Final Summary**](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#final-summary) section for Multi-Page checkout. #### GSTIN (India Edition) For India edition, enabling the **GSTIN** option displays the GST Identification Number field. Customers can enter their GSTIN during checkout, and you can customize the field label. #### VAT Registration Number For UK edition, if trade outside the EU is enabled for your organization, the **VAT Registration Number** field is displayed in the Order Summary section. VAT is applied to all items based on the customer’s billing country. Billing Country VAT Behaviour UK VAT is applied to all items. Non-EU country No VAT is applied. EU country, VAT registered Zero VAT (0%) is applied. EU country, Not VAT registered VAT is applied to all items. EU country, Not VAT registered (digital services) No VAT is applied. ### Account Information In this section, you can configure the fields that customers fill in when providing their account details during checkout. To reorder Account Information fields: * Click the **Reorder** button next to _Account Information Fields_. * Drag the fields to the desired order. * Click **Save**. Field Description **Title** The label displayed as the Account Information section header. **Enable the portal for customers automatically** When enabled, new customers who sign up via the Hosted Payment Page are automatically sent a Customer Portal invitation email. **Account Information Fields** Enable, disable, rename, or set the field type for each standard account field: First Name, Last Name, Email Address (mandatory), Company, Mobile, Phone, and Website URL. **Customer Custom Fields** Add customer custom fields to collect additional information during checkout. See [Field Types](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#field-types) for configuration options. **Communication Channels** Select **SMS** or **WhatsApp** as the channels through which subscription and payment notifications will be sent to customers who sign up through this page. **Note:** These options are visible only if you have integrated SMS and WhatsApp with your organization. **Button Label** The label on the button at the bottom of the Account Information page. **Note:** Available only in the Multi-Page template. ### Address Information In this section, you can configure the billing and shipping address fields that customers fill in during checkout. Go to the **Billing Address** or **Shipping Address** tab to configure each separately. **Insight:** You can reorder address fields within each section by clicking the **Reorder** icon next to _Address Fields_, dragging the fields, and clicking **Save**. Click **Reset** to restore the original order. Field Description **Title** The label for the Address Information section header. **Allow customers to choose between saved addresses** Enable this to let existing customers select from their saved addresses. **Enable Address Autocomplete** Customers can autocomplete address fields using the Address Typeahead extension. You must have this extension installed, and the API key must be restricted to your organization’s URL. **Show Billing / Shipping Address** Enable this option to display the billing or shipping address section respectively. **Address Fields** Enable, disable, rename, or set the field type for each address field: Country, State, City, Address, Address Line 2, and ZIP. **Copy Billing Address Label** _(Shipping Address tab only)_ The label for the checkbox that copies the billing address to the shipping address fields. **Button Label** The label on the button at the bottom of the Address Information page. Clicking this button takes the customer to the Final Summary page. **Note:** Available only in the Multi-Page template. ### Final Summary **Note:** This section is available only in the [**Multi-Page**](/us/billing/help/settings/hosted-payment-pages/templates.html#multi-page) template. In this section, you can configure the information shown to customers before they enter their payment details. This is the last step before payment. **Insight:** If you have selected **Verify with Email** as the verification mode, customers verify their email address from the Final Summary page. You can also disable the Final Summary section entirely if it is not needed for your checkout flow. Field Description **Show Final Summary** Enable this option to display the Final Summary section to customers. If disabled, customers proceed directly from Address Information to Payment. **Next Renewal Date Label** The text displayed to inform customers about their next renewal date. Use the `%NextInvoiceDate%` placeholder to insert the date dynamically. If left empty, the next renewal date is not displayed. **Note:** Visible only when **Show Final Summary** is enabled. **Invoice Custom Fields** Add invoice custom fields to collect invoice-specific information from customers during checkout. See [Field Types](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#field-types) for configuration options. **Enable Coupons** Enable this option to allow customers to apply coupons during checkout. You can also customize the placeholder text displayed in the coupon input field. **Total Label** The label for the total line item. **Button Label** The label on the button at the bottom of the Final Summary page. **Note:** Visible only when **Show Final Summary** is enabled. **Note:** For organizations created after 24 July 2026, the **Enable Coupons** and **Total Label** appear in this section for the Multi-Page template. For existing organizations, reach out to us at [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com). ### Additional Information **Note:** This section is available only in the [**Single Page**](/us/billing/help/settings/hosted-payment-pages/templates.html#single-page) template and is currently in early access, reach out to us at [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com) to enable it for your organization. In this section, you can configure invoice-specific custom fields that appear on the Single Page checkout form. Field Description **Invoice Custom Fields** Add invoice custom fields that customers fill in during checkout. See [Field Types](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#field-types) for configuration options. ### Field Types The **Field Type** dropdown is available for Account Information fields, Address fields, and Invoice Custom Fields. It controls how each field behaves during checkout. Field Type Description **Optional** The field is shown and customers can fill it in if they want. **Mandatory** The field is shown and customers must fill it in to proceed. **Hidden** The field is not shown on the page. However, data for this field can be passed as a URL parameter. See [Embedding and Sharing](/us/billing/help/settings/hosted-payment-pages/embedding-and-sharing.html) for pre-fill options. **Read Only** The field is shown but cannot be edited. Used to display pre-filled data passed via URL parameters. **Note:** Including customer and invoice custom fields in Hosted Payment Pages is enabled by default for organizations created after July 1, 2026. For existing organizations, this feature is in early access. Contact [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com) to have it enabled. * * * ## Payment Information The **Payment Information** tab controls how the payment step is presented to your customers. Use this section to configure payment fields, add security measures, and include legal terms and agreements. ### Payment Details In this section, you can customize how the payment information step is presented, configure button labels, and add security measures. Field Description **Title** The label displayed as the payment information section header. **Skip this section for** Select the conditions under which the payment step is skipped: **Trial plans**: Customers signing up for a trial plan skip the payment step. **Zero-value plans**: Customers signing up for a plan with no charge skip the payment step. **Customers with credits or coupons that nullify the total bill amount**: Customers whose total is reduced to zero by credits or coupons skip the payment step. **Note:** This applies only to new subscriptions created through the Hosted Payment Page. **Cards / Bank Account** Customize the card or bank account input fields from the respective **Cards** and **Bank Account** tabs. **Label** The label on the main checkout button. **Enable CAPTCHA** Enable CAPTCHA to add a security layer that distinguishes humans from automated bots. This helps prevent spam and automated account creation on your checkout page. **Zero-Value Checkout Label** The label on the checkout button when the total is zero. **Trial Plan Checkout Label** The label on the checkout button when the customer is signing up for a trial plan. **Update Payment Information Label** The label on the checkout button when a customer is updating their payment method via the Hosted Payment Page. **Asynchronous Payment Gateway Label** The label on the checkout button when the customer is redirected to a third-party payment gateway to complete their payment. Use the `%GatewayName%` placeholder to display the selected gateway’s name. * * * ## Payment Preferences You can control the order in which payment modes appear on your Hosted Payment Page. The payment modes available in the respective gateways are displayed in the order you configure here. To configure payment preferences: * Log in to your Zoho Billing organization. * Go to _Settings_. * Select **Payments Received** under _Sales_. * Click the **Preferences** tab. * Drag and drop the payment modes to reorder them. * Enter a custom label for each payment mode if needed. * Click **Save**. The following payment gateways enable specific payment modes on your Hosted Payment Page: Payment Mode Payment Gateway Required Express Checkout Payflow Pro, Payments Pro Bank Account Forte, GoCardless, Authorize.Net Credit Card All payment gateways except 2Checkout and PayPal * * * ### Legal Agreements In this section, you can configure legal agreements and policies that customers must acknowledge before completing their payment. Go to the **Cards** or **Bank Account** tab to configure legal terms for each payment method separately. Field Description **ACH Agreement** The legal text for ACH (Automated Clearing House) direct debit transactions. Use the `%CompanyName%` placeholder to insert your company name. **Note:** Available only in the **Bank Account** tab. **Terms & Conditions Label** The label for the Terms & Conditions link shown in the agreement statement above the checkout button. **Privacy Policy Label** The label for the Privacy Policy link shown in the agreement statement above the checkout button. **Terms & Conditions URL** The URL to your Terms & Conditions page. Customers are taken to this URL when they click the Terms & Conditions label. **Privacy Policy URL** The URL to your Privacy Policy page. Customers are taken to this URL when they click the Privacy Policy label. **Display Mandatory Legal Agreement Checkbox** Enable this option to require customers to check a checkbox confirming they have read and accepted your Terms & Conditions and Privacy Policy. Select **Yes** under _Should be checked by default?_ to pre-check the checkbox when a customer arrives at the payment step. **License Agreement** The full licence agreement text shown above the checkout button. Use these placeholders to insert dynamic content: `%ButtonText%`: Inserts the checkout button label. `%TermsURL%`: Inserts the Terms & Conditions URL. `%PrivacyURL%`: Inserts the Privacy Policy URL. * * * ## Messages & Notes The **Messages & Notes** tab lets you customize the text displayed to customers during error states, successful signups, and payment updates. Use this section to provide clear, branded guidance at each step of the checkout process. ### Error Messages Enter the message displayed when a customer leaves a mandatory field empty or enters invalid data. **Insight:** Use the `%Label%` placeholder in the error message to dynamically display the name of the field that caused the error. For example: “The %Label% field is required.” ### Success Messages Configure the messages displayed to customers after they successfully complete a checkout action. Field Description **Success Checkout Message** The message displayed when a customer successfully subscribes to your product. **Trial Plan Note** The message displayed when a customer successfully signs up for a trial plan. Use this to inform customers about when their trial ends and what happens next. Use the `%TrialEndDate%` placeholder to insert the trial end date dynamically. **Future Subscription Start Date Information** The message displayed to customers when their subscription has a future start date. Use the `%FutureDate%` placeholder to insert the subscription’s billing start date dynamically. ### Update Payment Page Configure the messages shown when a customer updates their payment method through the Hosted Payment Page. Field Description **Warning Message** The message displayed to inform customers that the new payment method will replace their existing one. Use the `%LastFourDigits%` placeholder to include the last four digits of the customer’s current card or bank account. **Success Message** The message displayed when a customer successfully updates their payment method. * * * ## Thank You Page The **Thank You Page** tab controls the confirmation page customers see immediately after a successful checkout. Use this section to customize the message, image, and redirect behaviour to create a polished post-purchase experience. ### Page Configuration To customize the Thank You page for your template, configure the fields below in the **Thank You Page** tab. Field Description **Browser Tab Name** The text displayed on the browser tab when a customer is on the Thank You page. **Image/GIF** Click **Upload** to upload an image or GIF displayed above the Thank You message. Maximum file size is 1 MB. If no image is uploaded, the default tick animation is used. **Title** The headline of the Thank You message shown to customers after a successful checkout. **Title Font Size** The font size of the Thank You message title, in pixels. **Description** The body text below the title. Click **\+ Insert Placeholders** to add dynamic content such as the customer’s name or subscription details. **Description Font Size** The font size of the description text, in pixels. **Footnote** Additional content displayed at the bottom of the Thank You page. You can use the text editor and insert placeholders. ### Redirect URL Instead of showing the default Thank You page, you can redirect customers to any page of your choice after a successful checkout, for example, your homepage or a custom confirmation page. Redirect URLs can be configured at two levels: * **Organization level**: Go to _Settings_, select **Products** under _Preferences_, and enter the URL in the **Redirection URL** field. This URL applies to all products that do not have a product-specific redirect URL. * **Product level**: Enter the URL in the **Redirection URL** field when creating or editing a product. Click **\+ Insert Placeholders** to append subscription-related details to the URL. The product-level URL overrides the organization-level URL. **Note:** The Redirect URL configured at the product level applies to the product, not individual plans. If no Redirect URL is configured at either level, customers see the default Thank You page. When a customer is redirected, Zoho Billing appends the hosted page ID to the URL. You can use this to identify which transaction brought the customer to your page. * * * ### Add Invoices and Customer Custom Fields **Note:** This feature is enabled by default for organizations created after July 1, 2026. For existing organizations, this feature is currently in early access. Reach out to our support at [](mailto:support@zohobilling.com)[support@zohobilling.com](mailto:support@zohobilling.com) to enable it for your organization. You can now include customer and invoice custom fields in your Hosted Payment Pages. This allows you to capture additional details such as customer preferences, internal reference values, or invoice-specific information from your customers based on your business requirements. You can do this from the relevant Order Details sections in your Hosted Payment Page template: * To add customer custom fields, go to [Account Information](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#account-information). * To add invoice custom fields in the Multi-Page template, go to [Final Summary](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#final-summary). * To add invoice custom fields in the Single Page template, go to [Additional Information](/us/billing/help/settings/hosted-payment-pages/template-configuration.html#additional-information). Once custom fields are added to your template, you can also prefill their values using URL parameters if required. Learn more about [Prefill Customer Custom Fields Using API Field Names](/us/billing/help/settings/hosted-payment-pages/pre-fill.html#prefill-customer-custom-fields-api). * * * * * *