Getting Started

Building Blocks

Subscription Features

Custom Fields

Localization

Invoices

Credits

Order Management

Billing Features

Taxes

Payment Methods

Direct Debit Payments

Configuring Gateways

Revenue Recovery

Checkout

Self-Serve Portal

Notifications

Reports and Analytics

Data Privacy & Security

Fraud Management

Migration

Other Features

Developers

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 own your checkout pages and attach our Components & Fields to perfectly fit your website. This way, you can be less PCI DSS compliant. You can also customize the user workflow and payment experience for your customers while aligning company's branding for the same.

Note
  • 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.

"

Styles 

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 can be passed to the following:

Libraries and Implementation Reference 

Hosted Components and Fields can be easily integrated into your checkout flow using our references below. With that accomplished, you can be up and collecting payments in no time.

Refer to our developer docs  to know more.

Libraries supported:

3DS Card Payments 

Hosted Components and Fields is capable of driving 3DS transactions using Chargebee.js' authorizeWith3ds  function.

Was this article helpful?
Loading…