> ## Documentation Index
> Fetch the complete documentation index at: https://developer.transactbridge.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

Use the Card Component to collect card information from the customer.

There are four card components as listed below:

### cardNumber

A component to accept card number.

```js theme={null}
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});
```

Returned Value

**cardNumber `Card Number Object`**

```js theme={null}
{
  element: "tb_cardNumber",
  value: {
    brand: null,
    cvvLength: 3
  },
  isValid: false,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/cardNumber"
}
```

| Field         | Type     |
| ------------- | -------- |
| **brand**     | `string` |
| **cvvLength** | `string` |

**Code Snippet for cardNumer component**

```js theme={null}
const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardComp = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle: frameStyle,
  icon: iconConfig,
  fonts,
});
cardComp.mount(`#cardNumber${type.toUpperCase()}`);

cardComp.on("change", (data) => console.log("cardNumber", data));
```

### cardHolder

A component to accept card holder’s name. You can pass values to a component using options cashfree.create(‘componentName’, options).

```js theme={null}
const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});
```

**Returned Value**

cardHolder `Card Holder Object`

```js theme={null}
{
  element: "tb_cardHolder",
  value: {
    cardHolder: "Test User"
  },
  isValid: true,
  error: null
}

```

| Field          | Type     |
| -------------- | -------- |
| **cardHolder** | `string` |

**Code Snippet for cardHolder component**

```js theme={null}
const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardHolderComp = TBDropin.create("tb_cardHolder", {
  placeholder: "Enter Card Holder Name",
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardHolderComp.mount(`#cardHolder${type.toUpperCase()}`);

cardHolderComp.on("change", (data) => console.log("cardHolder", data));
```

### cardExp

A component to accept card expiry. This component does not accept any parameters.

```js theme={null}
const cardExp = TBDropin.create("tb_cardExp");
```

**Returned Value**

cardExp `Card Expirey Object`

```js theme={null}
{
  element: "tb_cardExp",
  value: {
    cardExp: ""
  },
  isValid: false,
  error: {
    message: "INCOMPLETE_EXP",
    code: "INCOMPLETE_EXP"
  },
  componentUrl: "https://dropin.transactbridge.com/cardExp"
}
```

| Field       | Type     |
| ----------- | -------- |
| **cardExp** | `string` |

**Code Snippet for cardHolder component**

```js theme={null}
const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardCvvComp = TBDropin.create("tb_cardCvv", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardCvvComp.mount(`#cardCvv${type.toUpperCase()}`);

cardCvvComp.on("change", (data) => console.log("cardCvv", data));
```

### cardCvv

A component to accept card expiry. This component does not accept any parameters.

```js theme={null}
const cardCvv = TBDropin.create("tb_cardCvv");
```

**Returned Value**

cardCvv `Card CVV Object`

```js theme={null}
{
  element: "tb_cardCvv",
  value: {
    cardCvv: ""
  },
  isValid: false,
  error: {
    message: "INVALID_CVV_LENGTH",
    code: "INVALID_CVV_LENGTH"
  },
  componentUrl: "https://dropin.transactbridge.com/cardCvv"
}
```

| Field       | Type     |
| ----------- | -------- |
| **cardCvv** | `string` |

**Code Snippet for cardHolder component**

```js theme={null}
const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardExpComp = TBDropin.create("tb_cardExp", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardExpComp.mount(`#cardExp${type.toUpperCase()}`);

cardExpComp.on("change", (data) => console.log("cardExp", data));
```

**Next Steps**

* **A Customize component styles**
* **Add multiple payment methods using tabs**
* **Handle payment confirmation on backend**
* **Set up webhooks for payment status**

**Need Help?**

Explore the following sections for more details:

* <a href="/checkout.js/web-sdk/dropin/overview">**Dropin Overview**</a>
* <a href="/checkout.js/web-sdk/dropin/quickstart">**Quickstart**</a>
* <a href="/checkout.js/web-sdk/dropin/customize-your-sdk">**Customization**</a>

  If you need assistance, our support team is here to help 🚀