Product Object
Overview
The Product object represents the item prices to be used in checkout. The plan item price is set when you create the Product object using initializeProduct() or getProduct(). You can then use the Product object to change plan quantities, add addon and charge item price, coupons, and manage subscription details before proceeding to checkout.
Tutorials
For a step-by-step integration, see the following tutorial:
Prerequisites
Before using the Product object, ensure you have:
- Initialized Chargebee.js in your application
- Set up the product catalog in Chargebee Billing.
Create the Product object
You can retrieve the Product object from a drop-in script element using the getProduct() method, or create a product programmatically using the initializeProduct() method.
setPlanQuantity(planQuantity)
Sets the quantity for the plan item price in the product.
Syntax
product.setPlanQuantity(planQuantity)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);setPlanQuantityInDecimal(decimalQty)
Sets a decimal value for the plan item price quantity in the product.
Syntax
product.setPlanQuantityInDecimal(decimalQty)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.initializeProduct("high_speed");
product.setPlanQuantityInDecimal("15.737");incrementPlanQuantity()
Increments the plan item price quantity by 1.
Syntax
product.incrementPlanQuantity()Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);
function onIncreaseQuantity() {
product.incrementPlanQuantity();
}decrementPlanQuantity()
Decrements the plan item price quantity by 1.
Syntax
product.decrementPlanQuantity()Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);
function onDecreasePlanQuantity() {
product.decrementPlanQuantity();
}addAddon(addon)
Adds an addon item price to the product. You can pass either an addon ID string or an addon object with addon ID and quantity.
Syntax
product.addAddon(addon)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
// Add addon with quantity.
product.addAddon({
id: "silver-pass-USD-monthly", // Addon price point ID.
quantity: 2
});
// Add addon with default quantity.
product.addAddon("silver-freebies-1");removeAddon(addon)
Removes an addon item price from the product. You can pass either an addon object with id or an addon ID string.
Syntax
product.removeAddon(addon)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
// Remove addon using object
product.removeAddon({id: "Medication-reminders-USD-Monthly"});
// Remove addon using ID string
product.removeAddon("Medication-reminders-USD-Monthly");setAddons(addons)
Sets one or more addon item prices for the product, replacing any existing addons.
Syntax
product.setAddons(addons)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.getProduct(element);
product.setAddons([
{
id: "reports-USD-monthly",
quantity: 5,
},
{
id: "reminders-USD-monthly",
}
]);incrementAddonQty(addonId)
Increments the quantity of a specific addon item price by 1.
Syntax
product.incrementAddonQty(addonId)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.getProduct(element);
const reportsAddon = {
id: "reports-USD-monthly",
quantity: 10,
};
product.addAddon(reportsAddon);
function onIncreaseAddonQuantity() {
product.incrementAddonQty("reports-USD-monthly");
}decrementAddonQty(addonId)
Decrements the quantity of a specific addon item price by 1.
Syntax
product.decrementAddonQty(addonId)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.getProduct(element);
const reportsAddon = {
id: "reports-USD-monthly",
quantity: 10,
};
product.addAddon(reportsAddon);
function onDecreaseAddonQuantity() {
product.decrementAddonQty("reports-USD-monthly");
}setCharges(charges)
Set one or more charge item prices for the product, replacing any existing charges.
Syntax
product.setCharges(charges)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.setCharges([
{
id: "installation-charge",
quantity: 1,
},
{
id: "service-charge",
quantity: 1
}
]);addCharge(chargeItem)
Adds a charge item price to the product.
Syntax
product.addCharge(chargeItem)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.addCharge({
id: "installation-charge"
});removeCharge(chargeId)
Removes a charge item price from the product.
Syntax
product.removeCharge(chargeId)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.removeCharge("installation-charge");incrementChargeQty(chargeId)
Increments the quantity of a specific charge item price by 1.
Syntax
product.incrementChargeQty(chargeId)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.addCharge({
id: "membership-charges",
quantity: 1,
});
function addMember() {
product.incrementChargeQty("membership-charges");
}decrementChargeQty(chargeId)
Decrements the quantity of a specific charge item price by 1.
Syntax
product.decrementChargeQty(chargeId)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.addCharge({
id: "membership-charges",
quantity: 10,
});
function removeMember() {
product.decrementChargeQty("membership-charges");
}addCoupon(couponCode)
Adds a coupon to the product.
Syntax
product.addCoupon(couponCode)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.getProduct(element);
product.addCoupon("weekend_off_50");removeCoupon(coupon)
Removes a coupon from the product.
Syntax
product.removeCoupon(coupon)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
const product = chargebee.getProduct(element);
product.removeCoupon("weekend_off_50");setCustomData(data)
Sets subscription-level custom fields for the product. This information is passed and pre-filled in checkout automatically.
Syntax
product.setCustomData(data)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.setCustomData({
cf_data1: "test",
cf_data2: "test2"
});getLayout()
Gets the current layout of the checkout page.
Syntax
product.getLayout()Return value
Returns a string representing the current layout.
Example
const layout = product.getLayout();setLayout(layoutName)
Sets the layout of the checkout page.
Syntax
product.setLayout(layoutName)Parameters
Return value
Returns the Product object for method chaining, allowing you to call additional product methods.
Example
product.setLayout("in_app");