New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now
Docschargebee docs
HomeBillingPaymentsRevRecGrowthReveal
Support

Product Updates


  • Release Notes

Getting Started


  • Overview
  • Chargebee Billing Data Centers
  • Object Relationship Model
  • Understanding Sites
  • Chargebee Tech Glossary
  • Articles and FAQ

Implementing Chargebee


  • Implementation Guide
  • Go-live Checklist
  • Articles and FAQ

AI in Chargebee


  • Chargebee Copilot
  • Chargebee Model Context Protocol (MCP) Server

Developer Resources


  • Developer Resources Overview
  • Articles and FAQ

Product Catalog


  • Product Catalog Overview
  • Coupons
  • Articles and FAQ

Subscriptions


  • Working with Subscriptions
  • Billing
  • Orders
  • Articles and FAQ

Customers


  • Managing Customers
  • Account Hierarchy
  • Email Notifications
  • Branding
  • Configure Multiple Languages
  • Articles and FAQ

Entitlements


  • Entitlements Overview
  • Features Overview
  • Feature Management
  • Managing Product Entitlements
  • Subscription Entitlements
  • Customer Entitlements
  • Grandfathering Entitlements
  • Articles and FAQ

Usage Based Billing


  • Understanding Usages
  • Setting up Usage Based Billing
  • Usage Alerts
  • Metered Billing
  • Articles and FAQ

Chargebee CPQ


  • Chargebee CPQ
  • Chargebee CPQ for Salesforce
  • Chargebee CPQ for HubSpot

Invoices, Credit Notes, and Quotes


  • Invoices
  • Credit Notes
  • Quotes [Legacy]
  • Transactions
  • Articles and FAQ

Taxes


  • Overview
  • Configuring Taxes
  • Country-specific Taxes
  • Articles and FAQ

Hosted Capabilities


  • Overview
  • Hosted Checkout
  • Hosted Self-Serve Portal
  • Hosted Pages Features
  • Additional Hosted Pages
  • Payment Components
  • Pricing Table
  • Managing Payments with Chargebee.js
  • Mobile-Optimized Hosted Pages
  • Articles and FAQ

Site Configuration


  • Users & Roles
  • Custom Fields & Metadata
  • Approvals
  • Mandatory Fields
  • File Attachments & Comments
  • Advanced Filter Options
  • Multicurrency Pricing
  • Multi-decimal Support
  • Configuring Reason Codes
  • Events and Webhooks
  • API Keys
  • Time Zone
  • Time Machine
  • Transfer Configurations
  • Articles and FAQ

Multi Business Entity


  • Multi Business Entity Overview
  • Customer Transfer Overview
  • Articles and FAQ

Mobile Subscriptions


  • Overview
  • Omnichannel Subscriptions
  • Omnichannel One-Time Orders
  • Mobile Subscriptions (Legacy)

Reports and Analytics


  • RevenueStory
  • Home Dashboard
  • Frequently Asked Questions
  • FAQs for Classic Reports Sunset
  • Articles and FAQ

Integrations


  • Sales
  • Customer Support and Success
  • Finance
  • Tax
  • eInvoicing
  • Marketing
  • Stitch
  • Collaboration
  • Contract Management
  • Ecommerce Management
  • Articles and FAQ

Data Privacy & Security


  • Two Factor Authentication
  • SAML Single Sign-On
  • System for Cross-Domain Identity Management (SCIM)
  • EU-GDPR
  • Consent Management
  • Personal Data Management
  • Compliance Certificates
  • HIPAA Guidelines
  • PCI Recommendations and Integration Types
  • Articles and FAQ

Data Operations


  • Bulk Operations
  • Migration
  • Articles and FAQ
  1. Billing
  2. Hosted Capabilities
  3. Articles and FAQ
  4. Checkout
  1. Billing
  2. Hosted Capabilities
  3. Articles and FAQ
  4. Checkout

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

Problem Statement

This article helps you understand add drop-in script to images or buttons..

Scope

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

How to implement a checkout link on an icon?

Summary

The drop-in script is an easy-to-use, plug-in solution that requires minimal developer involvement. To create a Checkout page, add the script generated for your plan item to your HTML page. Go to Settings > Configure Chargebee > Checkout and Self-serve portal > Integrate Chargebee. Copy the Header script and paste it into the <head> section of your HTML. Then, copy the Checkout button code and paste it into the <body> section. To use an image as a checkout link, update the href attribute in the Checkout button code with your image's destination link, and add alternate text if needed.

Solution

  1. Navigate to Settings -> Configure Chargebee -> Checkout and Self-serve portal -> Integrate Chargebee.
image
  1. 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.
image

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

Was this article helpful?