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

# Cards Component

> 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.

<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 [here](/payments/online/element/component-overview#get-component-data)

<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>

<Accordion title="Code Snippet for cardNumber component">
  ```javascript theme={null}
  let cashfree = Telr({
    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) 
  })
  ```
</Accordion>

## cardHolder

A component to accept card holder's name.
You can pass values to a component using <b>options</b> cashfree.create('componentName', options)

<ResponseField name="cardNumber" type="Card Number Object">
  <Expandable title="properties">
    <ParamField body="cardHolder" type="string" optional>
      name of the card holder
    </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 [here](/payments/online/element/component-overview#get-component-data)

<ResponseField name="cardHolder" type="Card Holder Object">
  <Expandable title="properties">
    <ResponseField name="cardHolder" type="string">
      contains the name of the card holder
    </ResponseField>
  </Expandable>
</ResponseField>

<Accordion title="Code Snippet for cardHolder component">
  ```javascript theme={null}
  let cashfree = Telr({
    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);  
  })
  ```
</Accordion>

## cardExpiry

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

<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 [here](/payments/online/element/component-overview#get-component-data)

<ResponseField name="cardExpiry" type="Card Expiry Object">
  <Expandable title="properties">
    <ResponseField name="cardExpiry" type="string">
      Returns the card expiry in MM/YY format.
    </ResponseField>
  </Expandable>
</ResponseField>

<Accordion title="Code snippet for cardExpiry component">
  ```javascript theme={null}
  let cashfree = Telr({
    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) 
  });
  ```
</Accordion>

## cardCvv

A component to accept card cvv/cvc. This component does not accept any parameters.

<h4>Returned Value</h4>
This is a secure field and you cannot get values from this field.

<Accordion title="Code snippet for cardCVV component">
  ```javascript theme={null}
  let cashfree = Telr({
    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) 
  });
  ```
</Accordion>