Moov form Drop
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.
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}. |
Surcharge fees
The ability to add surcharge fees to credit cards requires a two-step setup process through the <moov-form> and <moov-card-number-input> Drops.
In <moov-form>, set the requestHeaders at mount time with Authorization: Bearer <token>. The token must include the /card-metadata.read scope.
In <moov-card-number-input>, assign onCardMetadataChange (see card number input properties).
If the onCardMetadataChange callback indicates the card type is credit, the surcharge can be applied. If you do not receive a callback, treat the card type as unknown and do not apply a surcharge. Calculate the surcharge amount and pass it in amountDetails.surcharge on the payment link or transfer.
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.