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

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

Using the `moov-card-security-code-input` with the `moov-card-number-input` will automatically adjust validation to meet the security code requirements for the detected card brand.

## Card Capture

### CVV

Card Capture

```html
<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}/cards/{cardID}"
></moov-form>
<section>
  <label>CVV</label>
  <moov-card-security-code-input
    formname="demo-form"
    name="cardCvv"
    required
  ></moov-card-security-code-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-card-security-code-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. |
| `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-card-security-code-input');
input.name = 'demoInput';
```

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

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

input.onBlur = blurCallback;
```

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

input.onInvalid = invalidCallback;
```

## Methods

You can call the methods of `moov-card-security-code-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-card-security-code-input');
input.focus();
```

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

## Best practices

If you're using the `moov-security-code-input` Drop along with the `moov-card-number-input` Drop, update your label and character limit on the security code input by listening for changes to the detected brand.

```javascript
const cardNumberInput = document.querySelector('moov-card-number-input');
const cvvInput = document.querySelector('moov-card-security-code-input');
const cvvLabel = document.getElementById('cvv-label'); // Selector for your label element
cardNumberInput.onBrandChange = ((brand) => {
  if (brand) {
    let size = 3;
    let label = "CVV";
    switch (brand) {
      case "mastercard":
        size = 3;
        label = "CVC";
        break;
      case "discover":
        size = 3;
        label = "CID";
        break;
      case "american-express":
        size = 4;
        label = "CID";
        break;
      default:
        size = 3;
        label = "CVV";
    }
    cvvInput.size = size;
    cvvLabel.innerText = label;
  }
});
```