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

Card number input Drop

Include the Moov card number input Drop with the Moov form Drop to securely and seamlessly submit sensitive card numbers to Moov.

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

<moov-form
  name="demo-form"
  method="POST"
  action="/accounts/{accountID}/cards"
></moov-form>
<section>
  <label>Card number</label>
  <moov-card-number-input
    formname="demo-form"
    name="cardNumber"
    required
  ></moov-card-number-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-card-number-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 expiration.month would result in a request body of { expiration: { month: "inputValue" } }.
formName String ✓ The name of the form to which this text input is registered.
allowedCardBrands String[] An array of allowed card brands. If this field is not provided, all card brands will be accepted. Accepted values are visa, mastercard, american-express, diners-club, discover, jcb, unionpay, maestro, mir, elo, hiper, or hipercard.
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.
onBrandChange Function Fired when the detected card brand changes. Passes the detected brand name as an argument.
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-card-number-input');
input.name = 'demoInput';

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

const input = document.querySelector('moov-card-number-input');
const brandChangeCallback = (brandName) => {
  // Detected card brand has changed
  console.log(brandName);
};

input.onBrandChange = brandChangeCallback;

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

input.onInvalid = invalidCallback;

Methods

You can call the methods of moov-card-number-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-card-number-input');
input.focus();

const input = document.querySelector('moov-card-number-input');
input.checkValidity();
// Use onCheckValidity for the result
Summary Beta