Integrating via Drop-in Script

Introduction

Using Chargebee.js is the quickest way to start accepting payments. From within Chargebee's web interface you can generate the script needed for integrating both checkout and portal into your website.

All you need to do is to copy and paste it into your website's html page(s) to start accepting payments.

Jump to this page to know more about other integration options

Generating the script

You can grab the scripts from the following screens:

  • Navigate to Product Catalog > Select a Plan > Grab code
    OR
  • Navigate to Settings > Configure Chargebee > Checkout & Portal > Integrate with Chargebee and copy the code

Header script

The generated header script is for including chargebee.js in your HTML page. The script tag should contain your Chargebee site name as a data attribute.

You need to include this script once in the head of html pages where you would like to embed the checkout(/portal) buttons.

Example

<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="mannar-test"></script>

There are other data attributes which can be passed along with the script:

  • data-cb-site
    String, required
    site name
  • data-cb-domain
    String, required if custom domain is enabled
    Your custom domain
    Eg: https://billing.yourdomain.com
  • data-cb-ga-enabled
    Boolean, optional
    If you want Chargebee to send events to Google Analytics, add this data attribute. Please check this link for more details.
  • data-cb-fbq-enabled
    Boolean, optional
    If you want Chargebee to send events to Facebook pixel tracking, add this data attribute. Please check this link for more details.
  • data-cb-refersion-enabled
    Boolean, optional
    If this is enabled, Chargebee will send conversion details automatically to refersion.
  • data-cb-friendbuy-enabled
    Boolean, optional
    If this is enabled, Chargebee will send customer information and order information to friendbuy and will also open friendbuy's post purchase widget based on your integration settings. Please make sure you whitelist your domain in the checkout settings page.
  • data-cb-redirect-mode-enabled
    Boolean
    If this is enabled, end user will be redirected to chargebee checkout and self-serve portal page instead of opening in a modal box. This is needed, if amazon pay is configured as one of your supported payment methods. Please make sure you have configured redirect URL in checkout and self-serve portal, so that the user is able to navigate back to the app.

Example

<!-- For custom domain -->
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="mannar-test" data-cb-domain="https://billing.yoursite.com"></script>

<!-- For tracking analytics -->
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="mannar-test" data-cb-ga-enabled="true"></script> <!-- Make sure you include google analytics script before this script-->
Including the above data attributes is needed only for opening the checkout/portal via drop-in code.

Checkout button

The generated checkout button code will have the plan id and addon id(s) as data attributes.

Example code

<a href="javascript:void(0)"
    data-cb-type="checkout"
    data-cb-plan-id="basic"
    data-cb-plan-quantity="3"
    data-cb-addons_id_0="addon_1"
    data-cb-addons_quantity_0="2">Subscribe</a>

If you are using any SPA frameworks and you are planning to make the button reactive, you can use your own button and our APIs for a cleaner solution. Check this code snippet for more details.

Portal button

Use the code snippet to open self-serve customer portal.

<a href="javascript:void(0)" data-cb-type="portal">
    MANAGE ACCOUNT
</a>

Checkout URL

In case you want to open the checkout in a separate page instead of it opening within your website(/app) use the following format. (Note: Please make sure you have a redirect url configured when you are using this URL).

https://<site-name>.chargebee.com/hosted_pages/plans/<plan-id>