Getting Started

Building Blocks

Custom Fields

Subscription Features




Order Management

Billing Features


Payment Methods

Direct Debit Payments

Configuring Gateways

Revenue Recovery

Chargebee Moments


Reports and Analytics

Data Privacy & Security

Fraud Management


Open Source Resources

Other Features

API Integration

Third Party Integrations

Hosted Components & Fields (Chargebee JS) 

As a business owner, you are designing a seamless checkout experience for your customers, improving the ease of making payments and creating a consistent brand outlook. But building might require time, effort and security/compliance worries.

With Chargebee's Hosted Components and Fields, you can build your own checkout pages which fit perfectly in your website, are PCI DSS compliant. You can also customize the user workflow and payment experience for your customers while aligning with your company's branding.

  • Hosted Components & Fields is for merchants who have integrated checkout via API
  • Credit Card payments are only supported
  • Smart Routing should be enabled
  • Chargebee test gateway and Adyen are not supported
  • Bank Account as a payment method is not supported

Feature Overview 

Ease of implementation: With the simple code injection approach , all it takes is a few minutes to set it up and get started.

Customization: Supports a range of customization options such as font, colour, text transformation, locale, etc.

PCI DSS Compliance: Built to be PCI compliant. Saves you time and labour by taking care of the compliance rules.

Gateway integration: Access over 25+ payment gateways.

Multi-language support: Available in 6 different languages - English(default), French, German, Italian, Portuguese and Spanish.



The payment input fields such as Card number, Expiry and CVV can be displayed on your website in the following styles:

Default Mode 

Payment attributes are grouped and displayed as shown below,


Refer to this help documentation  to learn more.

Fields mode 

Payment attributes are displayed separately as shown below,


Refer to this help documentation  to learn more.

Payment Workflow 

  1. When a customer enters the card details and initiates payment, Chargebee takes control of the fields and encrypts the card information.
  2. The card details are sent to the Gateway and generates a Chargebee token.
  3. This token must be passed via APIs:

Libraries and Implementation Reference 

Hosted Components and Fields can be stitched into your checkout flow. You can get up and running in no time.

Refer to our developer docs  to know more.

Libraries supported:

Was this article helpful?