# Card Components

> **Deprecated**
>
> Card Components is deprecated. It still works and existing integrations are unaffected, but it's no longer the recommended approach. For new integrations, use [Payment Components](https://www.chargebee.com/docs/payments/2.0/payment-components/overview) instead - actively maintained and built to support multiple payment methods. For what changes when you move across, see [Comparison with Card Components and the Payment method helper](https://www.chargebee.com/docs/payments/2.0/payment-components/overview#comparison-with-card-components-and-the-payment-method-helper).

## Overview

This page documents the Card Components API, which allows you to create secure, card input fields integrated with Chargebee. Card components can be integrated with or without 3D Secure (3DS) authentication. The components provide a secure way to collect payment card information directly on your website.

For the conceptual overview, the workflow, and the full gateway list, see [Card Components](https://www.chargebee.com/docs/payments/2.0/card-components-and-helpers/card-components).

## Tutorials

For a step-by-step integration, see the following tutorial:

- [Chargebee.js Card Components integration](https://www.chargebee.com/tutorials/chargebee-js-card-components/)

## Try it out

Card details can be collected in two modes.

### Default mode

In default mode, the number, expiry, and CVV fields appear as a single entity.

### Fields mode

In fields mode, you can customize each field individually so that every field in your form looks the same.

## Prerequisites

1. Ensure that your payment gateway is supported by Card Components. See the [list of supported gateways](https://www.chargebee.com/docs/payments/2.0/card-components-and-helpers/card-components#supported-gateways).
2.  Ensure you have [initialized Chargebee.js](https://www.chargebee.com/docs/js/settingup-api-ref) in your application with a [publishable key](https://www.chargebee.com/docs/billing/2.0/site-configuration/api_keys#publishable-key).

```js
var cbInstance = Chargebee.init({
  site: "YOUR_CHARGEBEE_BILLING_SUBDOMAIN", // Your test site. This is the subdomain of your Chargebee Billing site.
  domain: "https://mybilling.acme.com", // This is your custom domain, if configured in Chargebee. Chargebee-hosted pages will be served from this domain.
  publishableKey: "test__"
})
```

## Load the components module

### `load()` deprecated

Loads the specified Chargebee module. This function must be called before using any card component functionality.

> **Important**
>
> All card component and field functionality can be used only after the `components` module is loaded. If you are using Chargebee wrappers, the module loading is handled automatically. Otherwise, ensure you register components after the promise resolves.

#### Syntax

```js
chargebee.load(moduleName);
```

#### Parameters

**Parameters**

- `moduleName` (String, required) Name of the module to load. Allowed: `components`, `3ds-handler`, `functions`, `ideal`, `sofort`, `google-pay`, `bancontact`, `dotpay`, `paypal`, `netbanking_emandates`, `apple-pay`, `upi`, `payconiq_by_bancontact`, `venmo`, `stablecoin`, `amazon-pay`, `kakao-pay`, `naver-pay`, `revolut-pay`, `alipay`, `wechat-pay`, `cash-app-pay`, `klarna_pay_now`, `boleto`, `direct_debit`.

#### Return value

Returns a promise that resolves after the corresponding module has been loaded.

#### Example

```js
// Load the components module before creating card components.
chargebee.load('components').then(() => {
  console.log('Components module loaded successfully.');
  // Now you can create and mount card components.
  const cardComponent = chargebee.createComponent('card');
  cardComponent.mount('#card-component');
}).catch((error) => {
  console.error('Failed to load components module:', error);
});
```

## Create a card component

### `createComponent()`

Creates a card component based on the specified `componentType` and configuration `options`. 

#### Syntax

```js
chargebee.createComponent(componentType, options)
```

#### Parameters

**Parameters**

- `componentType` (String, required) Allowed: `card`.
- `options` (Object)
  - `currency` (String) Currency code in ISO 4217 format (USD, EUR). By default, base currency code will be used
  - `icon` (Boolean) Card type icon
  - `locale` (String) Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
  - `placeholder` (Object) Placeholder texts for number, cvv & expiry fields.
    - `number` (string) Given text will be applied as a placeholder for card number field.
    - `expiry` (string) Given text will be applied as a placeholder for card expiry field.
    - `cvv` (string) Given text will be applied as a placeholder for CVV field.
    - `ariaLabel` (Object) Labels to be read out by the screen reader for accessibility purpose.
      - `number` (string) For the card number field, text given here is read out by the screen reader for accessibility purpose.
      - `expiry` (string) For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
      - `cvv` (string) For the CVV field, text given here is read out by the screen reader for accessibility purpose.
  - `classes` (Object) Class names that will be added to all container div elements for different states. Using this you can customize our components for different states. If this option is not passed, our default class names "is-focused,is-empty,is-invalid,is-complete" will be added to all placeholder div elements
    - `focus` (String) Pass the class name that will be applied during field focus.
    - `empty` (String) Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
    - `invalid` (String) Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
    - `complete` (String) Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
  - `fonts` (Array<Object | String>) Define the list of font definitions or font URLs
    - (Object) Font definition that will be used in our components Font URL domain names should be allowlisted [here]()
      - `fontFamily` (cssProperty, required) Font name
      - `src` (cssProperty, required) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
      - `fontStyle` (cssProperty)
      - `fontWeight` (cssProperty)
    - (String) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
  - `style` (Object) Inline styles that needs to be applied to all input fields.
    - `base` (Object) Pass the set of css properties that needs to be applied on default state.
      - `color` (cssProperty)
      - `lineHeight` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `showTestCards` (Boolean) Use this flag to show the test cards for sandbox environments while testing payment workflows for card-based payments.

#### Return value

Returns a [Card component object](https://www.chargebee.com/docs/js/component-field-api-ref#card-component-object) that provides methods to manage the card component.

#### Example

**Details**

```js
const cardComponent = chargebee.createComponent("card", {
  placeholder: {
    number: "Number",
    expiry: "Expiry",
    cvv: "CVV",
  },
  classes: {
    focus: 'focus',
    invalid: 'invalid',
    empty: 'empty',
    complete: 'complete',
  },
  style: {
    // override styles for default state
    base: {
      color: '#333',
      fontWeight: '500',
      fontFamily: 'Lato, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':focus': {
        color: '#424770',
      },

      '::placeholder': {
        color: 'transparent',
      },

      ':focus::placeholder': {
        color: '#7b808c',
      },
      ':-webkit-autofill': {
        webkitTextColor: '#333',
      }
    },

    invalid: {
      color: '#e41029',

      ':focus': {
        color: '#e44d5f',
      },
      '::placeholder': {
        color: '#FFCCA5',
      },
    }
  },
  
  fonts: [
    "https://fonts.googleapis.com/css?family=Lato:400,700"
  ]
});
```

### `tokenize()` deprecated

> **Important**
>
> This function is not supported for [Adyen gateway](https://www.chargebee.com/docs/payments/2.0/payment-gateways-and-configuration/adyen).

Sends the card details to the payment gateway for tokenization. The payment gateway configured for the [business entity](https://apidocs.chargebee.com/docs/api/business_entities) specified during [initialization](https://www.chargebee.com/docs/js/settingup-api-ref) is used for tokenization.

> **Tip**
>
> The generated temporary token expires after 30 minutes.

#### Syntax

```js
chargebee.tokenize(component, additionalData);
```

#### Parameters

**Parameters**

- `component` Pass card component object or component type for which you want to get Chargebee token
  - (object) Allowed: `Card component object`.
- `additionalData` Data that is collected at your end.
  - (object) For card component, you can pass additional information like firstName, lastName. Chargebee will generate temporary token for all these details along with the card information collected via our components.
    - `firstName` (string) First name.
    - `lastName` (string) Last name.
    - `addressLine1` (string) Billing address line 1.
    - `addressLine2` (string) Billing address line 2.
    - `city` (string) City.
    - `state` (string) State.
    - `stateCode` (string) State code.
    - `zip` (string) Zip
    - `countryCode` (string) 2 letter country code.

#### Return value

Returns a promise that resolves to a Chargebee nonce (temporary token) object.

#### Example

```js
// Create a card component.
const cardComponent = chargebee.createComponent('card');
cardComponent.mount('#card-component');

// Tokenize the card with additional customer data.
chargebee.tokenize(cardComponent, {
  firstName: 'John',
  lastName: 'Doe',
  addressLine1: '1600 Amphitheatre Parkway',
  addressLine2: 'Building 42',
  city: 'Mountain View',
  state: 'California',
  stateCode: 'CA',
  zip: '94039',
  countryCode: 'US'
}).then((data) => {
  console.log('Chargebee token:', data.token);
  // Use the token to create a payment source or subscription.
}).catch((error) => {
  console.error('Tokenization failed:', error);
  // Handle tokenization error.
});
```

#### Response example

```json
{
  "token": "cb_XAKJhqUVXuhyiJRYgLQSakdkNQad"
}
```

## Card component object

The Card component object provides methods to manage the card component, including tokenization, 3DS authorization, event handling, and field management.

### `tokenize()`

> **Important**
>
> This function is not supported for [Adyen gateway](https://www.chargebee.com/docs/payments/2.0/payment-gateways-and-configuration/adyen).

Sends the card details to the [payment gateway](https://www.chargebee.com/docs/payments/2.0/payment-gateways-and-configuration/gateway_settings) for tokenization. The payment gateway for processing the card details is selected based on [smart routing](https://www.chargebee.com/docs/2.0/gateway_settings.html#smart-routing).

If [multi business entity](https://www.chargebee.com/docs/billing/2.0/multi-business-entity/mbe) is configured, the payment gateway configured for the business entity specified during Chargebee.js initialization [`init()`](https://www.chargebee.com/docs/js/cb-library-api-ref#init) is selected here.

#### Syntax
```js
cardComponent.tokenize(additionalData)
```

#### Parameters

**Parameters**

- `additionalData` (Object) Additional information that you collect as part of card details can be passed. These information will be used while creating a payment source for the customer.
  - `firstName` (string) First name.
  - `lastName` (string) Last name.
  - `addressLine1` (string) Billing address line 1.
  - `addressLine2` (string) Billing address line 2.
  - `city` (string) City.
  - `state` (string) State.
  - `stateCode` (string) 2 letter state code.
  - `zip` (string) Zip
  - `countryCode` (string) 2 letter country code.

#### Return value

Returns a promise that resolves to a Chargebee token object with the following structure:

```json
{
  "token": "<chargebee-token>"
}
```

#### Example

```js
const cardComponent = chargebee.createComponent("card");
cardComponent.mount("#card-component");

cardComponent.tokenize({
  firstName: "John",
  lastName: "Doe",
  addressLine1: "1600 Amphitheatre Parkway",
  addressLine2: "Suite 100",
  city: "Mountain View",
  state: "California",
  stateCode: "CA",
  zip: "94039",
  countryCode: "US",
}).then((data) => {
  console.log('Chargebee token:', data.token);
}).catch((error) => {
  console.error('Tokenization error:', error);
});
```

### `authorizeWith3ds()`

Initiates 3D Secure (3DS) authorization for the card details entered in the card component fields. After successful payment authorization, the payment intent is returned with an `authorized` state. The `paymentIntent` ID can then be used to [create a payment source](https://apidocs.chargebee.com/docs/api/payment_sources/create-using-payment-intent) or [create a subscription](https://apidocs.chargebee.com/docs/api/subscriptions/create-subscription-for-items#payment_intent_id).

This method internally uses the [3DS Helper](https://www.chargebee.com/docs/payments/2.0/card-components-and-helpers/3ds-helper) provided by Chargebee.

> **Use webhooks for production**
>
> Use [webhooks](https://www.chargebee.com/docs/2.0/events_and_webhooks.html) for production use, instead of making the subscription creation request from the frontend, it's more secure and reliable to respond to webhooks from Chargebee on the backend. Listen to the [`payment_intent_updated`](https://apidocs.chargebee.com/docs/api/events#payment_intent_updated) event via webhooks and create the subscription when the [`payment_intent.status`](https://apidocs.chargebee.com/docs/api/payment_intents#payment_intent_status) is authorized.

#### Syntax
```js
cardComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks)
```

#### Parameters

**Parameters**

- `paymentIntent` (Object, required) Pass the payment intent object.
- `additionalData` (Object) Additional information that needs to be passed for improving the chances of frictionless checkout flow.
  - `plan` (String) Plan name
  - `billingAddress` (Object) Card Billing Address
    - `firstName` (String, required if Worldpay gateway is used) First name associated with billing address
    - `lastName` (String) Last name associated with billing address
    - `phone` (String) Phone number associated with the billing address
    - `addressLine1` (String) Billing address line 1 (eg. number, street, etc).
    - `addressLine2` (String) Billing address line 2 (eg. suite, apt #, etc.).
    - `addressLine3` (String) Billing address line 3 (eg. suite, apt #, etc).
    - `city` (String) City or locality name
    - `state` (String) State
    - `stateCode` (String) 2 letter code for US states or equivalent
    - `countryCode` (String) 2 letter country code
    - `zip` (String) Zip code or postal code
  - `customerBillingAddress` (Object) Customer's Billing Address
    - `firstName` (String, required if Worldpay gateway is used) First name associated with billing address
    - `lastName` (String) Last name associated with billing address
    - `phone` (String) Phone number associated with the billing address
    - `addressLine1` (String) Billing address line 1 (eg. number, street, etc).
    - `addressLine2` (String) Billing address line 2 (eg. suite, apt #, etc.).
    - `addressLine3` (String) Billing address line 3 (eg. suite, apt #, etc).
    - `city` (String) City or locality name
    - `state` (String) State
    - `stateCode` (String) 2 letter code for US states or equivalent
    - `countryCode` (String) 2 letter country code
    - `zip` (String) Zip code or postal code
  - `shippingAddress` (Object) Shipping Address
    - `firstName` (String, required if Worldpay gateway is used) First name associated with shipping address
    - `lastName` (String) Last name associated with shipping address
    - `phone` (String) Phone number associated with the shipping address
    - `addressLine1` (String) Shipping address line 1 (eg. number, street, etc).
    - `addressLine2` (String) Shipping address line 2 (eg. suite, apt #, etc.).
    - `addressLine3` (String) Shipping address line 3 (eg. suite, apt #, etc).
    - `city` (String) City or locality name
    - `state` (String) State
    - `stateCode` (String) 2 letter code for US states or equivalent
    - `countryCode` (String) 2 letter country code
    - `zip` (String) Zip code or postal code
  - `email` (String, required if Worldpay gateway is used) Mail ID of the customer.
  - `phone` (String) Phone number
  - `mandate` (Object) Enabling this parameter will request Additional Factor Authentication (AFA) and mandate setup to the gateway. Applicable only for cards issued in India.
    - `requireMandate` (Boolean) Set the value as `true` to create a mandate. The default value is `false`.
    - `description` (String) Send the plan name in this description. This plan name will appear on the AFA page.
  - `document` (Object, required if EBANX or dLocal gateway is used) The document details (e.g., national IDs or passports) used for document verification and payment processing by EBANX and dLocal.
    - `number` (String) The document number.
    - `type` (String) The type of document. Refer to the EBANX table or dLocal table below for the possible values.
- `callbacks` (Object) Callbacks to be used for this operation.
  - `change` (Function) This function will be called during each step of 3DS flow
  - `success` (Function) This function will be called if 3DS Authorization is successful
  - `error` (Function) This function will be called if 3DS Authorization has failed
  - `challenge` (Function) When this callback is implemented, the transaction will proceed in a redirect workflow if supported by the gateway. This callback function will be called with a redirect URL when the 3DS transaction requires a challenge. This workflow is currently supported by Adyen, Braintree and Stripe payment gateways.

#### Return value

Returns a promise that resolves to an authorized payment intent object.

#### Example
```js
const cardComponent = chargebee.createComponent("card");
cardComponent.mount("#card-component");

function onSubmit() {
  createPaymentIntent().then(paymentIntent => {
    const additionalData = {
      billingAddress: {
        firstName: "John",
        lastName: "Doe",
        billingAddr1: "1600 Amphitheatre Parkway",
        billingCity: "Mountain View",
        billingState: "California",
        billingStateCode: "CA",
        billingZip: "94039",
        billingCountry: "United States",
      },
      document: { //Required for EBANX gateway.
        type: 'br_cpf',
        number: '85351346893',
      },
    };
    return cardComponent.authorizeWith3ds(paymentIntent, additionalData)
  }).then((paymentIntent) => {
    console.log('payment intent authorized', paymentIntent.id);
  }).catch((error) => {
    console.log('payment intent refused');
  });
}
```

#### EBANX document verification types

**Details**

When using the [EBANX gateway](https://www.chargebee.com/docs/payments/2.0/payment-gateways-and-configuration/ebanx), you must include the `additionalData.document` parameter for [EBANX document verification](https://docs.ebanx.com/docs/payments/guides/features/doc-check) when calling [`authorizeWith3ds()`](#authorizewith3ds). The following table shows the required values for [`additionalData.document.type`](#authorizewith3ds) for different document types.

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>

Countries

      </TableHead>
      <TableHead>

Document

      </TableHead>
      <TableHead>

Parameter value [`additionalData.document.type`](#authorizewith3ds)

      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

CDI

        </TableCell>
        <TableCell>

`cdi`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

CUIL

        </TableCell>
        <TableCell>

`cuil`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

CUIT

        </TableCell>
        <TableCell>

`cuit`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

DNI

        </TableCell>
        <TableCell>

`dni`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Brazil

        </TableCell>
        <TableCell>

CPF

        </TableCell>
        <TableCell>

`cpf`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Brazil

        </TableCell>
        <TableCell>

CNPJ

        </TableCell>
        <TableCell>

`cnpj`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Chile

        </TableCell>
        <TableCell>

RUT

        </TableCell>
        <TableCell>

`rut`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Colombia

        </TableCell>
        <TableCell>

CC

        </TableCell>
        <TableCell>

`cc`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Colombia

        </TableCell>
        <TableCell>

CE

        </TableCell>
        <TableCell>

`ce`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Colombia

        </TableCell>
        <TableCell>

NIT

        </TableCell>
        <TableCell>

`nit`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Ecuador, Peru

        </TableCell>
        <TableCell>

DOC

        </TableCell>
        <TableCell>

`doc`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Uruguay

        </TableCell>
        <TableCell>

CI

        </TableCell>
        <TableCell>

`ci`

        </TableCell>
      </TableRow>
  </TableBody>
</Table>

#### dLocal document verification types

**Details**

When using the [dLocal gateway](https://www.chargebee.com/docs/payments/2.0/payment-gateways-and-configuration/dlocal-payfurl), you must include the `additionalData.document` parameter for dLocal document verification when calling [`authorizeWith3ds()`](#authorizewith3ds). The following table shows the required values for [`additionalData.document.type`](#authorizewith3ds) for different document types.

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>

Countries

      </TableHead>
      <TableHead>

Document

      </TableHead>
      <TableHead>

Parameter value [`additionalData.document.type`](#authorizewith3ds)

      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

DNI

        </TableCell>
        <TableCell>

`ar_dni`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Argentina

        </TableCell>
        <TableCell>

CUIT

        </TableCell>
        <TableCell>

`ar_cuit`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Brazil

        </TableCell>
        <TableCell>

CPF

        </TableCell>
        <TableCell>

`br_cpf`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Brazil

        </TableCell>
        <TableCell>

CNPJ

        </TableCell>
        <TableCell>

`br_cnpj`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Chile

        </TableCell>
        <TableCell>

CI

        </TableCell>
        <TableCell>

`cl_ci`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Chile

        </TableCell>
        <TableCell>

RUT

        </TableCell>
        <TableCell>

`cl_rut`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Colombia

        </TableCell>
        <TableCell>

CC

        </TableCell>
        <TableCell>

`co_cc`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

India

        </TableCell>
        <TableCell>

PAN

        </TableCell>
        <TableCell>

`in_pan`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Mexico

        </TableCell>
        <TableCell>

CURP

        </TableCell>
        <TableCell>

`mx_curp`

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

Peru

        </TableCell>
        <TableCell>

DNI

        </TableCell>
        <TableCell>

`pe_dni`

        </TableCell>
      </TableRow>
  </TableBody>
</Table>

### `on()`

Attaches event listeners to the card component. In Default mode, you can attach `focus`, `blur`, `ready`, and `change` events.

#### Syntax
```js
cardComponent.on(eventType, callbackFunction)
```

#### Parameters

**Parameters**

- `eventType` (String, required) Allowed: `ready`, `focus`, `blur`, `change`.
- `callbackFunction` (Function, required) Function that will be called when the corresponding event fires. Other than ready event, all callback functions will get the current state as argument, with the following properties, field String Corresponding field type type String Event type for which the callback got triggered complete Boolean This will be true, if the fields are filled completely error Object If the component has any validation errors, the corresponding error message and error code are passed {name, message} cardType String Card number type Example values are: mastercard, visa, amex, etc. empty Boolean If the component is empty

#### Return value

Returns the [card component object](https://www.chargebee.com/docs/js/component-field-api-ref#card-component-object) for method chaining.

#### Example
```js
cardComponent.on('ready', () => {
  console.log("field is ready to collect data");
})
cardComponent.on('focus', () => {
  // Triggered when field is focused
})
cardComponent.on('blur', () => {
  // Triggered when field is blurred
})
cardComponent.on('change', (currentState) => {
  // This event will be triggered whenever the state changes from "empty" -> "complete" -> "valid" / "invalid"
  // The validation errors for this field can be checked here
  console.log(currentState.error);
})
```

### `at()` deprecated

Specifies the container element where the card component will be mounted. This method is only needed when using the card component in Default mode. Accepts either a CSS selector or a DOM Element.

#### Syntax

```js
cardComponent.at(domElement);
```

#### Return value

Returns the [card component object](https://www.chargebee.com/docs/js/component-field-api-ref#card-component-object) for method chaining.

#### Example

```js
cardComponent.at("#card-component");
```

### `mount()`

Inserts the card component into the DOM. The component becomes ready for collecting card details only after this method is called. The container element for mounting must be specified here. This method accepts either a DOM Element or a CSS Selector.

#### Syntax
```js
cardComponent.mount('#card-component');
```

#### Parameters

- `querySelector` (String, required) Query selector for the HTML DOM Element
- `HTMLElement` (Object) HTML Element where the component has to be mounted

#### Return value

Returns a promise that resolves after successfully mounting the card component.

### `focus()`

[Sets keyboard focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the card component. This method is useful when you want to programmatically focus on the card component.

#### Syntax
```js
cardComponent.focus()
```

#### Example

```js
const cardComponent = chargebee.createComponent("card");
cardComponent.mount("#card-component");

function onPageLoad() {
  cardComponent.focus();
}
```

### `blur()`

[Removes keyboard focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur) from the card component. This method is useful when you want to programmatically blur the card component.

#### Syntax
```js
cardComponent.blur();
```

### `clear()`

Clears the contents of card fields.

#### Syntax
```js
cardComponent.clear();
```

### `update()`

Updates the configuration for card fields.

#### Syntax
```js
cardComponent.update(options)
```
#### Parameters

**Parameters**

- `options` (Object)
  - `ariaLabel` (String) Label to be read out by the screen reader for accessibility purpose.
  - `classes` (Object) Class names that will be added to all container div elements for different states. Using this you can customize our components for different states. If this option is not passed, our default class names "is-focused,is-empty,is-invalid,is-complete" will be added to all placeholder div elements
    - `focus` (String) Pass the class name that will be applied during field focus.
    - `empty` (String) Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
    - `invalid` (String) Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
    - `complete` (String) Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
  - `currency` (String) Currency code in ISO 4217 format (USD, EUR). By default, base currency code will be used
  - `fonts` (Array<Object | String>) Define the list of font definitions or font URLs
    - (Object) Font definition that will be used in our components Font URL domain names should be allowlisted [here]()
      - `fontFamily` (cssProperty, required) Font name
      - `src` (cssProperty, required) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
      - `fontStyle` (cssProperty)
      - `fontWeight` (cssProperty)
    - (String) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
  - `icon` (Boolean) Card type icon
  - `locale` (String) Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
  - `placeholder` (String) Placeholder text for the corresponding input field.
  - `style` (Object) Inline styles that needs to be applied to all input fields.
    - `base` (Object) Pass the set of css properties that needs to be applied on default state.
      - `color` (cssProperty)
      - `lineHeight` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon

#### Example
```js
cardComponent.update({
  placeholder: '4111 1111 1111 1111'
})
```

### `validateCardDetails()`
Use this method to validate the entered card details.

#### Syntax
```js
cardComponent.validateCardDetails()
```

#### Return value

Returns a promise that resolves to `true` if card details are valid, and `false` if invalid.

#### Example
```js
cardComponent.validateCardDetails().then(isValid => {
  if(isValid) {
    console.log('Card details are valid')
  } else {
    console.log('Card details are invalid')
  }
})
```

### `getBinData()`

Retrieves the Bank Identification Number (BIN) information of a card number entered in the card fields. BIN data is returned only if the entered card number is valid. To access BIN data, add your domain, where Chargebee.js is integrated, to the [domain allowlist](https://www.chargebee.com/docs/2.0/configure-fullpage.html#domain-allowlist) in Chargebee Billing.

#### Syntax
```js
cardComponent.getBinData()
```

#### Return value

Returns a BIN data object when the card number is valid, or `undefined` otherwise.

```json
{
  "bin": "411111",
  "last4": "1111",
  "brand": "visa"
}
```

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>

Field

      </TableHead>
      <TableHead>

Description

      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
      <TableRow>
        <TableCell>

`bin`

        </TableCell>
        <TableCell>

First six or eight digits of the card number.

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

`last4`

        </TableCell>
        <TableCell>

Last four digits of the card number.

        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>

`brand`

        </TableCell>
        <TableCell>

Detected card network, such as `visa` or `mastercard`.

        </TableCell>
      </TableRow>
  </TableBody>
</Table>

#### Example

```js
const cardComponent = chargebee.createComponent("card");
cardComponent.mount("#card-component");

const binData = cardComponent.getBinData();
if (binData) {
  console.log('BIN:', binData.bin);
  console.log('Last 4 digits:', binData.last4);
  console.log('Card brand:', binData.brand);
}
```

### `get3DSHandler()`

Retrieves the Chargebee.js 3DS payment handler instance. This method can be accessed only after the 3DS payment transaction has been initiated with [`authorizeWith3ds()`](#authorizewith3ds).

#### Syntax
```js
cardComponent.get3DSHandler()
```

#### Return value

Returns a [3DS handler instance](https://www.chargebee.com/docs/js/payment-handler-api-ref#3ds-handler).

#### Example

```js
const cardComponent = chargebee.createComponent("card");
cardComponent.mount("#card-component");

cardComponent.authorizeWith3ds(paymentIntent, {
  callbacks: {
    challenge: (redirect_url) => {
      // Present challenge URL to user in an iframe or popup window
      window.open(redirect_url, "_blank");
    },
  },
}).then((intent) => {
  console.log('Authorization successful');
}).catch((error) => {
  console.error('Authorization failed:', error);
});

function onWindowClose() {
  // Call this method when user closes the popup window or iframe
  const threeDSHandler = cardComponent.get3DSHandler();
  threeDSHandler.cancel();
}
```

### `createField()`

Creates individual card fields (`number`, `cvv`, and `expiry`) for use in Fields mode. This method allows you to display card fields separately instead of as a single component. You can pass `options` to override options passed at the component level.

#### Syntax
```js
cardComponent.createField(fieldType, options)
```

#### Parameters

**Parameters**

- `fieldType` (String, required) Allowed: `number`, `cvv`, `expiry`.
- `options` (Object)
  - `placeholder` (String) Placeholder text for the corresponding input field.
  - `ariaLabel` (String) Label to be read out by the screen reader for accessibility purpose.
  - `icon` (Boolean) Card type icon
  - `style` (Object) Inline styles that needs to be applied to all input fields.
    - `base` (Object) Pass the set of css properties that needs to be applied on default state.
      - `color` (cssProperty)
      - `lineHeight` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
      - `color` (cssProperty)
      - `letterSpacing` (cssProperty)
      - `textAlign` (cssProperty)
      - `textTransform` (cssProperty)
      - `textDecoration` (cssProperty)
      - `textShadow` (cssProperty)
      - `fontFamily` (cssProperty)
      - `fontWeight` (cssProperty)
      - `fontSize` (cssProperty)
      - `fontSmoothing` (cssProperty)
      - `fontStyle` (cssProperty)
      - `fontVariant` (cssProperty)
      - `:focus` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
        - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
      - `::placeholder` (Object)
        - `color` (cssProperty)
        - `fontSize` (cssProperty)
      - `::selection` (Object)
        - `color` (cssProperty)
        - `backgroundColor` (cssProperty)
        - `background` (cssProperty)
      - `:-webkit-autofill` (Object)
        - `color` (cssProperty)
        - `webkitTextColor` (cssProperty)
      - `:focus::placeholder` (Object)
        - `color` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon

#### Return value

Returns a [Card Field object](https://www.chargebee.com/docs/js/component-field-api-ref#card-field-object) that provides methods to manage the individual field.

#### Example
```js
cardComponent.createField("number", {
  placeholder: "4111 1111 1111 1111",
  style: {
    // override styles for default state
    base: {
      color: '#333',
      fontWeight: '500',
      fontFamily: 'Poppins,-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':focus': {
        color: '#424770',
      },

      '::placeholder': {
        color: 'transparent',
      },

      ':focus::placeholder': {
        color: '#7b808c',
      },
    },

    invalid: {
      color: '#e41029',

      ':focus': {
        color: '#e44d5f',
      },
      '::placeholder': {
        color: '#FFCCA5',
      },
    }
  },
});

cardComponent.createField("cvv")
cardComponent.createField("expiry")
```

## Card field object

The Card field object allows you to specify where individual fields should be mounted and add event listeners at the field level. Use the [`createField()`](#createfield) method to create card field objects.

```js
const numberField = cardComponent.createField("number");
const expiryField = cardComponent.createField("expiry");
const cvvField = cardComponent.createField("cvv");
```

### `at()`

Specifies the container element where the card field will be mounted. This method is only needed when using the card component in Fields mode. Accepts either a CSS selector or a DOM Element.

#### Syntax

```js
cardField.at(domElement)
```

#### Parameters

- `querySelector` (String, required) Query selector for the HTML DOM element

#### Return value

Returns the [card field object](https://www.chargebee.com/docs/js/component-field-api-ref#card-field-object) for method chaining.

#### Example
```js
cardField.at("#card-field");
```

### `on()`

Attaches event listeners to the card field. In Fields mode, only `ready` and `change` events can be attached.

#### Syntax
```js
cardField.on(eventType, callbackFunction)
```

#### Parameters

**Parameters**

- `eventType` (String, required) Allowed: `ready`, `focus`, `blur`, `change`.
- `callbackFunction` (Function, required) Function that will be called when the corresponding event fires. Other than ready event, all callback functions will get the current state as argument, with the following properties, field String Corresponding field type type String Event type for which the callback got triggered complete Boolean This will be true, if the fields are filled completely error Object If the component has any validation errors, the corresponding error message and error code are passed {name, message} cardType String Card number type Example values are: mastercard, visa, amex, etc. empty Boolean If the component is empty

#### Return value

Returns the [card field object](https://www.chargebee.com/docs/js/component-field-api-ref#card-field-object) for method chaining.

#### Example

```js
const numberField = cardComponent.createField("number");
numberField.on('ready', () => {
  console.log("Field is ready to collect data.");
});

numberField.on('change', (currentState) => {
  // This event will be triggered whenever the state changes
  // Sample status object for change event on number field with error:
  // {
  //   type: "change", // event type
  //   field: "number", // field type
  //   cardType: "visa",
  //   complete: false,
  //   empty: false,
  //   error: { // Validation error object
  //     name: "CARD_NUMBER_INCOMPLETE",
  //     message: "Invalid card"
  //   }
  // }
  console.log(currentState.error);
});
```
### `update()`

Updates the styling of the field.

#### Syntax
```js
cardField.update(options)
```

#### Parameters

**Parameters**

- `placeholder` (String) Placeholder text for the corresponding input field.
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
- `ariaLabel` (String) Label to be read out by the screen reader for accessibility purpose.

#### Return value

Returns the [card field object](https://www.chargebee.com/docs/js/component-field-api-ref#card-field-object) for method chaining.

#### Example
```js
cardField.update({
  style: {
    base: {
      color: '#fff',
      fontSize: `18px`
    }
  }
});
```

### `focus()`

[Sets keyboard focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the field.

#### Syntax
```js
cardField.focus();
```

### `blur()`

[Removes keyboard focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur) from the field.

#### Syntax
```js
cardField.blur();
```

### `clear()`

Clears the contents of the field.

#### Syntax
```js
cardField.clear();
```

### `mount()`

Mounts the field to the specified DOM element. This method accepts a query selector for the HTML element, or the HTML element itself where the field should be mounted.

#### Syntax
```js
cardField.mount(domElement);
```

#### Parameters

- `querySelector` (String, required) Query selector for the HTML DOM Element
- `HTMLElement` (Object) HTML Element where the component has to be mounted

#### Return value

Returns a promise that resolves once the field is successfully mounted.

#### Example
```js
// Usage 1
cardField.mount("#number-field");

// Usage 2
cardField.at("#number-field").mount();
```

## Validation error object

Whenever a validation error occurs, the error object is passed to the callback function attached to the `change` event. This applies to both card component and card field objects.

- `errorCode` (String) Allowed: `card_number_invalid`, `card_number_incomplete`, `invalid_card`, `card_expiry_past`, `card_expiry_invalid`, `card_expiry_incomplete`, `card_cvv_incomplete`, `card_cvv_invalid`.
- `message` (String) Corresponding error message based on the locale set. If you want to display error message, you can customize based on error codes.

## Chargebee JS wrappers

Chargebee provides framework-specific wrappers for Angular, React, and Vue that simplify the integration of card components and fields. These wrappers offer native directives and components that you can use directly in your applications.

Each wrapper supports two mounting modes:

- **Default mode**: mount the card component on its own. Chargebee renders the card number, expiry, and CVV together in a single iframe, and you can't position them individually.
- **Fields mode**: mount the card component as a parent and place the individual card fields inside it. Each field renders in its own iframe, so you control the layout and style each field separately.

The examples in each framework section below use default mode unless the heading says otherwise.

### Angular

The card component and its fields are available as directives (`cbCardField`, `cbNumberField`, `cbExpiryField`, `cbCvvField`) in the [Angular wrapper](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme).

#### Card component directive

The following attributes can be set on the `cbCardField` directive:

**Parameters**

- `fonts` (Array<Object | String>) Define the list of font definitions or font URLs
  - (Object) Font definition that will be used in our components Font URL domain names should be allowlisted [here]()
    - `fontFamily` (cssProperty, required) Font name
    - `src` (cssProperty, required) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
    - `fontStyle` (cssProperty)
    - `fontWeight` (cssProperty)
  - (String) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
- `classes` (Object) Class names that will be added to all container div elements for different states. Using this you can customize our components for different states. If this option is not passed, our default class names "is-focused,is-empty,is-invalid,is-complete" will be added to all placeholder div elements
  - `focus` (String) Pass the class name that will be applied during field focus.
  - `empty` (String) Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
  - `invalid` (String) Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
  - `complete` (String) Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
- `locale` (String) Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
- `placeholder` (Object) Placeholder texts for number, cvv & expiry fields.
  - `number` (string) Given text will be applied as a placeholder for card number field.
  - `expiry` (string) Given text will be applied as a placeholder for card expiry field.
  - `cvv` (string) Given text will be applied as a placeholder for CVV field.
  - `ariaLabel` (Object) Labels to be read out by the screen reader for accessibility purpose.
    - `number` (string) For the card number field, text given here is read out by the screen reader for accessibility purpose.
    - `expiry` (string) For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
    - `cvv` (string) For the CVV field, text given here is read out by the screen reader for accessibility purpose.

##### Example

```html
...
<div
  cbCardField
  id="card-field"
  [fonts]="fonts"
  [styles]="styles"
  [locale]="locale"
  [classes]="classes"
  [placeholder]="placeholder"
></div>
...
```

```ts
export class AppComponent {
  ...
  styles = {
    // Styles for default field state
    base: {
      color: '#333',
      fontWeight: '500',
      fontFamily: 'Lato, Segoe UI, Helvetica Neue, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',

      ':focus': {
        color: '#424770',
      },

      '::placeholder': {
        color: 'transparent',
      },

      ':focus::placeholder': {
        color: '#7b808c',
      },
    },

    // Styles for invalid field state
    invalid: {
      color: '#e41029',

      ':focus': {
        color: '#e44d5f',
      },
      '::placeholder': {
        color: '#FFCCA5',
      },
    }
  };

  // Custom fonts
  fonts = [
    'https://fonts.googleapis.com/css?family=Lato:400,700'
  ];

  // Custom placeholder
  placeholder = {
    number: '4111 1111 1111 1111',
    expiry: 'MM / YY',
    cvv: 'CVV'
  };

  // Custom classes
  classes = {
    focus: 'focus',
    invalid: 'invalid',
    empty: 'empty',
    complete: 'complete',
  };

  // Locale
  locale = 'en';
...
}
```

##### Attach event listeners

You can attach the following event listeners to the `cbCardField` directive:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```html
<div
  id="card-field"
  cbCardField
  class="fieldset field"
  (ready)="onReady($event)"
  (focus)="onFocus($event)"
  (blur)="onBlur($event)"
  (change)="onChange($event)"
></div>
```

#### Field directives

The following attributes can be set on the field directives (`cbNumberField`, `cbExpiryField`, `cbCvvField`):

**Parameters**

- `placeholder` (String) Placeholder text for the corresponding input field.
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon

##### Attach event listeners

You can attach the following event listeners to the field directives:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```html
<div
  id="card-number"
  cbNumberField
  class="fieldset field"
  (ready)="onReady($event)"
  (focus)="onFocus($event)"
  (blur)="onBlur($event)"
  (change)="onChange($event)"
></div>
```

#### Fields mode example

Place the field directives inside the `cbCardField` directive to render and position each field separately.

```html
<div
  cbCardField
  id="card-field"
  [fonts]="fonts"
  [styles]="styles"
  locale="en"
  [classes]="classes"
  (ready)="onReady($event)"
>
  <div
    id="card-number"
    cbNumberField
    class="field empty"
    placeholder="4111 1111 1111 1111"
    (ready)="setFocus($event)"
    (change)="onChange($event)"
  ></div>
  <div
    id="card-expiry"
    cbExpiryField
    class="field empty"
    placeholder="MM / YY"
    (change)="onChange($event)"
  ></div>
  <div
    id="card-cvv"
    cbCvvField
    class="field empty"
    placeholder="CVV"
    (change)="onChange($event)"
  ></div>
</div>
```

### React

The following components are available in the [React wrapper](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-react#readme): `CardComponent`, `CardNumber`, `CardExpiry`, and `CardCVV`.

#### Card component

The following props can be passed to the `CardComponent`:

**Parameters**

- `fonts` (Array<Object | String>) Define the list of font definitions or font URLs
  - (Object) Font definition that will be used in our components Font URL domain names should be allowlisted [here]()
    - `fontFamily` (cssProperty, required) Font name
    - `src` (cssProperty, required) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
    - `fontStyle` (cssProperty)
    - `fontWeight` (cssProperty)
  - (String) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
- `classes` (Object) Class names that will be added to all container div elements for different states. Using this you can customize our components for different states. If this option is not passed, our default class names "is-focused,is-empty,is-invalid,is-complete" will be added to all placeholder div elements
  - `focus` (String) Pass the class name that will be applied during field focus.
  - `empty` (String) Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
  - `invalid` (String) Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
  - `complete` (String) Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
- `locale` (String) Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
- `placeholder` (Object) Placeholder texts for number, cvv & expiry fields.
  - `number` (string) Given text will be applied as a placeholder for card number field.
  - `expiry` (string) Given text will be applied as a placeholder for card expiry field.
  - `cvv` (string) Given text will be applied as a placeholder for CVV field.
  - `ariaLabel` (Object) Labels to be read out by the screen reader for accessibility purpose.
    - `number` (string) For the card number field, text given here is read out by the screen reader for accessibility purpose.
    - `expiry` (string) For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
    - `cvv` (string) For the CVV field, text given here is read out by the screen reader for accessibility purpose.

##### Example

```jsx
<CardComponent
  className="field"
  ref={this.CardRef}
  icon={false}
  fonts={fonts}
  classes={classes}
  locale={locale}
  styles={styles}
  placeholder={placeholder}
/>
```

##### Attach event listeners

You can attach the following event listeners to the `CardComponent`:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```tsx
<CardComponent
  className="field"
  ref={this.CardRef}
  onReady={this.onReady}
  onFocus={this.onFocus}
  onBlur={this.onBlur}
  onChange={this.onChange}
/>
```

#### Card field components

The following props can be passed to the field components (`CardNumber`, `CardExpiry`, `CardCVV`):

**Parameters**

- `placeholder` (String) Placeholder text for the corresponding input field.
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon

##### Example

```jsx
<CardNumber
  className="field"
  icon={false}
  styles={styles}
  placeholder={"4242 4242 4242 4242"}
/>
```

##### Attach event listeners

You can attach the following event listeners to the card field components:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```jsx
<CardNumber
  className="field"
  onReady={this.onReady}
  onFocus={this.onFocus}
  onBlur={this.onBlur}
  onChange={this.onChange}
/>
```

#### Fields mode example

Nest the field components inside `CardComponent` to render and position each field separately.

```jsx
<CardComponent
  className="field"
  ref={this.CardRef}
  fonts={fonts}
  classes={classes}
  locale={locale}
  styles={styles}
  onReady={this.onReady}
>
  <CardNumber
    className="field empty"
    placeholder="4111 1111 1111 1111"
    onChange={this.onChange}
    onReady={this.onReady}
  />
  <CardExpiry className="field empty" placeholder="MM / YY" onChange={this.onChange} />
  <CardCVV className="field empty" placeholder="CVV" onChange={this.onChange} />
</CardComponent>
```

### Vue

The following components are available in the [Vue wrapper](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-vue#readme): `CardComponent`, `CardNumber`, `CardExpiry`, and `CardCVV`.

#### Card component

The following props can be passed to the `CardComponent`:

**Parameters**

- `fonts` (Array<Object | String>) Define the list of font definitions or font URLs
  - (Object) Font definition that will be used in our components Font URL domain names should be allowlisted [here]()
    - `fontFamily` (cssProperty, required) Font name
    - `src` (cssProperty, required) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
    - `fontStyle` (cssProperty)
    - `fontWeight` (cssProperty)
  - (String) The source URL of the font. Only fonts from Google Fonts and Adobe Fonts are supported.
- `classes` (Object) Class names that will be added to all container div elements for different states. Using this you can customize our components for different states. If this option is not passed, our default class names "is-focused,is-empty,is-invalid,is-complete" will be added to all placeholder div elements
  - `focus` (String) Pass the class name that will be applied during field focus.
  - `empty` (String) Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
  - `invalid` (String) Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
  - `complete` (String) Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
- `locale` (String) Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
- `placeholder` (Object) Placeholder texts for number, cvv & expiry fields.
  - `number` (string) Given text will be applied as a placeholder for card number field.
  - `expiry` (string) Given text will be applied as a placeholder for card expiry field.
  - `cvv` (string) Given text will be applied as a placeholder for CVV field.
  - `ariaLabel` (Object) Labels to be read out by the screen reader for accessibility purpose.
    - `number` (string) For the card number field, text given here is read out by the screen reader for accessibility purpose.
    - `expiry` (string) For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
    - `cvv` (string) For the CVV field, text given here is read out by the screen reader for accessibility purpose.

##### Example

```vue
<card-component
  class="fieldset"
  ref="cardComponent"
  :fonts="fonts"
  :styles="styles"
  :locale="locale"
  :classes="classes"
  :icon="icon"
  :placeholder="placeholder"
></card-component>
```

##### Attach event listeners

You can attach the following event listeners to the `CardComponent`:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```vue
<card-component
  class="fieldset"
  ref="cardComponent"
  @ready="onReady"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
></card-component>
```

#### Card field components

The following props can be passed to the field components (`CardNumber`, `CardExpiry`, `CardCVV`):

**Parameters**

- `placeholder` (String) Placeholder text for the corresponding input field.
- `style` (Object) Inline styles that needs to be applied to all input fields.
  - `base` (Object) Pass the set of css properties that needs to be applied on default state.
    - `color` (cssProperty)
    - `lineHeight` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `empty` (Object) Pass the set of css properties that needs to be applied on empty state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
  - `invalid` (Object) Pass the set of css properties that needs to be applied on invalid state
    - `color` (cssProperty)
    - `letterSpacing` (cssProperty)
    - `textAlign` (cssProperty)
    - `textTransform` (cssProperty)
    - `textDecoration` (cssProperty)
    - `textShadow` (cssProperty)
    - `fontFamily` (cssProperty)
    - `fontWeight` (cssProperty)
    - `fontSize` (cssProperty)
    - `fontSmoothing` (cssProperty)
    - `fontStyle` (cssProperty)
    - `fontVariant` (cssProperty)
    - `:focus` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
      - `iconColor` (cssProperty) Color code passed will be applied to the default card icon
    - `::placeholder` (Object)
      - `color` (cssProperty)
      - `fontSize` (cssProperty)
    - `::selection` (Object)
      - `color` (cssProperty)
      - `backgroundColor` (cssProperty)
      - `background` (cssProperty)
    - `:-webkit-autofill` (Object)
      - `color` (cssProperty)
      - `webkitTextColor` (cssProperty)
    - `:focus::placeholder` (Object)
      - `color` (cssProperty)
    - `iconColor` (cssProperty) Color code passed will be applied to the default card icon

##### Example

```vue
<card-number
  class="fieldset"
  :styles="styles"
  :classes="classes"
  :placeholder="placeholder"
></card-number>
```

##### Attach event listeners

You can attach the following event listeners to the card field components:

- `ready`
- `focus`
- `blur`
- `change`

###### Example

```vue
<card-number
  class="fieldset"
  @ready="onReady"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
></card-number>
```

#### Fields mode example

Nest the field components inside `card-component` to render and position each field separately.

```vue
<card-component
  class="fieldset"
  ref="cardComponent"
  :fonts="fonts"
  :styles="styles"
  :locale="locale"
  :classes="classes"
  @ready="onReady"
  @change="onChange"
>
  <card-number class="field empty" :placeholder="'4111 1111 1111 1111'" @focus="onFocus" />
  <card-expiry class="field empty" :placeholder="'MM / YY'" @focus="onFocus" />
  <card-cvv class="field empty" :placeholder="'CVV'" @focus="onFocus" />
</card-component>
```