## CardNumberElement

Use the `CardNumberElement` from `@stripe/react-stripe-js` to collect the PAN (primary account number) independently while rendering Card CVC and expiration in separate Elements.

### Props

- `id`
  Sets the DOM `id` attribute on the rendered Element container. Use this to target the Element for styling or testing.
- `className`
  Applies custom CSS classes to the Element container.
- `options`
  Options for creating a `cardNumber` element.
- `classes`
  Set custom class names on the container DOM element when the Stripe element is in a particular state.
  - `base`
    The base class applied to the container. Defaults to `StripeElement`.
  - `complete`
    The class name to apply when the `Element` is complete. Defaults to `StripeElement--complete`.
  - `empty`
    The class name to apply when the `Element` is empty. Defaults to `StripeElement--empty`.
  - `focus`
    The class name to apply when the `Element` is focused. Defaults to `StripeElement--focus`.
  - `invalid`
    The class name to apply when the `Element` is invalid. Defaults to `StripeElement--invalid`.
  - `webkitAutofill`
    The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari). Defaults to `StripeElement--webkit-autofill`.
- `style`
  Customize the appearance of this element using CSS properties passed in a [Style](https://docs.stripe.com/js/appendix/style.md) object.
- `placeholder`
  Customize the placeholder text.
- `disabled`
  Applies a disabled state to the Element such that user input is not accepted. Default is `false`.
- `showIcon`
  Show a card brand icon in the Element. Default is `false`.
- `iconStyle`
  Appearance of the icon in the Element. Either `solid` or `default`.
- `disableLink`
  Disables and hides the Link button in the Element. Default is `false`. You can also disable Link across all instances of `card` and `cardNumber` elements in your [payment method settings](https://dashboard.stripe.com/settings/payment_methods).
- `preferredNetwork`
  Specifies a network preference for [Card Brand Choice](https://docs.stripe.com/card-brand-choice.md). The first network in the array that matches a network

### Example

```jsx
import {CardNumberElement} from '@stripe/react-stripe-js';

const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      color: "#32325d",
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: "antialiased",
      fontSize: "16px",
      "::placeholder": {
        color: "#aab7c8"
      }
    },
    invalid: {
      color: "#fa755a",
      iconColor: "#fa755a"
    }
  }
};

function CardNumberElementComponent() {
  return <CardNumberElement options={CARD_ELEMENT_OPTIONS} />;
}
```