Integrating via Drop-in Script
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
- Navigate to Settings > Configure Chargebee > Checkout & Portal > Integrate with Chargebee and copy the code
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.
<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:
String, required if custom domain is enabled
Your custom domain
If you want Chargebee to send events to Google Analytics, add this data attribute. Please check this link for more details.
If you want Chargebee to send events to Facebook pixel tracking, add this data attribute. Please check this link for more details.
If this is enabled, Chargebee will send conversion details automatically to refersion.
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.
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.
<!-- 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-->
The generated checkout button code will have the plan id and addon id(s) as data attributes.
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.
Use the code snippet to open self-serve customer portal.
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).