# Integration for Product Catalog 1.0

# 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.

TIP

Jump to this page to know more about other integration options

# Generating the script

You can copy drop-in scripts from two places within the Chargebee user interface:

  • Click Product Catalog > Select a Plan > Grab code. This provides you the drop-in script for that particular plan. OR
  • Click Settings > Configure Chargebee > Checkout & Portal > Integrate with Chargebee. Select the required plan and addon. Copy the generated code.

# Header script

The generated header script is for including Chargebee.js in your HTML page, this in turn is what enables the drop-in script to work. Replace your Chargebee site name while copying the head script. You only need to include this script once in the head element of your site's HTML pages.

# Example

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

1
2

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="acme-test" data-cb-domain="https://billing.yoursite.com"></script>

<!-- For tracking analytics -->
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="acme-test" data-cb-ga-enabled="true"></script> <!-- Make sure you include google analytics script before this script-->
1
2
3
4
5
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>
1
2
3
4
5
6

TIP

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>
1
2
3

# 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>
1