Frontend Capabilities

# Card Components

Use Payment Components

The Payment Components solution offers enhanced features and an improved user experience compared to the Card Component. We encourage you to use Payment Components to take full advantage of these improvements.

# Overview

Using Chargebee Card Components, 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 Card Components and ensure that yours is supported.

# Usage

If you are building your own checkout, you need a secure payment collection flow (which is PCI compliant) for a successful payment and in-turn checkout completion.

Chargebee helps you solve this by providing you with customizable Card Components. 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 Card Components to collect card details. Chargebee Card 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
  • 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. 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)
  • Bluesnap
  • Braintree
  • Checkout.com
  • Cybersource
  • Ingenico Direct
  • Mollie
  • Razorpay
  • Spreedly
  • Spreedly Global
  • Stripe
  • Worldpay
  • Bank of America (Supports only non-3DS workflow)

# Integrations Supported Via Spreedly:

  • Authorize.net
  • Bambora
  • Bluepay
  • Bluesnap
  • Cybersource
  • Elavon
  • Eway Rapid
  • Ingenico ePayments
  • Moneris
  • NMI(3DS Beta)
  • Orbital
  • Paymill
  • PayPal Payflow Pro
  • PayPal Pro
  • PIN
  • Sage Pay

← FAQ →