Skip to content

Card input

The card input Moov Drop enables Moov customers to register a user’s credit card in the most secure and seamless way possible.

Moov Drops are custom web components you can add to your page the same way you would add any HTML tag. Moov Drops are defined in the Moov.js package. After initializing Moov.js, you will have access to the moov-card-input element, as well as other Moov Drops.

With the moov-card-input element, credit card information is entered by the user and processed directly by Moov. All information is captured by an iframe and hidden from the customer’s website.

Card input example

How to use

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <head>
    <script src="moov.js"></script>
  </head>
  <body>
    <moov-card-input
      oauth-token="{{TOKEN}}"
      account-id="{{ACCOUNT_ID}}"
    ></moov-card-input>
  </body>
</html>

Attributes

You can set configuration information information on the moov-card-input via attributes set on the HTML <moov-card-input> element. All the attributes can also be set via their corresponding property.

Attribute Description
oauth-token Auth Token used for hitting the API. Token must include the accounts/{accountID}/cards.write scope
account-id ID for the account we want to add cards to
validation-event Controls the frequency of validation. Possible values submit, change, keydown, or none

How to set an attribute

1
2
3
4
5
<moov-card-input
  oauth-token="{{TOKEN}}"
  account-id="{{ACCOUNT_ID}}"
  validation-event="keydown"
></moov-card-input>

Properties

Properties are similar to attributes by they must be set via javascript.

Property Description
oauthToken Auth Token used for hitting the API. Token must include the accounts/{accountID}/cards.write scope
accountID ID for the account we want to add cards to
validationEvent Controls the frequency of validation. Possible values submit, change, keydown, or none
inputStyle CSS object to override styles within the iframe. See styling section.
onEnterKeyPress Callback fired when the enter key is pressed inside the iframe
onError Callback fired when the submit fails or input is invalidated
onValidated Callback fired when the input passes validation
onSuccess Callback fired when a card is registered successfully

How to set a property

1
2
const cardInput = document.querySelector('moov-card-input');
cardInput.validationEvent = 'keydown';
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const cardInput = document.querySelector('moov-card-input');

const styles = {
  fontSize: "18.4px",
  fontFamily: "-apple-system, system-ui, 'Avenir Next'",
  paddingTop: "1px",
  "--text-color-invalid": "#FFB300",
};

cardInput.inputStyle = styles;
1
2
3
4
5
6
7
const cardInput = document.querySelector('moov-card-input');

const successCallback = () => {
  // The card was successfully added
}

cardInput.onSucces = successCallback;
1
2
3
4
5
6
7
8
const cardInput = document.querySelector('moov-card-input');

const errorCallback = (err) => {
  // There was an error adding the card
  console.error(err);
}

cardInput.onError = errorCallback;

Methods

Submit

The submit method attempts to register a new card using the current input values. No return value.

1
2
3
const cardInput = document.querySelector('moov-card-input');
cardInput.submit();
// Use onSuccess and onError for the result

Validate

validate triggers validation on the current input values. No return value.

1
2
3
const cardInput = document.querySelector('moov-card-input');
cardInput.validate();
// Use onValidated and onError for the result

Fetch validity

fetchValidity runs validation asynchronously and resolves to true or false. Returns a promise.

1
2
3
4
5
const cardInput = document.querySelector('moov-card-input');
const validityPromise = cardInput.fetchValidity();
validityPromise.then(isValid => {
// Do something based on isValid
});

Styling

The moov-card-input can be fully customized to match the style of your page. Add a class to the moov-card-input tag to style the outer contents of the input.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
  <body>
    <style>
      moov-card-input.custom {
        width: 100%;
      }
      moov-card-input.custom .iframe-wrapper {
        padding: 0;
        padding-top: 8px;
        border: 0;
        border-bottom: 1px solid #C8D0DB;
        border-radius: 0;
        width: 100%;
      }
      moov-card-input.custom .iframe-wrapper.focus {
        border: 0;
        border-bottom: 1px solid green;
      }
    </style>
    <moov-card-input class="custom"></moov-card-input>
  </body>
</html>
iframes prevent proper bubbling of focus events, so the :focus pseudo-selector will not work as expected. Instead, use the .focus class added to the iframe-wrapper when it gains focus.

Use the inputStyle property to style the inner contents of the input. The inputStyle property uses camelCase for css rule names. Additionally, inputStyle accepts several CSS variables:

  • ––text-color : The color of the text within the input
  • ––text-color-invalid : The color of the text when an error is detected
  • ––text-color-placeholder : The color of placeholder text within the input
  • ––icon-color : The color of the default credit card icon
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
  <body>
    <moov-card-input></moov-card-input>
    <script>
      const cardInput = document.querySelector('moov-card-input');
      
      const monolineInputStyle = {
        fontSize: "18.4px",
        fontFamily: "-apple-system, system-ui, 'Avenir Next'",
        paddingTop: "1px",
        "--text-color-invalid": "#FFB300",
      };

      cardInput.inputStyle = monolineInputStyle;
    </script>
  </body>
</html>