Composable Moov Drops | Moov Documentation

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 guide to learn the basics of properties, attributes, and initializing Drops.

Card Capture

<!-- 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 are supported.

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.

Attributes

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