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

Problem Statement

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?

Solution

To pass prefilled custom field values through Checkout via the Drop-in script, use the product.data object with the custom field API name as the key. The format is product.data["cf_<api_name>"] = "<value>";, where cf_<api_name> is the API parameter for your custom field.

To find the custom field API name: Settings > Configure Chargebee > Custom Fields > select the custom field > copy the API name.

Refer to this video for Custom Field API name.

Steps to Set It Up

Sample script for 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

            product.data["cf_ref_code"] = "fbuy_ref_code";

            console.log(product);



            cbInstance.setCheckoutCallbacks(function(product) {

                console.log(product.addons);

                return {

                    loaded: function() {

                        console.log("checkout opened");

                    },

                    close: function() {

                        console.log("checkout closed");

                    },

                    success: function(hostedPageId) {

                      console.log(hostedPageId);

                    },

                    step: function(value) {

                        // value -> which step in checkout

                        console.log(value);

                    }

                }

              });

        });

Replace the plan price point ID and custom field API parameter with your site values. For the complete sample code, see Chargebee Checkout Samples or the sample document.