Tutorial : Upgrade existing subscription

Say a customer in trial wants to upgrade to a paid plan. You can use Chargebee's checkout for the upgrade. Chargebee's checkout is PCI DSS compliant, hence sensitive card information will not be handled by your servers.

Honey Comics - Demo Application

Honey Comics, a demo application, is a fictitious online comic book store providing subscription service for comics. They send comic books weekly to their subscribers. In order to let the customers try the service, they provide one month free trial. The user can upgrade to a paid plan in the website. Customers will be charged immediately on upgrade. Click here for a demo. The steps below will help you build an app similar to the demo.

TIP

In the sample implementation, to simplify code:

  • You won't be using any database
  • You won't have real login implementation, hence user id will be hard coded

Setup

To upgrade a subscription via API, you need to:

  • Signup/Signin to your Chargebee account
  • Create a new plan with a trial period in your Chargebee TEST site
  • Grab the Chargebee API key of your Chargebee TEST site

Build the upgrade page

Build a page where users can upgrade. When the user clicks on the upgrade button/link, Chargebee checkout will open.

Setup the client library

Download and import the client library of your choice. and configure the client library with your Chargebee TEST site name and API key.

  • ruby
  • nodejs
  • java
  • python
  • php

Endpoint that returns a hosted page object

In the server side, Chargebee's checkout existing subscription API is used to create a hosted page object for upgrading the subscription by passing the trial subscription id.

  • ruby
  • nodejs
  • java
  • python
  • php

Bind checkout opening with the click event

In the client side, a function that returns a Promise object must be created. This promise object can be a result of an ajax call, which is done to the end point which we created in the previous step, and this must resolve to an hosted page object.

  • jquery
  • vue
  • angular
  • react