Card Number Element

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 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. - preferredNetwork Specifies a network preference for Card Brand Choice. The first network in the array that matches a network on the entered co-branded card will be selected by default in the Card Brand Choice dropdown. See the supported networks for valid values. If you specify a value for preferredNetwork at create time, showIcon must be true (so that the Card Brand Choice dropdown can appear) and you cannot specify payment_method_options.card.network at confirm time. - onChange Callback called when any value in the change event payload changes. - onNetworksChange Callback called when the available card networks change. - onReady Callback called once the Element is fully rendered. Recieves the ready event payload. - onBlur Callback called when the Element loses focus. - onFocus Callback called when the Element receives focus. - onEscape Callback called when the escape key is pressed within the Element. - onLoadError Callback called when the Element fails to load. ### Example title Render CardNumberElement