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

# Components

> Reference every component shipped with Cashfree.js, the initial state options accepted by each one, and which components are payable on a custom checkout.

Cashfree provides the following list of components along with the initial state that can be passed in `options.values`. Certain components are payable and might need other components to be mounted to be ready for payment

<Note>
  A component can only be mounted after `cashfree.js` has been initialized and
  DOM container is ready for mounting the component.
</Note>

## Card components

There are four card components as listed below:

### cardNumber

A component to accept card number

<h4>Parameters</h4>

<ResponseField name="cardNumber" type="Card Number Object">
  <Expandable title="properties">
    <ParamField body="placeholder" type="string" optional>
      placeholder for your card number field
    </ParamField>

    <ParamField body="hideBrandIcon" type="boolean" default="false" optional>
      hide brand icons, default is `false`
    </ParamField>
  </Expandable>
</ResponseField>

<h4>Returned Value</h4>
You can get the value of a component by calling `component.data().value`. All returned
values of `component.data()` can be found in the [components reference](/payments/online/element/components)

<ResponseField name="cardNumber" type="Card Number Object">
  <Expandable title="properties">
    <ResponseField name="brand" type="string">
      contains the brand of the card visa, amex, mastercard, rupay
    </ResponseField>

    <ResponseField name="cvvLength" type="string">
      contains the cvv length for the given brand eg 4 for amex
    </ResponseField>
  </Expandable>
</ResponseField>

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let card = cashfree.create("cardNumber", {
	values: {
		placeholder: "Enter card number",
	},
});
card.on("loaderror", function (data) {
	console.log(data.error);
});
card.mount("#mount-here");
card.on("ready", function (d) {
	console.log(card.data().value); //{brand: 'visa', cvvLength: 3}
	//or
	//console.log(d.value)
});
```

### cardHolder

A component to accept card holder's name

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">input</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">false</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                             | description                            |
| --------------------------------------------------------------- | -------------------------------------- |
| placeholder `string` <span class="v3jsoptional">OPTIONAL</span> | placeholder for your card number field |
| cardHolder `string` <span class="v3jsoptional">OPTIONAL</span>  | name of your customer                  |

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key                 | description           |
| ------------------- | --------------------- |
| cardHolder `string` | name of your customer |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardHolder = cashfree.create("cardHolder", {
	values: {
		cardHolder: "Jane Doe",
	},
});
cardHolder.on("loaderror", function (data) {
	console.log(data.error);
});
cardHolder.mount("#mount-here");
cardHolder.on("ready", function (d) {
	console.log(cardHolder.data().value); //{cardHolder: 'Jane Doe'}
	//or
	//console.log(d.value);
});
```

### cardExpiry

A component to accept card expiry

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">input</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">false</span>
</span>

<div class="cfgap" />

##### Accepted `values`

Does not accept anything

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key                 | description                 |
| ------------------- | --------------------------- |
| cardExpiry `string` | card expiry in MM/YY format |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardExpiry = cashfree.create("cardExpiry", {
	values: {
		//does not accept any value
	},
});
cardExpiry.on("loaderror", function (data) {
	console.log(data.error);
});
cardExpiry.mount("#mount-here");
cardCvv.on("ready", function (d) {
	console.log(cardCvv.data().value); //{cardExpiry: '12/26'}
	//or
	//console.log(d.value)
});
```

### cardCvv

A component to accept card cvv/cvc

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">input</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">false</span>
</span>

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key              | description |
| ---------------- | ----------- |
| cardCvv `number` | card cvv    |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardCvv = cashfree.create("cardCvv", {});
cardCvv.on("loaderror", function (data) {
	console.log(data.error);
});
cardCvv.mount("#mount-here");
cardCvv.on("ready", function (d) {
	console.log(cardCvv.data().value); //{cardCvv: '123'}
	//or
	//console.log(d.value)
});
```

## UPI components

List of UPI components

### upiCollect

A component to accept user's vpa/upi id

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">input</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                             | description                     |
| --------------------------------------------------------------- | ------------------------------- |
| placeholder `string` <span class="v3jsoptional">OPTIONAL</span> | placeholder for enter vpa field |
| upiId `string` <span class="v3jsoptional">OPTIONAL</span>       | vpa/ upi id of the customer     |

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key            | description                 |
| -------------- | --------------------------- |
| upiId `string` | vpa/ upi id of the customer |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiCollect = cashfree.create("upiCollect", {
	values: {
		upiId: "janedoe1@okbankname",
	},
});
upiCollect.on("loaderror", function (data) {
	console.log(data.error);
});
upiCollect.mount("#mount-here");
upiCollect.on("ready", function (d) {
	console.log(upiCollect.data().value); //{upiId: 'janedoe1@okbankname'}
	//or
	//console.log(d.value)
});
```

### upiApp

A component to initiate UPI app/intent payment. Only works in mobile phones. If you mount it on desktop it will throw an error in `loaderror`

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">button</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<Warning>
  Mobile only. Component will not mount on custom webview/inappbrowser Android. It
  will however mount in popular apps like Facebook, Instagram, Twitter. For iPhone
  it will always mount.
</Warning>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                            | description                                    |
| -------------------------------------------------------------- | ---------------------------------------------- |
| upiApp `string` <span class="v3jsrequired">Required</span>     | name of the upi app                            |
| buttonText `string` <span class="v3jsoptional">OPTIONAL</span> | Text for button, ex Google Pay for upiApp gpay |
| buttonIcon `bool` <span class="v3jsoptional">OPTIONAL</span>   | whether to show app icon or not                |

View [available options for `upiApp` in the appendix](/payments/online/element/appendix#upi-app-list)

<Info>
  In case `buttonText` is not provided the value of `buttonIcon` would be
  replaced to `true`. This has been done so that your customer always sees icon
  of the app.
</Info>

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key    | description         |
| ------ | ------------------- |
| upiApp | name of the upi app |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiApp = cashfree.create("upiApp", {
	values: {
		upiApp: "gpay",
		buttonText: "GPAY",
		buttonIcon: true,
	},
});
upiApp.on("loaderror", function (data) {
	console.log(data.error);
});
upiApp.mount("#mount-here");
upiApp.on("ready", function (d) {
	console.log(upiApp.data().value); //{upiApp: 'gpay'}
	//or
	//console.log(d.value)
});
```

##### [Example](/payments/online/element/examples#upi-intent)

### upiQr

A component to show a UPI qr code

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">image</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                      | description                     |
| -------------------------------------------------------- | ------------------------------- |
| size `string` <span class="v3jsrequired">required</span> | size of the qr code. ex "220px" |

<div class="cfgap" />

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key           | description                     |
| ------------- | ------------------------------- |
| size `string` | size of the qr code. ex "220px" |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiQr = cashfree.create("upiQr", {
	values: {
		size: "220px",
	},
});
upiQr.on("loaderror", function (data) {
	console.log(data.error);
});
upiQr.mount("#mount-here");
upiQr.on("ready", function (d) {
	console.log(upiQr.data().value); //{size: '220px'}
	//or
	//console.log(d.value)
});
```

***

## Wallet components

Wallet has only one component

### wallet

A component to initiate wallet payment.

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">button</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                            | description                                                                                                                           |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| provider `string` <span class="v3jsrequired">Required</span>   | name of the wallet. ex `phonepe`. See [all wallet provider names in the appendix](/payments/online/element/appendix#wallet-providers) |
| buttonText `string` <span class="v3jsoptional">OPTIONAL</span> | Text for button, ex Google Pay for upiApp gpay                                                                                        |
| buttonIcon `bool` <span class="v3jsoptional">OPTIONAL</span>   | whether to show app icon or not                                                                                                       |
| phone `string` <span class="v3jsrequired">Required</span>      | 10 digit phone number of your customer                                                                                                |

<Warning>
  In case `buttonText` is not provided the value of `buttonIcon` would be
  replaced to `true`. This has been done so that your customer always sees icon
  of the app.
</Warning>

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key               | description                                                                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| provider `string` | name of the wallet. ex `phonepe`. See [all wallet provider names in the appendix](/payments/online/element/appendix#wallet-providers) |
| phone `string`    | 10 digit phone number of your customer                                                                                                |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let wallet = cashfree.create("wallet", {
	values: {
		provider: "phonepe",
		phone: "94140905",
		buttonText: "PhonePe",
		buttonIcon: true,
	},
});
wallet.on("loaderror", function (data) {
	console.log(data.error);
});
wallet.mount("#mount-here");
wallet.on("ready", function (d) {
	console.log(wallet.data().value); //{provide: 'phonepe', phone: '94140905'}
	//or
	//console.log(d.value)
});
```

All possible values of `provider` can be found in the [wallet providers appendix](/payments/online/element/appendix#wallet-providers)

***

## Netbanking components

Netbanking has only one component

### netbanking

A component to initiate Net Banking payment.

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">button</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                                    | description                                                                                         |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| netbankingBankName `string` <span class="v3jsrequired">Required</span> | name of the bank. ex HDFCR. See [list](/payments/online/element/appendix#netbanking-code-and-names) |
| buttonText `string` <span class="v3jsoptional">OPTIONAL</span>         | Text for button, ex Google Pay for upiApp gpay                                                      |
| buttonIcon `bool` <span class="v3jsoptional">OPTIONAL</span>           | whether to show app icon or not                                                                     |

<Note>
  In case `buttonText` is not provided the value of `buttonIcon` would be
  replaced to `true`. This has been done so that your customer always sees icon
  of the app.
</Note>

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key                         | description      |
| --------------------------- | ---------------- |
| netbankingBankName `string` | name of the bank |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let netbanking = cashfree.create("netbanking", {
	values: {
		netbankingBankName: "HDFCR",
		buttonText: "HDFC Bank",
		buttonIcon: true,
	},
});
netbanking.on("loaderror", function (data) {
	console.log(data.error);
});
netbanking.mount("#mount-here");
netbanking.on("ready", function (d) {
	console.log(netbanking.data().value); //{netbankingBankName: 'HDFCR'}
	//or
	//console.log(d.value)
});
```

All possible values of `netbankingBankName` can be found in the [netbanking codes and names appendix](/payments/online/element/appendix#netbanking-code-and-names)

***

## Paylater components

Paylater has only one component

### paylater

A component to initiate paylater payment.

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">button</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                            | description                                                                                                                              |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| provider `string` <span class="v3jsrequired">Required</span>   | name of the wallet. ex `simpl`. See [all pay later provider names in the appendix](/payments/online/element/appendix#paylater-providers) |
| buttonText `string` <span class="v3jsoptional">OPTIONAL</span> | Text for button, ex Simpl                                                                                                                |
| buttonIcon `bool` <span class="v3jsoptional">OPTIONAL</span>   | whether to show app icon or not                                                                                                          |
| phone `string` <span class="v3jsrequired">Required</span>      | 10 digit phone number of your customer                                                                                                   |

<Note>
  In case `buttonText` is not provided the value of `buttonIcon` would be
  replaced to `true`. This has been done so that your customer always sees icon
  of the app.
</Note>

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key               | description                                                                                                                                |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| provider `string` | name of the provider. ex `simpl`. See [all pay later provider names in the appendix](/payments/online/element/appendix#paylater-providers) |
| phone `string`    | 10 digit phone number of your customer                                                                                                     |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let p = cashfree.create("paylater", {
	values: {
		provider: "simpl",
		phone: "94140905",
		buttonText: "Use Simpl",
		buttonIcon: true,
	},
});
p.on("loaderror", function (data) {
	console.log(data.error);
});
p.mount("#mount-here");
p.on("ready", function (d) {
	console.log(d.value);
});
```

All possible values of `provider` can be found in the [pay later providers appendix](/payments/online/element/appendix#paylater-providers)

***

***

## Cardless EMI components

Paylater has only one component

### cardlessEMI

A component to initiate Cardless EMI payment.

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">button</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">true</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                            | description                                                                                                                                         |
| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| provider `string` <span class="v3jsrequired">Required</span>   | name of the wallet. ex `flexmoney`. See [all cardless EMI provider names in the appendix](/payments/online/element/appendix#cardless-emi-providers) |
| buttonText `string` <span class="v3jsoptional">OPTIONAL</span> | Text for button, ex Flexmoney                                                                                                                       |
| buttonIcon `bool` <span class="v3jsoptional">OPTIONAL</span>   | whether to show app icon or not                                                                                                                     |
| phone `string` <span class="v3jsrequired">Required</span>      | 10 digit phone number of your customer                                                                                                              |

<Note>
  In case `buttonText` is not provided the value of `buttonIcon` would be
  replaced to `true`. This has been done so that your customer always sees icon
  of the app.
</Note>

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key               | description                                                                                                                                           |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| provider `string` | name of the provider. ex `flexmoney`. See [all cardless EMI provider names in the appendix](/payments/online/element/appendix#cardless-emi-providers) |
| phone `string`    | 10 digit phone number of your customer                                                                                                                |

Example

```js theme={"dark"}
let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cl = cashfree.create("cardlessEMI", {
	values: {
		provider: "flexmoney",
		phone: "94140905",
		buttonText: "Flexmoney",
		buttonIcon: true,
	},
});
cl.on("loaderror", function (data) {
	console.log(data.error);
});
cl.mount("#mount-here");
cl.on("ready", function (d) {
	console.log(d.value);
});
```

All possible values of `provider` can be found in the [cardless EMI providers appendix](/payments/online/element/appendix#cardless-emi-providers)

***

## Other components

### savePaymentInstrument

A component that can be used in `.pay()` to save a payment method for a customer. This works for only cards. This will tokenise your card

<span class="cfbadge">
  <span class="t">kind</span>
  <span class="v">checkbox</span>
</span>

<span class="cfbadge green">
  <span class="t">payable</span>
  <span class="v">false</span>
</span>

<div class="cfgap" />

##### Accepted `values`

You can pass values to a component using [options](/payments/online/element/customize#configuration-options) `cashfree.create('componentName', options)`

| key                                                       | description            |
| --------------------------------------------------------- | ---------------------- |
| label `string` <span class="v3jsoptional">OPTIONAL</span> | Label for the checkbox |

##### Returned `value`

You can get the value of a component by calling `component.data().value`. All returned values of `component.data()` can be found in the [components reference](/payments/online/element/components)

| key                   | description                 |
| --------------------- | --------------------------- |
| saveInstrument `bool` | does the user wants to save |