# Components and Fields
Using Chargebee Components & Fields, you can build a PCI-compliant payment collection component without compromising your application’s theme and style.
See the list of gateways supported by Hosted Components & Fields and ensure that yours is supported.
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.
- 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 (opens new window) for all CSS properties supported.
- Placeholder text
- 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
# Container element
You need to have a container element in your HTML to mount Chargebee Components. Chargebee's 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 limited
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.
# Direct Integration
- Authorize.net(direct integration---contact Support to enable this)
- Adyen (Supports only 3DS flow, does not support non-3DS workflows)
- Ingenico Direct
- Spreedly Global
- Bank of America (Supports only non-3DS workflow)
# Integrations Supported Via Spreedly:
- Eway Rapid
- Ingenico ePayments
- NMI(3DS Beta)
- PayPal Payflow Pro
- PayPal Pro
- Sage Pay