Ask Moov Beta
Generative AI is experimental and can make mistakes.
Guides Use cases API Changelog
  1. Moov.js
  2. Moov Drops
  3. Composable Moov Drops

Moov form Drop

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.

<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 

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

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

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

form.onSuccess = successCallback;

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 

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

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 for your desired action to find the required scopes.

Summary Beta