> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/form-controls/credit-card/code.md).

# Code

| Props           | Data Type                                            | Required             |
| --------------- | ---------------------------------------------------- | -------------------- |
| name            | string                                               | :white\_check\_mark: |
| number          | string                                               | :white\_check\_mark: |
| expiry          | string                                               | :white\_check\_mark: |
| cvc             | string                                               | :white\_check\_mark: |
| focused         | <p>string<br>('name', 'number', 'expiry', 'cvc')</p> | :white\_check\_mark: |
| namePlaceholder | boolean                                              | :x:                  |
| accepdCards     | boolean                                              | :x:                  |

{% hint style="info" %}
This component should be used together with CreditCardName, CreditCardNumber, CreditCardCVC, CreditCardDate components.
{% endhint %}

### Complement Components

#### CreditCardName, CreditCardNumber, CreditCardCVC, CreditCardDate

| Props        | Data Type | Required             |
| ------------ | --------- | -------------------- |
| value        | string    | :white\_check\_mark: |
| className    | string    | :x:                  |
| id           | string    | :white\_check\_mark: |
| name         | string    | :x:                  |
| label        | string    | :x:                  |
| info         | string    | :x:                  |
| helptext     | string    | :x:                  |
| error        | boolean   | :x:                  |
| errorMessage | string    | :x:                  |
| disabled     | boolean   | :x:                  |
| readOnly     | boolean   | :x:                  |
| onBlur       | function  | :x:                  |
| onChange     | function  | :x:                  |
| onChange     | function  | :x:                  |

{% hint style="info" %}
These four components work exactly like the TextInput and NumberInput components removing a couple of extra features to delimitate the specific experience to give to the user by using this inputs.
{% endhint %}

{% hint style="info" %}
Also the tokens used for these components are the same that we're using for the TextInput and NumberInput components.
{% endhint %}

### How To Use

The main component is CreditCard, which is going to receive through the other CreditCard input components the data to perform the animations and interactions expected.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FepnBZvDdaIT65aGDOXlc%2Fimage.png?alt=media\&token=a909f7e3-f2d3-4695-befd-b660626dc66b)

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FwMYHJghe2eFYUpMgEovg%2Fimage.png?alt=media\&token=e1df3418-7e01-48fb-880a-061ec08ee7b0)

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FaSDyixYzTlyOmACOUKPL%2Fimage.png?alt=media\&token=193d6220-b7ed-4b52-9f7e-b0f68ccaa6c7)

### Example

```tsx
import React, { useState } from 'react';
import {
  CreditCard,
  CreditCardNumber,
  CreditCardName,
  CreditCardDate,
  CreditCardCVC,
  Text
} from '@2600hz/sds-react-components';
import './app.scss';

const App = () => {
  const [focusedData, setFocusedData] = useState<
    'name' | 'number' | 'cvc' | 'expiry'
  >('name');
  
  const [cardData, setCardData] = useState({
    name: '',
    number: '',
    cvc: '',
    expiry: ''
  });
  
  const focusElement(id){
    switch (id) {
      case 'name':
        setFocusedData('name');
        break;
      case 'number':
        setFocusedData('number');
        break;
      case 'cvc':
        setFocusedData('cvc');
        break;
      case 'expiry':
        setFocusedData('expiry');
        break;
      default:
        setFocusedData('name');
        break;
    }
  }

  const change = (e: any) => {
    const { value, id } = e;
    focusElement(id);
    setCardData((prevState) => ({ ...prevState, [id]: value }));
  };

  const focus = (e: any) => {
    const { id } = e;
    focusElement(id);
  };

  return (
    <div>
      <div className="form">
        <Text.h2 textStyle="Heading1">Credit Card Data</Text.h2>
        <CreditCardName
          id="name"
          value={cardData.name}
          onFocus={focus}
          onChange={change}
        />
        <CreditCardNumber
          id="number"
          value={cardData.number}
          onFocus={focus}
          onChange={change}
        />
        <CreditCardDate
          id="expiry"
          value={cardData.expiry}
          onFocus={focus}
          onChange={change}
        />
        <CreditCardCVC
          id="cvc"
          value={cardData.cvc}
          onFocus={focus}
          onChange={change}
        />
      </div>
      <CreditCard
        name={cardData.name}
        number={cardData.number}
        expiry={cardData.expiry}
        cvc={cardData.cvc}
        focused={focusedData}
      />
    </div>
  );
};

export default App;
```

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

#### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=/story/form-controls-credit-card-controls--credit-card-controls>" %}