# Product Object

## Overview

The Product object represents the [item prices](https://apidocs.chargebee.com/docs/api/item_prices) to be used in checkout. The [plan item price](https://apidocs.chargebee.com/docs/api/item_prices#types) is set when you create the Product object using [`initializeProduct()`](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#initializeproduct-planid-planquantity) or [`getProduct()`](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#getproduct-checkoutbuttonelement). 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:

- [Drop-in Checkout with Chargebee.js](https://www.chargebee.com/tutorials/drop-in-checkout/)

## Prerequisites

Before using the Product object, ensure you have:

- [Initialized Chargebee.js](https://www.chargebee.com/docs/js/settingup-api-ref) in your application
- Set up the [product catalog](https://www.chargebee.com/docs/billing/2.0/product-catalog/product-catalog) in Chargebee Billing.

## Create the Product object

You can retrieve the Product object from a drop-in script element using the [`getProduct()`](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#getproduct-checkoutbuttonelement) method, or create a product programmatically using the [`initializeProduct()`](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#initializeproduct-planid-planquantity) method.

## `setPlanQuantity(planQuantity)`

Sets the quantity for the [plan item price](https://apidocs.chargebee.com/docs/api/item_prices#types) in the product.

### Syntax

```js
product.setPlanQuantity(planQuantity)
```

### 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

```js
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);
```

## `setPlanQuantityInDecimal(decimalQty)`

Sets a decimal value for the [plan item price](https://apidocs.chargebee.com/docs/api/item_prices#types) quantity in the product.

### Syntax

```js
product.setPlanQuantityInDecimal(decimalQty)
```

### 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

```js
const product = chargebee.initializeProduct("high_speed");
product.setPlanQuantityInDecimal("15.737");
```

## `incrementPlanQuantity()`

Increments the [plan item price](https://apidocs.chargebee.com/docs/api/item_prices#types) quantity by 1.

### Syntax

```js
product.incrementPlanQuantity()
```

### Return value

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

### Example

```js
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);

function onIncreaseQuantity() {
    product.incrementPlanQuantity();
}
```

## `decrementPlanQuantity()`

Decrements the [plan item price](https://apidocs.chargebee.com/docs/api/item_prices#types) quantity by 1.

### Syntax

```js
product.decrementPlanQuantity()
```

### Return value

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

### Example

```js
const product = chargebee.initializeProduct("premium_plan");
product.setPlanQuantity(10);

function onDecreasePlanQuantity() {
    product.decrementPlanQuantity();
}
```

## `addAddon(addon)`

Adds an [addon item price](https://apidocs.chargebee.com/docs/api/item_prices#types) to the product. You can pass either an addon ID string or an addon object with addon ID and quantity.

### Syntax

```js
product.addAddon(addon)
```

### Parameters

- `addon`
  - `addon` (Object)
    - `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

```js
// 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](https://apidocs.chargebee.com/docs/api/item_prices#types) from the product. You can pass either an addon object with `id` or an addon ID string.

### Syntax

```js
product.removeAddon(addon)
```

### Parameters

- `addon`
  - `addon` (Object)
    - `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

```js
// 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](https://apidocs.chargebee.com/docs/api/item_prices#types) for the product, replacing any existing addons.

### Syntax

```js
product.setAddons(addons)
```

### Parameters

- `addons` (Array<Object>)
  - `addon` (Object)
    - `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

```js
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](https://apidocs.chargebee.com/docs/api/item_prices#types) by 1.

### Syntax

```js
product.incrementAddonQty(addonId)
```

### Parameters

- `addonId` (String) addon id

### Return value

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

### Example

```js
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](https://apidocs.chargebee.com/docs/api/item_prices#types) by 1.

### Syntax

```js
product.decrementAddonQty(addonId)
```

### Parameters

- `addonId` (String) addon id

### Return value

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

### Example

```js
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](https://apidocs.chargebee.com/docs/api/item_prices#types) for the product, replacing any existing charges.

### Syntax

```js
product.setCharges(charges)
```

### Parameters

- `chargeItems` (Array<Charge>) Array of Charge items
  - `Charge` (Object) 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

```js
product.setCharges([
    {
        id: "installation-charge",
        quantity: 1,
    },
    {
        id: "service-charge",
        quantity: 1
    }
]);
```

## `addCharge(chargeItem)`

Adds a [charge item price](https://apidocs.chargebee.com/docs/api/item_prices#types) to the product.

### Syntax

```js
product.addCharge(chargeItem)
```

### Parameters

- `Charge` (Object) 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

```js
product.addCharge({
    id: "installation-charge"
});
```

## `removeCharge(chargeId)`

Removes a [charge item price](https://apidocs.chargebee.com/docs/api/item_prices#types) from the product.

### Syntax

```js
product.removeCharge(chargeId)
```

### 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

```js
product.removeCharge("installation-charge");
```

## `incrementChargeQty(chargeId)`

Increments the quantity of a specific [charge item price](https://apidocs.chargebee.com/docs/api/item_prices#types) by 1.

### Syntax

```js
product.incrementChargeQty(chargeId)
```

### 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

```js
product.addCharge({
    id: "membership-charges",
    quantity: 1,
});

function addMember() {
    product.incrementChargeQty("membership-charges");
}
```

## `decrementChargeQty(chargeId)`

Decrements the quantity of a specific [charge item price](https://apidocs.chargebee.com/docs/api/item_prices#types) by 1.

### Syntax

```js
product.decrementChargeQty(chargeId)
```

### 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

```js
product.addCharge({
    id: "membership-charges",
    quantity: 10,
});

function removeMember() {
    product.decrementChargeQty("membership-charges");
}
```

## `addCoupon(couponCode)`

Adds a [coupon](https://apidocs.chargebee.com/docs/api/coupons) to the product.

### Syntax

```js
product.addCoupon(couponCode)
```

### Parameters

- `coupon` (String) coupon id

### Return value

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

### Example

```js
const product = chargebee.getProduct(element);
product.addCoupon("weekend_off_50");
```

## `removeCoupon(coupon)`

Removes a coupon from the product.

### Syntax

```js
product.removeCoupon(coupon)
```

### Parameters

- `coupon` (String) coupon id

### Return value

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

### Example

```js
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

```js
product.setCustomData(data)
```

### 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

```js
product.setCustomData({
    cf_data1: "test", 
    cf_data2: "test2"
});
```

## `getLayout()`

Gets the current [layout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout#ui-layout-options) of the checkout page.

### Syntax

```js
product.getLayout()
```

### Return value

Returns a string representing the current layout.

### Example

```js
const layout = product.getLayout();
```

## `setLayout(layoutName)`

Sets the [layout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout#ui-layout-options) of the checkout page.

### Syntax

```js
product.setLayout(layoutName)
```

### Parameters

- `layout` (String) Current layout of checkout Allowed: `in_app`, `full_page`.

### Return value

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

### Example

```js
product.setLayout("in_app");
```