Chargebee Integration

09.09.2019

Chargebee it is a subscription billing platform.

This manual will walk you through how to implement recurring billing solutions and subscription management from Chargebee on your landing page.

What you will need:

  • Two buttons on your landing page: for subscription and account management.
  • Three additional scripts on your landing page: one copied from your Chargebee account and two copied from this manual, with replaced proper ID values.

You can see an example implementation below:

chargebee_EN1

Step I – on Chargebee side

1. Log into your Chargebee account and go to the Product Catalog tab. Choose the plan which you want to sell; copy its ID (2) (you will need it later) and then click on the Grab code link (3).

image

2. Copy the Header script, which you will use later to paste inside Landingi platform.

image1

Step II – on Landingi platform side

1. Go to the Dashboard of the chosen landing page, navigate to the Javascript Code tab and click Add script. More details about adding your own Javascript you can find here.

In the end, you should have 3 additional scripts, like in the screenshot below.

chargebee_scripts_EN

2. Name the first script (A) – for example ‘chargebee’, paste the entire Header script which you copied before from your Chargebee account and place it on the head position on the main page. Click Save.

ChargebeeJS_EN1

3. To complete the second script, you will need your plan ID (from your Chargebee account) and subscribe button ID from Landingi editor. To get it, go to the editor, choose a button that will initiate the payment, select it and copy its ID from the right menu.

chargebee_EN3

4. Having the plan ID and the subscribe button ID, go back to the Javascript Code tab and click on Add script. 

5. Name your second script (B) – for example, ‘subscribe’, and copy the script below, placing it on the body bottom of your landing page.

Remember to replace YOUR PLAN ID and SUBSCRIBE BUTTON ID with adequate values. Click Save.

<script>
// fill your chargbee plan ID and landingi button ID
var plan = "YOUR PLAN ID"
var button = "SUBSCRIBE BUTTON ID"


document.getElementById(button).setAttribute("href", "javascript:void(0)");
document.getElementById(button).setAttribute("data-cb-type", "checkout");
document.getElementById(button).setAttribute("data-cb-plan-id", plan);
</script>
ChargebeeJS_EN2

6. To complete the third script, you will need your manage account button ID. Come back again to the editor and choose a button to manage subscriptions by your clients; select it and copy its ID.

Chargebee_EN4

7. Having the manage account button ID, go back again to Javascript Code tab and click Add script to add the last script.

8. Name your third script (C) – for example, ‘manage account’ and copy the script below, placing it on the body bottom of your landing page. Remember to replace MANAGE BUTTON ID with adequate value copied before. Click Save.

<script>
// fill landingi button ID
var button = “MANAGE BUTTON ID"


document.getElementById(button).setAttribute("href", "javascript:void(0)");
document.getElementById(button).setAttribute("data-cb-type", "portal");
</script>
ChargebeeJS_EN3

From now on, your clients can buy your product with recurring payments.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.