Start a new topic
Implemented

Pre-fill hosted payment page parameters and passing custom fields to ChargeBee via hosted page.


You can pass your customer details to ChargeBee's hosted payment page, to pre-fill the form. 


We have support for the following fields.

  • FirstName
  • LastName
  • Email ID
  • Coupon Name (If applicable)


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"/>
</form>

Note: You can remove the coupon if not applicable. Coupon name should be exactly same to avoid errors.


ChargeBee Passing Parameters For Hosted Page



Collecting customer details and passing it as parameters to the hosted page.


ChargeBee Passing Parameters For 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.




1 person likes this idea

Hi Erwan,


I see that you are using cURL to call our API. In this case, you will need to encode special characters such as '+' using their unicode equivalents. 


Ex: -d customer[phone]="%2b1-949-999-9999" 


I've notified our documentation team to update the docs to reflect this note. 


Just to understand, any reason why you are validating the phone number with the special character included? Considering customers may or may not enter their phone numbers with special characters, we generally recommend stripping away the special characters for any form of validation. 


1 person likes this

Ok that does the trick, thanks. We use international phone number E.164 format with the + in our database. That guarantee unicity. On the frontend, we use something like that: http://intl-tel-input.com/.

 Your article regarding Pre-fill hosted payment page parameters and passing custom fields to ChargeBee via hosted page. For any more assistance you can contact us at aol Support

Login or Signup to post a comment