# Card number input Drop
Include the Moov card number input Drop with the Moov form Drop to securely and seamlessly submit sensitive card numbers to Moov.
Combine the `moov-card-number-input` with the `moov-form` to submit sensitive user data to Moov. With the `moov-card-number-input` element, information entered by the user is captured by iframes and hidden from the customer's website.
Card number
```html
```
Moov Drops require a secure HTTPS connection. If you don't have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.
## [Properties](#properties)
Properties can be accessed through JavaScript using a reference to the `moov-card-number-input` element.
| Property | Type | Required | Description |
|---------------------|-----------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `name` | String | **✓** | The name of the input. The input value is merged into the request body using this name. For example, the input name `expiration.month` would result in a request body of `{ expiration: { month: "inputValue" } }`. |
| `formName` | String | **✓** | The name of the form to which this text input is registered. |
| `allowedCardBrands` | String\[] | | An array of allowed card brands. If this field is not provided, all card brands will be accepted. Accepted values are `visa`, `mastercard`, `american-express`, `diners-club`, `discover`, `jcb`, `unionpay`, `maestro`, `mir`, `elo`, `hiper`, or `hipercard`. |
| `disabled` | Boolean | | If `true`, this input is disabled, preventing user input. |
| `required` | Boolean | | If `true`, this input is required for form submission. |
| `readOnly` | Boolean | | If `true`, the input value cannot be edited by a user. |
| `size` | Number | | Expected number of characters in this input. |
| `inputStyle` | Object | | A record of camelCased CSS variables, passed to the input element within the iframe. For developer convenience, inheritable styles such as color, font-size, and font-family are applied automatically. |
| `validationMessage` | String | | Read only. The human-readable message displayed to the user when this input is invalid. |
| `validity` | Object | | Read only. A `ValidityState` object. Details whether or not the input is valid and which validations (if any) are passing. |
| `willValidate` | Boolean | | Read only. Returns true if this input has any attached validators. |
| `onInput` | Function | | Fired when the user changes the input value. No arguments. |
| `onChange` | Function | | Fired when the user navigates away from the input. No arguments. |
| `onFocus` | Function | | Fired when the user focuses the input. No arguments. |
| `onBlur` | Function | | Fired when the input loses focus. No arguments. |
| `onBrandChange` | Function | | Fired when the detected card brand changes. Passes the detected brand name as an argument. |
| `onInvalid` | Function | | Fired when the input fails a validation check |
| `onEnterKeyPress` | Function | | Fired when the user presses the enter key while focusing the input |
| `onCheckValidity` | Function | | Fired after a validity check runs on the input. Passes `isValid` as an argument. |
| `onReportValidity` | Function | | Fired after a validity report runs on the input. Passes `isValid` as an argument. |
### [How to set a property](#how-to-set-a-property)
[name](#tab-348192756-4-0) [inputStyle](#tab-348192756-4-1) [onBrandChange](#tab-348192756-4-2) [onInvalid](#tab-348192756-4-3)
```javascript
const input = document.querySelector('moov-card-number-input');
input.name = 'demoInput';
```
```javascript
const input = document.querySelector('moov-card-number-input');
input.inputStyle = {
fontSize: "14px",
color: "blue",
};
```
```javascript
const input = document.querySelector('moov-card-number-input');
const brandChangeCallback = (brandName) => {
// Detected card brand has changed
console.log(brandName);
};
input.onBrandChange = brandChangeCallback;
```
```javascript
const input = document.querySelector('moov-card-number-input');
const invalidCallback = () => {
// The input failed validation
console.error(input.validationMessage);
};
input.onInvalid = invalidCallback;
```
## [Methods](#methods)
You can call the methods of `moov-card-number-input` to perform various actions.
| Method | Description | Parameters | Returns |
|---------------------|---------------------------------------------------------------------------------------------------------|---------------------------|---------|
| `blur` | Removes focus from the input. | None | None |
| `click` | Imitates a user click on the input. | None | None |
| `focus` | Focuses the input. | None | None |
| `select` | Selects the input. | None | None |
| `setCustomValidity` | Overrides the `validityMessage` on the input. | `validityMessage`: String | None |
| `checkValidity` | Runs a validity check on the input. | None | None |
| `reportValidity` | Runs a validity check on the input and reports the result to the user through browser default behavior. | None | None |
### [How to call a method](#how-to-call-a-method)
[focus](#tab-542687139-6-0) [validate](#tab-542687139-6-1)
```javascript
const input = document.querySelector('moov-card-number-input');
input.focus();
```
```javascript
const input = document.querySelector('moov-card-number-input');
input.checkValidity();
// Use onCheckValidity for the result
```