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.
- Need for hosted payment page
- Checkout process
- Setting up a hosted payment page
- Linking hosted payment pages to your website
- 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
- Payment Preferences
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.
<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 Subscriptions 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,
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=“the actual addon code” and addon quantity can be added using addon_quantity=“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.
If you were to include multiple addons, the same above URL will look like,
Here, 0 and 1 in the addon_code and addon_quantity which marks the addon numbers.
Collecting additional information from customers
By default, Zoho Subscriptions’ 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 Subscriptions hosted payment page supports the following custom field types.
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.
After successfully creating a subscription, Zoho Subscriptions will automatically send an email notification to your customer about the new subscription and other notifications related to the subscription. You can learn how to configure customer email notifications here.
Also, you will receive in-app and mobile notifications for various subscription and payment related events. You can download the Zoho Subscriptions’ 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.
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|
Your customers might face the following errors when they try to subscribe to one of your plans through 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.|
|CP2001||You have not set up default taxes for your organization.||Go to Settings > Taxes and create a default tax.|
|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.|