New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now
Docschargebee docs
HomeBillingCPQPaymentsRevRecGrowthReveal
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

Agentic AI

  • Chargebee Copilot
  • Catalog Setup Assistant
  • MCP Servers

Developer Resources

  • Developer Resources Overview
  • API Explorer
  • Articles and FAQ

Chargebee Apps

  • Chargebee Apps CLI Developer Guide

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
  • Prepaid credits

Invoices and Credit Notes

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

Taxes

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

E-Invoicing

  • Overview

Hosted Capabilities

  • Overview
  • Hosted Checkout
    • Integration Options
      • Embedded Checkout
    • Features
    • Configuring Checkout
    • Configuring Fields and Labels
    • Checkout Layout - Feature Comparison
    • FAQ
  • Hosted Self-Serve Portal
  • Hosted Pages Features
  • Additional Hosted Pages
  • Payment Components
  • Pricing Table
  • Mobile SDKs and Wrappers
  • 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 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
  • E-Invoicing
  • 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
  3. Hosted Capabilities
  5. Hosted Checkout
  7. Integration Options
  8. Embedded Checkout
  1. Billing
  3. Hosted Capabilities
  5. Hosted Checkout
  7. Integration Options
  8. Embedded Checkout

Embedded Checkout

Chargebee offers multiple options to integrate its hosted checkout, such as Drop-In Script, Hosted Pages API, or Payment Link. These integration options allow you to use the checkout in your web application either as a standalone page or as an overlay. The embedded checkout feature embeds the Chargebee hosted checkout within your web pages as an iframe that Chargebee.js creates and manages. Embedded checkout provides a better integration experience compared to relying on a standalone page setup.

Note

Embedded checkout is only supported with the full-page layout.

Prerequisite

Ensure you enable and configure full-page layout in your Chargebee site. Configure your checkout settings, styling, and customization to suit your brand.

Choose a checkout integration

Before you embed the full-page checkout, decide how you want to integrate the checkout option that will display on your web page. Based on the customer's use case, choose one of the following options:

  • Via Drop-In Script: Generate and copy the Drop-In Script from the Chargebee app and add the script to your HTML webpage. This takes care of creating a cart and the associated checkout flow. Learn more about Drop-In Script integration.
  • Via payment link: Use the Integrate with Chargebee wizard to generate reusable payment links from the Chargebee app. Learn more about payment link integration.
  • Via Hosted Pages API: Deploy a cloud solution that uses an API endpoint to make server-to-server API calls to Chargebee, obtain the hosted page, and pass the hosted page URL to the web app via APIs. This mode of integration gives you control to override the predefined configuration for a particular checkout session. Learn more about Hosted Pages API integration.

Embed checkout with Chargebee.js

For an end-to-end implementation using a cart, Hosted Pages API URL, or payment link, see Embed Chargebee Checkout in your website. The tutorial shows how to create and mount checkout, resize its container, handle callbacks, and control redirection after a successful checkout.

For the complete callback API, see setCheckoutCallbacks in the Chargebee.js Reference.

Articles & FAQs

Setting up Fixed increments on Checkout page.

Was this article helpful?