> ## 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.
# Cards Component
> Use the Cashfree.js Cards Component to securely capture card numbers, expiry, and CVV from customers while staying PCI DSS compliant on your custom checkout.
There are four card components as listed below:
## cardNumber
A component to accept card number.
placeholder for your card number field
hide brand icons, default is `false`
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 [component overview reference](/payments/online/element/component-overview#get-component-data)
contains the brand of the card visa, amex, mastercard, rupay
contains the cvv length for the given brand eg 4 for amex
```javascript 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.
You can pass values to a component using **options** cashfree.create('componentName', options)
name of the card holder
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 [component overview reference](/payments/online/element/component-overview#get-component-data)
contains the name of the card holder
```javascript 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. This component does not accept any parameters.
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 [component overview reference](/payments/online/element/component-overview#get-component-data)
Returns the card expiry in MM/YY format.
```javascript 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. This component does not accept any parameters.
Returned Value
This is a secure field and you cannot get values from this field.
```javascript 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)
});
```