index.md

Composable Moov Drops

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.

Inputs

<!-- 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: