How to implement the drop in script into an image or button in the HTML document?

Scope

How to configure a drop-in-script to a button using HTML?

How to implement a checkout link on an icon?

Summary

Drop-in Script is a plug-in type easy-to-use solution that requires minimal developer help. You can easily create a checkout page by adding a script generated for the plan item on your HTML page. Navigate from Settings > Configure Chargebee > Checkout and Self-serve portal > Integrate Chargebee. Copy the Header script and paste within the Head tag & Copy the Checkout button code and paste it within the Body tag. Now paste the image destination link specified within the Checkout button code**href**attribute replacing the subscribe and you can add alternate text if required.

Solution

1. Please navigate to Settings -> Configure Chargebee -> Checkout and Self-serve portal -> Integrate Chargebee.

2. You would need to paste this header script in your website's HTML document and the Checkout button code in the body i.e. the purchase now button (code) or to any particular image, of the HTML document.

A quick demo video demonstrating the steps

[drive_video embed]

To know more about Chargebee's Drop-in script integration, please refer to this document on Drop-in script.