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.

With the moov-form element, data is collected from the user and processed directly by Moov. All information is securely captured through iframes that securely capture the data without your app having access to it directly. For example, if a card number needs to be updated, the user can do this with the card-number-input element with a moov-form.

The example below uses all the elements of a moov-form, and goes over styling, properties, and attributes. See the composable elements section to view the full guides on the moov-form and all subsequent form elements.

Use the Drops 101 guide to learn the basics of properties, attributes, and initializing Drops.

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.

Full form example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 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 number -->
  <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>
  <!-- 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>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="zip"
    autocomplete="postal-code"
  ></moov-text-input>
</section>

Theming & styles

The composable Drop elements are unstyled, but inputs will automatically style themselves based on inheritable styles, such as font-size, color, and line-height. You can tailor the styling of the elements by adding CSS to the form’s components. The fields can be laid out in any way that best fits your app.

To re-style the inner contents of the input, 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-states.

1
2
3
.moov-text-input:has(.focus) {
  border-color: var(--focus-color);
}

Properties

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

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}.

Any string-type property can be set via attributes on the other moov-*-input HTML elements:

  • <moov-text-input>
  • <moov-card-number-input>
  • moov-expiration-date-input
  • <moov-card-security-code-input>