Frontend Capabilities

# Product Object

Product object represents the primary plan/ item to be used in checkout. Using product object, the plan quantity can be changed, addons and coupons can also be added.

Retrieve the product object from an drop-in script element using getProduct function or create a product programmatically using initializeProduct function.

# setPlanQuantity

Use this function to set a plan quantity.

# Syntax

product.setPlanQuantity(planQuantity);
1

# Parameters

quantity
Number
Quantity of the plan, if applicable

# Return value

Product object.

# Example

const product = cbInstance.initializeProduct("premium_plan")
product.setPlanQuantity(10);
1
2

# setPlanQuantityInDecimal

Use this to set a decimal value for plan quantity.

# Syntax

product.setPlanQuantityInDecimal(decimalQty);
1

# Parameters

decimalQuantity
String
Decimal quantity of the plan, if applicable

# Return value

Product object

# Example

const product = cbInstance.initializeProduct("high_speed")
product.setPlanQuantityInDecimal("15.737");
1
2

# incrementPlanQuantity

Use this to increment plan quantity by 1.

# Syntax

product.incrementPlanQuantity();
1

# Return value

Product object

# Example

var product = cbInstance.initializeProduct("premium_plan");
product.setPlanQuantity(10);

function onIncreaseQuantity() {
    product.incrementPlanQuantity()
}
1
2
3
4
5
6

# decrementPlanQuantity

Use this to decrement plan quantity by 1.

# Syntax

product.decrementPlanQuantity();
1

# Return value

Product object

# Example

var product = cbInstance.initializeProduct("premium_plan");
product.setPlanQuantity(10);

function onDecreasePlanQuantity() {
    product.decrementPlanQuantity()
}
1
2
3
4
5
6

# addAddon

Use this method to add an Addon. Either an addon ID string can be passed, or an addon object with addon ID and quantity can be passed as argument.

# 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

Product object

# Example

product.addAddon({ 
    id: "silver-pass-USD-monthly",  // Addon price point ID
    quantity: 2 
})
product.addAddon("silver-freebies-1")
1
2
3
4
5

# removeAddon

Use this method to remove an Addon. Either addon object with id or addonId string can be passed as argument

# 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

Product object

# Example

product.removeAddon({id: "Medication-reminders-USD-Monthly"});
product.removeAddon("Medication-reminders-USD-Monthly");
1
2

# setAddons

Use this function to set a list of 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

Product object

# Example

const product = cbInstance.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

Use this function to increment addon quantity by 1.

# Syntax

product.incrementAddonQty(addonId);
1

# Parameters

addonId
String
addon id

# Return value

Product object

# Example

const product = cbInstance.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

Use this function to decrement addon quantity by 1.

# Syntax

product.decrementAddonQty(addonId);
1

# Parameters

addonId
String
addon id

# Return value

Product object

# Example

const product = cbInstance.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

# addCoupon

Use this function to add a coupon.

# Syntax

product.addCoupon(couponCode);
1

# Parameters

coupon
String
coupon id

# Return value

Product object

# Example

const product = cbInstance.getProduct(element);
product.addCoupon("weekend_off_50")
1
2

# removeCoupon

Use this function to remove a coupon attached to the product.

# Syntax

product.removeCoupon(coupon);
1

# Parameters

coupon
String
coupon id

# Return value

Product object

# setCustomData

You can set subscription level custom fields with this method. 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

Product object

# Example

product.setCustomData({
    cf_data1: "test", 
    cf_data2: "test2"
});
1
2
3
4

# getLayout

Get the current layout of checkout page.

# Syntax

product.getLayout()
1

# Return value

String

# Example

const layout = product.getLayout()
1

# setLayout

Use this method set the current layout of checkout.

# Syntax

product.setLayout(layoutName)
1

# Parameters

layout
String
Current layout of checkout
Allowed Values:
in_app
full_page

# Example

product.setLayout("in_app")
1

# setCharges

Use this method to set list of charge items.

# 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

Product object

# Example

product.setCharges([
    {
        id: "installation-charge",
        quantity: 1,
    },
    {
        id: "service-charge",
        quantity: 1
    }
])
1
2
3
4
5
6
7
8
9
10

# addCharge

Use this method to add a charge item.

# 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

Product object

# Example

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

# removeCharge

Use this method to remove a charge.

# Syntax

product.removeCharge(chargeId);
1

# Parameters

chargeItemId
String
ID of the charge item

# Return value

Product object

# Example

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

# incrementChargeQty

Use this to increment charge quantity by 1.

# Syntax

product.incrementChargeQty(chargeId);
1

# Parameters

chargeItemId
String
ID of the charge item

# Return value

Product object

# Example

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

function addMember() {
    product.incrementChargeQty("membership-charges")
}
1
2
3
4
5
6
7
8

# decrementChargeQty

Use this to decrement charge quantity by 1.

# Syntax

product.decrementChargeQty(chargeId);
1

# Parameters

chargeItemId
String
ID of the charge item

# Return value

Product object

# Example

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

function removeMember() {
    product.decrementChargeQty("membership-charges")
}
1
2
3
4
5
6
7
8

← Card Components →