## CardElement
Use the `CardElement` from `@stripe/react-stripe-js` to collect card details with automatic validation.

### 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 `card` 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.
*   `value`
    A pre-filled set of values to include in the input. Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
*   `postalCode`
    *   `hidePostalCode`
        Hide the postal code field. Default is `false`. If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
*   `iconStyle`
    Appearance of the icon in the Element. Either `solid` or `default`.
*   `hideIcon`
    Hides the icon in the Element. Default is `false`.
*   `disabled`
    Applies a disabled state to the Element such that user input is not accepted. Default is `false`.
*   `disableLink`
    Disables and hides the Link button in the Element. Default is `false`.

---
### Example
```jsx
import {CardElement} from '@stripe/react-stripe-js';

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

function CardInput() {
  return <CardElement options={CARD_ELEMENT_OPTIONS} />;
}
```