Embed and Share Hosted Payment Pages
Once you have created a Hosted Payment Page template, you can make it available to your customers by embedding it on your website or sharing its URL directly.
Charles manages Zylker Inc.’s website and wants customers to subscribe to plans directly from the pricing page. In just a few seconds, he configures the Button Label, copies the HTML URL code for each subscription plan from Zoho Billing, and embeds it into the corresponding Subscribe button on the website. When customers click the button, they are taken to the Hosted Payment Page, where they can complete the signup and payment process seamlessly.
Get the Hosted Payment Page URL
Each plan in Zoho Billing has a unique Hosted Payment Page URL. To get it:
- Log in to your Zoho Billing organization.
- Go to Product Catalog in the left sidebar.
- Select Plans.
- Open the plan you want to share.
- Click Share Hosted Payment Page.
Copy this URL to use in your website or to share with customers.
Embed as an iFrame
Embedding the Hosted Payment Page as an iFrame places the checkout form directly on your web page. Customers can complete the entire signup without leaving your site.
To embed the page as an iFrame, add the following code to your website where you want the form to appear:
<iframe src="YOUR_PLAN_URL" width="xxx" height="xxx"></iframe>
Replace YOUR_PLAN_URL with the plan’s Hosted Payment Page URL, and set the width and height values to fit your layout.
When the Hosted Payment Page is embedded in an iFrame, the header and footer sections configured in the template are hidden. Only the checkout form is displayed.
Embed as a Hyperlink
You can use the plan URL to link a button or text on your website to the Hosted Payment Page. When customers click the link, they are taken to the full-page checkout.
For example, on a pricing page, each Subscribe button can be hyperlinked to its respective plan URL:
<a href="YOUR_PLAN_URL">Subscribe</a>
Include Addons in the URL
By default, addons are not included in the Hosted Payment Page URL. To include one or more addons, append their codes and quantities to the plan URL as query parameters.
URL structure:
YOUR_PLAN_URL?addon_code%5B0%5D=ADDON_CODE&addon_quantity%5B0%5D=QUANTITY
Example: Single addon:
https://billing.zoho.com/subscribe/abc123/monthly-essential?addon_code%5B0%5D=NUTMIX0943&addon_quantity%5B0%5D=1
Example: Multiple addons:
https://billing.zoho.com/subscribe/abc123/monthly-essential?addon_code%5B0%5D=NUTMIX0943&addon_quantity%5B0%5D=1&addon_code%5B1%5D=GOODIEMIX&addon_quantity%5B1%5D=1
In the parameter keys, %5B and %5D are the URL-encoded forms of [ and ]. The number inside the brackets (0, 1, and so on) identifies the addons’ position in the list.
| Parameter | Description |
|---|---|
addon_code%5B0%5D | The code of the first addons. |
addon_quantity%5B0%5D | The quantity of the first addons. |
addon_code%5B1%5D | The code of the second addons (for multiple addons). |
addon_quantity%5B1%5D | The quantity of the second addons. |
Pre-fill Fields via URL Parameters
You can pre-fill the fields in the Hosted Payment Page by passing values as URL parameters. This is useful when you already know the customer’s details and want to reduce the amount of data they need to enter.
For full details on the supported parameters and syntax, see Prefill Customer Custom Fields Using API Field Names.
Yes
No
Thank you for your feedback!