Frontend Capabilities

# Product Object

# Overview

The Product object represents the item prices (opens new window) to be used in checkout. The plan item price (opens new window) 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.

# Prerequisites

Before using the Product object, ensure you have:

# 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 (opens new window) in the product.

# Syntax

product.setPlanQuantity(planQuantity)
1

# Parameters

quantity
Number
Quantity of the plan, if applicable

# 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);
1
2

# setPlanQuantityInDecimal(decimalQty)

Sets a decimal value for the plan item price (opens new window) quantity in the product.

# Syntax

product.setPlanQuantityInDecimal(decimalQty)
1

# Parameters

decimalQuantity
String
Decimal quantity of the plan, if applicable

# 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");
1
2

# incrementPlanQuantity()

Increments the plan item price (opens new window) quantity by 1.

# Syntax

product.incrementPlanQuantity()
1

# 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();
}
1
2
3
4
5
6

# decrementPlanQuantity()

Decrements the plan item price (opens new window) quantity by 1.

# Syntax

product.decrementPlanQuantity()
1

# 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();
}
1
2
3
4
5
6

# addAddon(addon)

Adds an addon item price (opens new window) to the product. You can pass either an addon ID string or an addon object with addon ID and quantity.

# Syntax

product.addAddon(addon)
1

# Parameters

addon
addon
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity
quantity_in_decimal
String
Addon quantity in decimal
String
Addon id

# 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");
1
2
3
4
5
6
7
8

# removeAddon(addon)

Removes an addon item price (opens new window) from the product. You can pass either an addon object with id or an addon ID string.

# Syntax

product.removeAddon(addon)
1

# Parameters

addon
addon
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity
quantity_in_decimal
String
Addon quantity in decimal
String
Addon id

# 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");
1
2
3
4
5

# setAddons(addons)

Sets one or more addon item prices (opens new window) for the product, replacing any existing addons.

# Syntax

product.setAddons(addons)
1

# Parameters

addons
Array<Object>
addon
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity
quantity_in_decimal
String
Addon quantity in decimal

# 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",
    }
]);
1
2
3
4
5
6
7
8
9
10

# incrementAddonQty(addonId)

Increments the quantity of a specific addon item price (opens new window) by 1.

# Syntax

product.incrementAddonQty(addonId)
1

# Parameters

addonId
String
addon id

# 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");
}
1
2
3
4
5
6
7
8
9
10

# decrementAddonQty(addonId)

Decrements the quantity of a specific addon item price (opens new window) by 1.

# Syntax

product.decrementAddonQty(addonId)
1

# Parameters

addonId
String
addon id

# 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");
}
1
2
3
4
5
6
7
8
9
10

# setCharges(charges)

Set one or more charge item prices (opens new window) for the product, replacing any existing charges.

# Syntax

product.setCharges(charges)
1

# Parameters

chargeItems
Array<Charge>
Array of Charge items
Charge
Object Hide properties
Charge item
id
String Required
ID of the charge item
quantity
Number
Quantity of the charge item, if applicable
quantity_in_decimal
String
Decimal quantity of the charge item, if applicable

# 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
    }
]);
1
2
3
4
5
6
7
8
9
10

# addCharge(chargeItem)

Adds a charge item price (opens new window) to the product.

# Syntax

product.addCharge(chargeItem)
1

# Parameters

Charge
Object Hide properties
Charge item
id
String Required
ID of the charge item
quantity
Number
Quantity of the charge item, if applicable
quantity_in_decimal
String
Decimal quantity of the charge item, if applicable

# Return value

Returns the Product object for method chaining, allowing you to call additional product methods.

# Example

product.addCharge({
    id: "installation-charge"
});
1
2
3

# removeCharge(chargeId)

Removes a charge item price (opens new window) from the product.

# Syntax

product.removeCharge(chargeId)
1

# Parameters

chargeItemId
String
ID of the charge item

# Return value

Returns the Product object for method chaining, allowing you to call additional product methods.

# Example

product.removeCharge("installation-charge");
1

# incrementChargeQty(chargeId)

Increments the quantity of a specific charge item price (opens new window) by 1.

# Syntax

product.incrementChargeQty(chargeId)
1

# Parameters

chargeItemId
String
ID of the charge item

# 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");
}
1
2
3
4
5
6
7
8

# decrementChargeQty(chargeId)

Decrements the quantity of a specific charge item price (opens new window) by 1.

# Syntax

product.decrementChargeQty(chargeId)
1

# Parameters

chargeItemId
String
ID of the charge item

# 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");
}
1
2
3
4
5
6
7
8

# addCoupon(couponCode)

Adds a coupon (opens new window) to the product.

# Syntax

product.addCoupon(couponCode)
1

# Parameters

coupon
String
coupon id

# 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");
1
2

# removeCoupon(coupon)

Removes a coupon from the product.

# Syntax

product.removeCoupon(coupon)
1

# Parameters

coupon
String
coupon id

# 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");
1
2

# setCustomData(data)

Sets subscription-level custom fields for the product. This information is passed and pre-filled in checkout automatically.

# Syntax

product.setCustomData(data)
1

# Parameters

data
Object
Object containing subscription custom fields

# 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"
});
1
2
3
4

# getLayout()

Gets the current layout (opens new window) of the checkout page.

# Syntax

product.getLayout()
1

# Return value

Returns a string representing the current layout.

# Example

const layout = product.getLayout();
1

# setLayout(layoutName)

Sets the layout (opens new window) of the checkout page.

# Syntax

product.setLayout(layoutName)
1

# Parameters

layout
String
Current layout of checkout
Allowed Values:
in_app
full_page

# Return value

Returns the Product object for method chaining, allowing you to call additional product methods.

# Example

product.setLayout("in_app");
1

← Card Components →