You can pass your customer details to ChargeBee's hosted payment page, to pre-fill the form.
We have support for the following fields.
If you have custom fields on your site, you can pass values for them too.
NOTE: For security reasons, billing address, shipping address and credit card information related fields cannot be pre-filled.
Here is a sample html code which can help you with pre-filling the checkout form.
<form id="customer.formid" name="customer.formname" method="GET" action="https://<yourchargebeedomain>.chargebee.com/hosted_pages/plans/<plan_id>" autocomplete="on">
<input id="credit_card.first_name" name="customer[first_name]" type="text" value="" validate="true" />
<input id="credit_card.last_name" name="customer[last_name]" type="text" value="" validate="true" />
<input id="customer.email" name="customer[email]" type="text" value=""/>
<input id="customer.coupon" name="subscription[coupon]" type="hidden" value="early_bird_offer" validate="true" />
<input type="submit" id="customer-user-submit" value="Subscribe"/>
Note: You can remove the coupon if not applicable. Coupon name should be exactly same to avoid errors.
Collecting customer details and passing it as parameters to the hosted page.
Click here for the live demo.
If you need to provide your customers with a discount coupon via links, you can use the below sample.
Get 15% Off - Early Bird Offer
Below is the sample code for the text based links.
<a href="https://labs-test.chargebee.com/hosted_pages/plans/basic?subscription[coupon]=early_bird_offer" target="_blank">Get 15% Off - Early Bird Offer</a>
Do let us know if you have a question.
As mentioned above, we only support pre-filling certain fields(first name, last name, email, coupon). Sending card details to the hosted checkout page is not supported because it is sensitive information and the hosted page's primary function is to collect sensitive data. We would suggest getting all the information except the card details on your form and get the credit card information on the checkout page.
ASP.Net question. I need to be able to access the input fields server side. When I add "runat=server" to the input field, it will not compile due to the "." in the id. Is there another way to pass information to the hosted pages.
Could you elaborate more on this and send us the code sample via email (firstname.lastname@example.org)? This will help us take a further look at the issue you're facing.
Note to those who find it 'doesn't work'. The problem is that this only fills the CUSTOMER data fields, which are hidden by default when you create a new plan. These will not pre-fill the BILLING or SHIPPING data fields, which is a shame and kind of defeats the purpose.
It would be great if you guys would allow a way to prefill at least the BILLING details as that is the kind of information collected.
Thanks for your feedback. We understand the requirement for this. We do have plans to revamp the hosted pages and we will definitely take it up then. At the moment, we do not have an ETA.
I followed what @Cooper said and turned on the CUSTOMER data fields on backend settings.
However, even the Customer's First Name Customer's Last Name cannot be pre-filled.
I am wondering whether it is because I am using embeded iframe hosted checkout page.
Any thoughts on this?
The customer first and last name can be prefilled in an iframe based hosted checkout page. Could you please send the code that you're currently using to us at email@example.com? We'll take a look at it and reply to you via email.
I finally found out the reason for my problem is not because of iFrame itself. It's simply because I misunderstood the returning data structure from /checkout_iframe/checkout. As I catch it with req.body.customer (with node.js as the backend), I could pre-filled the fields as I wished.
I do think the document for node.js should be as clear as php and java version, though.
@Mike, for security reasons, billing address, shipping address and credit card information related fields cannot be pre-filled. Here's more on what can be pre-filled and what cannot.
Hi Pre filling billing details on hosted pages is working ?
As explained earlier, prefilling billing, shipping addresses and credit card information on hosted pages is not allowed, due to security reasons.
Here's more information on the data that can and cannot be prefilled on hosted pages: Prefilling fields on hosted pages
Any reason why you delete the "+" sign at the beginning of a phone number when passing:
This is breaking the phone validation I do after, because "1-949-999-9999" is sent to web hook after instead of "+1-949-999-9999"