Pre-fill Hosted Payment Pages

Pre-filling Hosted Payment Pages is useful if you collect a new customers’ basic information on your own webpage or form application, and then direct them to one of Zoho Billing’s Hosted Payment Pages.

By pre-filling Hosted Payment Pages, the data that you’ve collected from your customers on your own webpage or form will be filled into the Hosted Payment Page. This can save your customers from the hassle of entering their details all over again–thereby providing a more seamless transition to the Hosted Payment Page.

Insight: Your customers will be able to edit their data on the Hosted Payment Page if you pre-fill it using this method, instead of via API.

Setting up Pre-filled Hosted Payment Pages

Pre-filling Hosted Payment Pages works by passing field values as parameters in a plan’s URL.

To get your plan’s URL:

Now, you’ll need to append the information that you’ve collected from your customers as parameters to this URL, after which, you can use it to direct customers to the pre-filled Hosted Payment Page.

Appending Parameters to Your Plan’s URL

You can view a list of all the parameters that can be pre-filled in the Hosted Payment Pages, along with specific notes for some parameters. The information that you want to be pre-filled on the Hosted Payment Page should be mapped to these parameters and then be appended to the plan’s URL.

Points to note while appending parameters:

Warning: To avoid errors while accessing Hosted Payment Pages, it’s necessary that you encode the parameter’s value alone. This is to ensure that special characters or blank spaces that your customers enter get converted to a URL-friendly format.

E.g. If your customer’s billing address is “Southern California”, after encoding it, it would be “Southern%20California”. Here’s how that would look in the plan’s URL:

https://billing.zoho.com/subscribe/dc506029cac98b6asdfjhvb543e474d9403c16d836d1bc4e3bd2c445f231875e271/123?billing_city=Souther%20California

The need to encode special characters also applies to placeholders like addon_code[0], where the square brackets [ ] are special characters. This is what a URL with the addon code as 456 would look like:

https://billing.zoho.com/subscribe/dc506029cac98b6asdfjhvb543e474d9403c16d836d1bc4e3bd2c445f231875e271/123?addon_code%5B0%5D=456

Pro Tip: If you’re using a form application to collect your customer’s data before directing them to the Hosted Payment Page, look into how the form application can construct and encode the URL automatically. For example, Zoho Forms can map fields to a placeholder’s name and construct the URL with encoded values. On the other hand, if you’re using your own web page or application to collect data, you can use something like JavaScript’s encodeURIComponent function.

After you’ve constructed your plan’s URL with the appended parameters, you can use it to direct your users to the plan’s Hosted Payment Page with all the pre-filled data.

List of Parameters That Can Be Pre-filled

Order Summary

Account Information

Billing Address

Shipping Address

Customer Custom Fields

You can also pre-fill custom fields for customers in the Hosted Payment Pages. The placeholder names will vary for each custom field. To get the placeholder name for your customer field:

Also, if your custom field is of the Date data type, make sure that the date value of the custom field is in the YYYY-MM-DD format.


Was this document helpful?
Yes
No
Thank you for your feedback!