How can I pass prefilled Custom Fields through checkout via Drop-in Script?

Modified on: Mon, 12 Dec, 2022 at 1:41 PM

This article covers 

I have a custom field configured at the subscription level. I need to pass the value of the field while triggering checkout via Drop-in Script. How can I achieve this?


To pass the prefilled value of a custom field through Checkout via Drop-in script you need to input variables in the script like - “["cf_sub_test"= "subscription custom field";“. To get the complete sample code please click here.


You need to pass the parameter like - “["cf_sub_test"= "subscription custom field";“ where the “cf_sub_test” is the parameter of the respective custom field on your site. The Custom Field API parameters will be different if you have configured multiple custom fields on your site. To collect this parameter, navigate to Settings >> Configure Chargebee >> Custom Fields >> click on the required Custom Field >> copy the API name.

Sample script for PC 2.0 sites:

    document.addEventListener("DOMContentLoaded", function() {


                var cbInstance = Chargebee.getInstance();


                var planElement = document.querySelector("[data-cb-item-0='100-Monthly-USD-Monthly']");


                var product = cbInstance.getProduct(planElement);


                  // adding subscription custom fields


      ["cf_ref_code"] = "fbuy_ref_code";




                cbInstance.setCheckoutCallbacks(function(product) {




                    return {


                        loaded: function() {

                            console.log("checkout opened");



                        close: function() {

                            console.log("checkout closed");



                        success: function(hostedPageId) {




                        step: function(value) {

                            // value -> which step in checkout








You can use the complete sample code present here after replacing the site name,  plan price point ID, and custom field API parameter.

Related articles and Documentation

Drop-in Tutorial

Pre-filling/Passing custom fields to hosted pages (via Plan URL)

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.