Expiration date input Drop

Include the Moov expiration date input Drop with the Moov form Drop to securely and seamlessly submit sensitive card data to Moov.

Combine the moov-expiration-date-input element with the moov-form to submit sensitive card data to Moov. With the moov-expiration-date-input element, information entered by the user is captured by iframes and hidden from the customer’s website.

Expiration date

<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}/cards/{cardID}"
></moov-form>
<section>
  <label>Expiration date</label>
  <moov-expiration-date-input
    formname="demo-form"
    name="expiration"
    required
  ></moov-expiration-date-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.

Properties

Properties can be accessed through JavaScript using a reference to the moov-expiration-date-input element.

Property	Type	Required	Description
`name`	String	✓	The name of the input. The input value is merged into the request body using this name. For example, the input name `name.first` would result in a request body of `{ name: { first: "inputValue" } }`.
`formName`	String	✓	The name of the form to which this text input is registered.
`disabled`	Boolean		If `true`, this input is disabled, preventing user input.
`required`	Boolean		If `true`, this input is required for form submission.
`readOnly`	Boolean		If `true`, the input value cannot be edited by a user.
`size`	Number		Expected number of characters in this input.
`inputStyle`	Object		A record of camelCased CSS variables, passed to the input element within the iframe. For developer convenience, inheritable styles such as color, font-size, and font-family are applied automatically.
`validationMessage`	String		Read only. The human-readable message displayed to the user when this input is invalid.
`validity`	Object		Read only. A `ValidityState` object. Details whether or not the input is valid and which validations (if any) are passing.
`willValidate`	Boolean		Read only. Returns true if this input has any attached validators.
`onInput`	Function		Fired when the user changes the input value. No arguments.
`onChange`	Function		Fired when the user navigates away from the input. No arguments.
`onFocus`	Function		Fired when the user focuses the input. No arguments.
`onBlur`	Function		Fired when the input loses focus. No arguments.
`onInvalid`	Function		Fired when the input fails a validation check.
`onEnterKeyPress`	Function		Fired when the user presses the enter key while focusing the input.
`onCheckValidity`	Function		Fired after a validity check runs on the input. Passes `isValid` as an argument.
`onReportValidity`	Function		Fired after a validity report runs on the input. Passes `isValid` as an argument.

How to set a property

const input = document.querySelector('moov-expiration-date-input');
input.name = 'demoInput';

const input = document.querySelector('moov-expiration-date-input');
input.inputStyle = {
  fontSize: "14px",
  color: "blue",
};

const input = document.querySelector('moov-expiration-date-input');
const blurCallback = (brandName) => {
  // Input lost focus
};

input.onBlur = blurCallback;

const input = document.querySelector('moov-expiration-date-input');
const invalidCallback = () => {
  // The input failed validation
  console.error(input.validationMessage);
};

input.onInvalid = invalidCallback;

Methods

You can call the methods of moov-expiration-date-input to perform various actions.

Method	Description	Parameters	Returns
`blur`	Removes focus from the input.	None	None
`click`	Imitates a user click on the input.	None	None
`focus`	Focuses the input.	None	None
`select`	Selects the input.	None	None
`setCustomValidity`	Overrides the `validityMessage` on the input.	`validityMessage`: String	None
`checkValidity`	Runs a validity check on the input.	None	None
`reportValidity`	Runs a validity check on the input and reports the result to the user through browser default behavior.	None	None

How to call a method

const input = document.querySelector('moov-expiration-date-input');
input.focus();

const input = document.querySelector('moov-expiration-date-input');
input.checkValidity();
// Use onCheckValidity for the result

Properties

How to set a property

Methods

How to call a method

Was this helpful?