> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/credit-card.md).

# Credit Card

The `CreditCard` component displays a visual representation of a credit card, showing the brand, expiry date, and last four digits of the card number.

### Preview

<div align="left"><figure><img src="/files/Zac49HBcIwKK3OtxlmWO" alt="Gravity credit card component" width="314"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { CreditCard } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <CreditCard 
      brand='Visa' 
      expires='12/24' 
      last_four='1234' 
    />
  );
}
```

### Props

| Prop       | Description                     | Required | Value  |
| ---------- | ------------------------------- | -------- | ------ |
| brand      | card provider name              | required | string |
| expires    | card expiry date                | required | string |
| last\_four | last four digits of card number | required | string |

### Notes

* The `brand` prop specifies the card provider name.
* The `expires` prop specifies the expiry date of the card.
* The `last_four` prop specifies the last four digits of the card number.