The Moov form Drop enables Moov customers to securely and seamlessly submit sensitive user data to Moov.

With the `moov-form` element, information is entered by the user and processed directly by Moov. All information is captured by iframes and hidden from the customer's website. The `moov-form` coordinates user input across a collection of individual form elements, making it highly flexible and adaptable to your needs.

## Card Capture

### Legal business name

### EIN

### Website

### Ask

```html
<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}"
></moov-form>
<section>
  <label>Legal business name</label>
  <moov-text-input
    formname="demo-form"
    name="profile.business.legalBusinessName"
  ></moov-text-input>
  <label>EIN</label>
  <moov-text-input
    formname="demo-form"
    name="profile.business.taxID.ein"
  ></moov-text-input>
  <label>Website</label>
  <moov-text-input
    type="url"
    formname="demo-form"
    name="profile.business.website"
  ></moov-text-input>
</section>
```

The `moov-text-input` element updates a user's name, the `moov-card-number-input` element updates a user's card number, and the `moov-card-security-code-input` element updates the user's CVV.

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-form` element.

| Property           | Type   | Required | Description                                                                                          |
|-------------------|--------|----------|------------------------------------------------------------------------------------------------------|
| `name`            | String | **✓**    | The unique name of the form.                                                                         |
| `method`          | String | **✓**    | The HTTP method to use when submitting the form. `GET`, `POST`, `PATCH`, or `DELETE`.                |
| `action`          | String | **✓**    | The Moov API URL to use when submitting the form, such as `/accounts/{accountID}`                   |
| `requestHeaders`  | Object |          | Headers passed with the request. Include your Moov API token in the `Authorization` header.        |
| `requestBody`     | Object |          | A default value for the request body. Input values will be merged into this object when the form is submitted. |
| `elements`        | Array  |          | Read-only. An array of the `moov-*-input` elements attached to this form.                           |
| `length`          | Number |          | Read-only. The number of `moov-*-input` elements attached to this form.                              |
| `onSuccess`       | Function|          | Fired after a successful form submission. Provides `response` as an argument.                        |
| `onError`         | Function|          | Fired after an unsuccessful form submission. Provides `response` as an argument.                     |
| `onCheckValidity` | Function|          | Fired after a validity check runs on the form. Provides `isValid` as an argument.                   |
| `onReportValidity`| Function|          | Fired after the forms reports validity to the user. Provides `isValid` as an argument.               |

### How to set a property

```javascript
const form = document.querySelector('moov-form');
form.name = 'demo-form';
```

```javascript
const form = document.querySelector('moov-form');
form.method = "PUT";
form.requestHeaders = {
  "content-type": "application/json",
  "Authorization": "Bearer " + token,
};
```

```javascript
const form = document.querySelector('moov-form');
const successCallback = (response) => {
  // The form was submitted successfully
  response.json().then(console.log);
};

form.onSuccess = successCallback;
```

```javascript
const form = document.querySelector('moov-form');
const errorCallback = (response) => {
  // There was an error submitting the form
  response.json().then(console.error);
};

form.onError = errorCallback;
```

## Methods

You can call the methods of `moov-form` to perform various actions.

| Method             | Description                                                             | Parameters | Returns |
|--------------------|-------------------------------------------------------------------------|------------|---------|
| `checkValidity`    | Updates the validation state for all form inputs, and returns an `isValid` boolean through the `onCheckValidity` callback function. | None       | None    |
| `reportValidity`   | Checks validity of the form, and alerts the user to invalid inputs using the browser's default behavior. Returns an `isValid` boolean through the `onReportValidity` callback function.  | None       | None    |
| `requestSubmit`    | Checks validity of the form, and submits the form only if all inputs are valid. | None       | None    |
| `reset`            | Clears out all inputs.                                                  | None       | None    |
| `submit`           | Immediately submits the form without checking for validity.            | None       | None    |

### How to call a method

```js
const form = document.querySelector('moov-form');
form.submit();
// Use onSuccess and onError for the result
```

```js
const form = document.querySelector('moov-form');
form.checkValidity();
// Use onCheckValidity for the result
```

## Attributes

String-type properties can be set via attributes on the HTML `<moov-form>` element.

| Attribute | Type   | Description                                                                 | 
|-----------|--------|-----------------------------------------------------------------------------| 
| `name`    | String | The unique name of the form.                                               |
| `method`  | String | The HTTP method to use when submitting the form. `GET`, `POST`, `PATCH`, or `DELETE`. |
| `action`  | String | The Moov API url to use when submitting the form, such as `/accounts/{accountID}`. |

## Scopes

Your Moov API token must include the required scopes for the desired form action. Refer to the [API docs](https://docs.moov.io/api/) for your desired action to find the required scopes.