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.
Was this article helpful?