How can customers apply an addon to their subscription when signing up via the checkout pages (V2)?

Problem Statement

This article helps you understand how can customers apply an addon to their subscription when signing up via the checkout pages (v2).

Solution

To allow customers to choose the add-ons at the time of signup, you will need to build a simple form on your end where the add-ons are listed. Your customers can choose the add-ons they want (and specify addon quantity, if applicable) on this form before going to the checkout page.

The addons selected on this page can then be passed as parameters to the plan specific hosted checkout page URL.

Here's the syntax to pass add-ons onto the checkout page URL:

https://acme-test.chargebee.com/hosted_pages/plans/plan_id?addons[id][0]=addon_id&addons[id][1]=addon_id

Now you don't have to manually construct the URLs and instead use a Javascript to do this automatically based on the customer's selection on your form. The demo below serves as an example and the form uses a Javascript to construct the hosted page URL based on the selections made.

https://www.chargebee.com/labs/signup-with-addons-and-quantity.html

If you're using Chargebee's Customer Portal and you want your existing subscribers to add/remove recurring add-ons from their subscriptions, they could simply login to the portal and do it. You can specify what operations can be done through the portal under Settings>>Configure Chargebee>>Checkout & Self-Serve Portal(under Customer-facing essentials section)>>Customer portal.

If you'd like to attach more than one plan to a subscription, you could create a $0 plan and associate multiple recurring quantity-based addons {one for each product}, as we support only plan per subscription only.

Note: Chargebee provides add-ons to help you manage your customer's additional product needs. The additional products can be modeled as a recurring or a non-recurring addon depending on whether it will be a one time purchase or a recurring charge on top of a subscription.

If you're using the V3 checkout pages, check this article.