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?
Summary
To pass the prefilled value of a custom field through Checkout via Drop-in script you need to input variables in the script like - “product.data["cf_sub_test"] = "subscription custom field";“. To get the complete sample code please click here.
Solution
You need to pass the parameter like - “product.data["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
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);
}
}
});
});
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
Pre-filling/Passing custom fields to hosted pages (via Plan URL)