Introduction to Hosted Payment Pages

Hosted payment pages allow you to collect card and personal information from your customers. If you own a website or an online service, you can setup a hosted payment page to act as your checkout page/signup page. Your customers can choose the product or service of their choice and pay for them through the hosted payment page.

Related topics:

• Need for hosted payment page
• Setting up a hosted payment page
• Linking hosted payment pages to your website
• Pre-filling hosted payment pages with data from your website/webapp
• Including add-on(s) in hosted payment page
• Collecting additional information from customers
• Thank You Page/Redirect URL
• Email notifications
• Customizing the hosted payment page
• UK specific notes
• Payment Preferences
• Troubleshooting

Need for a hosted payment page

You might ask “Why do I need a hosted payment page? Can’t I setup a page myself and collect payments?” The answer is, setting up your own page and collecting payments requires your website to be PCI-compliant and the process can sometimes be long and tedious.

But, deploying a hosted payment page for your website can be done within minutes and you don’t have to worry about PCI-compliance since the hosted payment pages are by default PCI compliant which means they are highly secure and complies with all security standards. Also, the hosted payment pages are mobile friendly which makes them easily accessible via mobile phones.

Setting up a hosted payment page

Hosted payment pages are specific to each plan and they’ll be generated automatically when you create a plan. You can view the hosted payment page link for each plan by clicking on View Plan URL link under each plan. Once you embed this link in your website, your customer can subscribe to your plan by giving their personal and card information.

Linking hosted payment page to your website

There are two ways to embed hosted payment page in your website.

• As an iframe
• As a hyperlink

As an iframe

This will embed the hosted payment page form directly on the page so that, customer can directly enter the details and complete the subscription process.

To embed the hosted payment page in an iframe, embed following code in your website where you want to embed the page.

Syntax:

<iframe src="view plan URL" width="xxx" height="xxx"></iframe>

Replace the view plan URL with the plan URL and enter the width and height of the form. Hosted payment page embedded in an iframe will look like this.

As a hyperlink

You can use the plan URL to hyperlink a button or text to include the hosted payment page. For example, refer the screenshot below where each Subscribe button is hyperlinked to respective plan URLs.

So, when your customers clicks on a Subscribe button, they’ll be taken to the hosted payment page to compete the subscription process.

Including add-ons in hosted payment pages

Zoho Billing does not include addons in your hosted payment page by default. You have to manually embed them by passing parameters along with the plan URL and the section below is going to explain how to include addon to the plan url.

Let’s take the following plan URL(without addon embedded) for example,

https://billing.zoho.com/subscribe/3b884751f87f05e584c3952b6388e7f96a2bba0f6b0532177e00f0ba8db832fc/monthly-essential

Now, to include the addon, you have to add the addon code and addon quantity at the end of the plan URL after “?” (question mark). Addon code and addon quantity should be separated by “&” (ampersand sign).

Addon code can be added using addon_code%5B0%5D=“the actual addon code” and addon quantity can be added using addon_quantity%5B0%5D=“the actual addon quantity”.

Here, “0” in addon_code and addon_quantity marks the addon number. So, if you’re including multiple addons, the numbers will increase.

https://billing.zoho.com/subscribe/3b884751f87f05e584c3952b6388e7f96a2bba0f6b0532177e00f0ba8db832fc/monthly-essential?addon_code%5B0%5D=NUTMIX0943&addon_quantity%5B0%5D=1

If you were to include multiple addons, the same above URL will look like,

https://billing.zoho.com/subscribe/3b884751f87f05e584c3952b6388e7f96a2bba0f6b0532177e00f0ba8db832fc/mnthly-essential?addon_code%5B0%5D=NUTMIX0943&addon_quantity%5B0%5D=1&addon_code%5B1%5D=GOODIEMIX&addon_quantity%5B1%5D=1

Here, 0 and 1 in the addon_code and addon_quantity which marks the addon numbers.

Collecting additional information from customers

By default, Zoho Billing’ hosted payment page allows you to collects name, email, shipping and billing address from your customer. Sometimes you may have to collect additional information from your customers that your business may require. In these situations, you can use custom fields to collect the additional information.

As of now, Zoho Billing hosted payment page supports the following custom field types.

• Dropdown
• Text
• Decimal
• Percentage
• Phone
• Number
• Email
• URL
• Amount
• Date
• Checkbox

To add any of these custom fields to the hosted payment pages, read here.

Thank You Page/Redirect URL

When your customer successfully signups to your plan, you can either take them to the default thank you page or to any page that you want to take them. For instance, your homepage.

• Default Thank You Page

Your customers will be taken to the Default Thank You page if the redirect URL is left empty. You can change the content and image of the thank you page by clicking Thank You page tab from the sidebar in the hosted payment page edit section.

• Redirect URL

Redirect URL can be used when you want to take your customers to a specific page or to your very own custom designed page. You can enter the URL to which you want to take your customers under Redirect URL field at the time of product creation or at the product edit screen.

Note: The Redirect URL is specific to each product and not to each plan. Also, if the redirect URL is left empty, customers will be taken to the default thank you page.

Email Notifications

After successfully creating a subscription, Zoho Billing will automatically send an email notification to your customer about the new subscription and other notifications related to the subscription.

Also, you will receive in-app and mobile notifications for various subscription and payment related events. You can download the Zoho Billing’s iOS application here.

Customizing the hosted payment page

Yes, you can customize the hosted payment page to suit you needs. You can customize the font color and size, set a background image, change the text fields’ width and height, change license agreement labels and many more.

To customize the hosted payment page,

• Click on Gear icon and select More Settings.
• Select Hosted Payment Pages from the left pane.
• In the following page, you can customize almost every aspect of the hosted payment page.
• Once you’re done with editing, click on Save.

UK specific notes

If trade outside EU is enabled for an organization, with respect to the billing country, the VAT Registration Number field will be displayed in the Order Summary section and accordingly VAT will be collected for all the items.

Note:

• If it is UK, accordingly VAT will be collected for all the items.
• If it is a Non EU country, then no VAT will be applied.
• If it is an EU country and if the VAT registration number is entered in the field provided, i.e. EU VAT registered, then Zero VAT(0%) will be applied.
• If it is an EU country and if the VAT registration number is not entered in the field provided, i.e. EU Non VAT registered, then accordingly VAT will be collected for all the items.
• Even if it is EU Non VAT registered, VAT will not be collected for digital services.

Payment Preferences

You can change the order in which the different online payment methods appear in your hosted payment pages. 

• Go to Settings > Preferences > Payment.
• Drag & drop the payment mode to change its order.
• Enter a label name for each payment mode if needed.

Integrate the following online payment gateways in order to enable different payment modes:

Payment Mode	Payment Gateway to be Integrated
Express Checkout	Payflow Pro, Payments Pro
Bank Account	Forte, GoCardless, Authorize.Net
Credit Card	All payment gateways except 2Checkout and Paypal

Troubleshooting

Your customers might receive these errors when they try to subscribe to one of your plans using hosted payment pages:

Error Code	What went wrong?	What can you do?
CP1003	Your hosted payment page might be associated with a deleted customer.	Verify that the associated customer still exists.
CP1004	Your hosted payment page might be associated with a deleted subscription.	Verify that the associated subscription still exists.
CP1005	Your hosted payment page might be associated with an inactive plan.	Verify that the associated plan is active.
CP1006	Your hosted payment page might be associated with an inactive add-on.	Verify that the associated add-on is active.
CP1007	Your hosted payment page might be associated with a deleted plan or the URL might contain an invalid plan code.	Fix the URL by entering the correct plan code
CP1008	Your hosted payment page might be associated with a deleted add-on or the URL might contain an invalid add-on code.	Fix the URL by entering the correct add-on code
CP1009	The add-on quantity given for the associated add-on is invalid.	Enter a valid add-on quantity.
CP1011	ACH/direct debit payments have not been enabled for your customer.	Enable ACH/direct debit payments by going to Customers > Select customer > Mark the Enable ACH/direct debit payments for this customer box.
CP1012	A one-time add-on was associated with a trial subscription while signing up.	Remove the one-time add-on and try again, or associate the one-time add-on with a non-trial subscription.
CP2001	You have not set up default taxes for your organization.	Go to Settings > Taxes and create a default tax.
CP2011	Digital service plans/add-ons cannot be included in the invoice along with goods or other services.	Create separate hosted payment pages for digital services.
CP2012	Customer’s billing country does not match the EU tax member state that you’ve associated with the plan or add-on (digital service). You’ll get this error only when you’ve enabled VAT MOSS for your organization.	Make sure that the customer belongs to your organization’s tax registered member state.
CP2013	You have not entered the product type for the plan or add-on for which your customer is trying to subscribe.	Edit the plan/add-on and specify whether the product is a good, service or digital service.
CP3001	You have not enabled reference transactions in your merchant account.	Enable reference transactions in your merchant account.
CP3002	You have configured the payment gateway with invalid credentials or have made recent changes to your merchant account.	Re-enter the correct credentials by going to Settings > Integrations.
CP3003	The payment has been declined due to the fraud detection filters that you’ve set up in your merchant account.	Verify if the transaction was fraudulent or not. Moderate your fraud filters, if necessary.
CP3004	The transaction has been declined as the payment gateway couldn’t verify the address of your customer.	Enable the address fields for your hosted payment pages from Settings > Hosted Payment Pages.
CP3005	A transaction with the same amount and card details was made within a few minutes of the previous transaction.	Ask your customers to try again after a few minutes.
CP4001	The transaction amount is less than the minimum amount allowed by the payment gateway. This may be due to the discounts or credits applied.	Make sure that the transaction amount is greater than the minimum transaction amount.
CP4002	Payment gateway that you’ve configured doesn’t support recurring payments.	Configure a payment gateway which supports recurring payments.
CP4003	The payment gateways that you’ve configured don’t support the transaction currency.	Configure a payment gateway which supports the transaction currency.