# Integration for Product Catalog 1.0
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 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.
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="acme-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="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-->
# Checkout button
The generated checkout button code will have the plan id and addon id(s) as data attributes.
# Example code
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.
# 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).