Moov's composable Drop elements enable you to collect information by registering and configuring specific fields, and submitting those fields securely and seamlessly to Moov.

The composable Drops are a collection of interconnected elements, including `moov-form`, `moov-text-input`, `moov-card-number-input`, and other fields. By combining these elements, your users can interact directly with the Moov API, keeping sensitive data away from your app and simplifying PCI compliance. Need to update a user's credit card information? Combine a `moov-form` with a `moov-card-number-input` and Moov takes care of the rest.

Use the [Drops 101](https://docs.moov.io/moovjs/drops/drops-101/) guide to learn the basics of properties, attributes, and initializing Drops.

### Card Capture

- Name on card
- Card number
- Expiration
- CVV
- Zip

```html
<!-- The moov-form makes the secure call to Moov -->
<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}/cards/{cardID}"
></moov-form>
<script>
  const form = document.querySelector("moov-form");
  form.requestHeaders = {
    "content-type": "application/json",
    "Authorization": "Bearer <moov-api-token>",
  };
</script>
<section>
  <label>Name on card</label>
  <!-- The moov-text-input element allows a user to update a cardholder's name -->
  <moov-text-input
    formname="demo-form"
    name="holderName"
    autocomplete="cc-name"
  ></moov-text-input>
  <label>Card number</label>
  <!-- The moov-card-number-input element allows a user to update a card's number -->
  <moov-card-number-input
    formname="demo-form"
    name="cardNumber"
    required
  ></moov-card-number-input>
  <label>Expiration date</label>
  <!-- The moov-expiration-date-input element allows a user to update a card's expiration date -->
  <moov-expiration-date-input
    formname="demo-form"
    name="expiration"
    required
  ></moov-expiration-date-input>
  <label>CVV</label>
  <!-- The moov-card-security-code-input element allows a user to update a card's CVV -->
  <moov-card-security-code-input
    formname="demo-form"
    name="cardCvv"
  ></moov-card-security-code-input>
  <label>ZIP code:</label>
  <!-- The moov-text-input element allows a user to update a card's billing ZIP -->
  <moov-text-input
    formname="demo-form"
    name="billingAddress.postalCode"
    autocomplete="postal-code"
  ></moov-text-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.

### Theming & styles

The composable Drop inputs will automatically style themselves based on inheritable `<input>` styles, such as font-size, color, and line-height.

You can further customize the outer contents of an element by targeting the element's tag, such as `moov-text-input`, and applying additional styles. To re-style the inner contents of an element, use the `inputStyle` property.

Note: Pseudo-selectors such as `:focus` and `:valid` don't work through iframes. Instead, use `:has(.focus)` to apply styles to these pseudo-classes. All [input pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#input_pseudo-classes) are supported.

```css
moov-text-input:has(.focus) {
  border-color: var(--focus-color);
}
moov-text-input + .myErrorMessage {
  display: none;
}
moov-text-input:has(.user-invalid) + .myErrorMessage {
  display: block;
  color: red;
}
```

## Properties

Properties for elements can be accessed through JavaScript using a reference to the specific form element.

- View `moov-form` [properties](https://docs.moov.io/moovjs/drops/composable-drops/moov-form/#properties)
- View `moov-text-input` [properties](https://docs.moov.io/moovjs/drops/composable-drops/text-input/#properties)
- View `moov-card-number-input` [properties](https://docs.moov.io/moovjs/drops/composable-drops/card-number-input/#properties)
- View `moov-expiration-date-input` [properties](https://docs.moov.io/moovjs/drops/composable-drops/expiration-date-input/#properties)
- View `moov-card-security-code-input` [properties](https://docs.moov.io/moovjs/drops/composable-drops/card-security-code-input/#properties)

### Attributes

Any string-type property can alternatively be set via attributes:

- View `moov-form` [attributes](https://docs.moov.io/moovjs/drops/composable-drops/moov-form/#attributes)
- View `moov-text-input` [attributes](https://docs.moov.io/moovjs/drops/composable-drops/text-input/#attributes)
- View `moov-card-number-input` [attributes](https://docs.moov.io/moovjs/drops/composable-drops/card-number-input/#attributes)
- View `moov-expiration-date-input` [attributes](https://docs.moov.io/moovjs/drops/composable-drops/expiration-date-input/#attributes)
- View `moov-card-security-code-input` [attributes](https://docs.moov.io/moovjs/drops/composable-drops/card-security-code-input/#attributes)