Checkout & Self-Serve portal

# Components & Fields

# Overview

Using Chargebee Components & Fields, you can ​​build a PCI-compliant payment collection component without compromising your application’s theme and style.

Supported Gateways

See the list of gateways supported by Hosted Components & Fields and ensure that yours is supported.

# Usage

In case you choose to avoid Chargebee checkout page for better customizations and control, you need to make sure you are PCI Compliant.

Chargebee helps you solve this by providing you with customizable Components and Fields. You can customize the components based on your application’s style and theme without worrying about PCI Compliance.

# Workflow

  • Instead of using your input fields, you will use Chargebee Components to collect card details. Chargebee Components are iframe based input fields.
  • ​​End user will enter card details in Chargebee Components.
  • Before submitting form or making Ajax calls for actions like Creating a Subscription or Updating card details, get a Chargebee token against the details entered.
  • At your server, use this Chargebee token along with the below mentioned APIs, for performing different set of actions,

# Card collection

Card details can be collected in two different ways,

  • Default mode
  • Fields mode

# Default Mode

In Default mode, Number, Expiry and CVV fields will be seen as a single entity.

# Fields Mode

In Fields mode, you can do field level customizations and make sure all fields in your form look similar.

# What are the different customizations possible?

  • You can pass your CSS styles to Chargebee Components and customize font, color, placeholder, etc. Check our API reference for all CSS properties supported.
  • Placeholder text
  • Localization
  • Callback support for different component states like focussed, complete, invalid and empty
  • You can specify which CSS class should be added based on different states, to the container that holds the iframe.

# Support for various front end frameworks

Chargebee Components are built using vanilla JavaScript and can be easily integrated with all front end frameworks. We provide wrappers for Angular, React and Vue frameworks to allow quick integration.

# Container element

You need to have a container element in your HTML to mount Chargebee Components. Our iframes will be inserted inside this container element. You can also add CSS to this container element to style our Components.

# Supported Gateways

The Hosted Components & Fields API can be used with the following gateways:

3DS support is lmited

If you are using 3DS payment flows, then not all the gateways listed below are supported. See Recipes for using 3DS to know what gateways are supported for 3DS flows.

  • Stripe
  • Braintree
  • Authorize.net (direct integration---contact Support to enable this)
  • Adyen (Supports only 3DS flow, does not support non-3DS workflows)
  • Checkout.com
  • Bambora
  • Pin Payments
  • eWay Rapid
  • Worldpay
  • Paypal Payflow Pro
  • Paypal Pro
  • NMI
  • Bluepay
  • Sage pay
  • Orbital
  • Ingenico Payments
  • Paymill
  • Bluesnap
  • Wirecard
  • Moneris
  • Elavon
  • Cybersource
  • Chargebee Test Gateway
  • Razorpay

← FAQ →