Include the Moov expiration date input Drop with the Moov form Drop to securely and seamlessly submit sensitive card data to Moov.

Combine the `moov-expiration-date-input` element with the `moov-form` to submit sensitive card data to Moov. With the `moov-expiration-date-input` element, information entered by the user is captured by iframes and hidden from the customer’s website.

## Card Capture

### Expiration date

```html
<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}/cards/{cardID}"
></moov-form>
<section>
  <label>Expiration date</label>
  <moov-expiration-date-input
    formname="demo-form"
    name="expiration"
    required
  ></moov-expiration-date-input>
</section>
```

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 can be accessed through JavaScript using a reference to the `moov-expiration-date-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 `name.first` would result in a request body of `{ name: { first: "inputValue" } }`.              |
| `formName`       | String   | **✓**    | The name of the form to which this text input is registered.                                                                                                                                                         |
| `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.                                                                                                                                                                      |
| `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

```javascript
const input = document.querySelector('moov-expiration-date-input');
input.name = 'demoInput';
```

```javascript
const input = document.querySelector('moov-expiration-date-input');
input.inputStyle = {
  fontSize: "14px",
  color: "blue",
};
```

```javascript
const input = document.querySelector('moov-expiration-date-input');
const blurCallback = (brandName) => {
  // Input lost focus
};

input.onBlur = blurCallback;
```

```javascript
const input = document.querySelector('moov-expiration-date-input');
const invalidCallback = () => {
  // The input failed validation
  console.error(input.validationMessage);
};

input.onInvalid = invalidCallback;
```

## Methods

You can call the methods of `moov-expiration-date-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

```javascript
const input = document.querySelector('moov-expiration-date-input');
input.focus();
```

```javascript
const input = document.querySelector('moov-expiration-date-input');
input.checkValidity();
// Use onCheckValidity for the result
```