Card link

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

With the moov-card-link 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.

Visit our Drops 101 guide to learn the basics of properties, attributes, and initializing Drops.

Properties

Properties can be accessed through JavaScript using a reference to the moov-card-link element.

Property Type Description
oauthToken String Auth Token used for hitting the API. Token must include the accounts/{accountID}/cards.write scope
accountID String ID for the account we want to add cards to
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.
validationEvent String Controls the frequency of validation. Possible values are submit, change, keydown, or none
inputStyle Object CSS object to override styles within the iframe. CSS rule names should be camelCased.
onEnterKeyPress Function Callback fired when the enter key is pressed inside the iframe
onError Function Callback fired when the submit fails or input is invalidated
onValidated Function Callback fired when input passes validation
onSuccess Function Callback fired when a card is registered successfully

How to set a property

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

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-link');

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

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

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

cardInput.onError = errorCallback;

Methods

You can call the methods of moov-card-link to perform various actions.

Method Description Parameters Returns
submit Attempts to register a new card using the current values None None
clear Clears out all user input None None
validate Triggers validation on the current values None None
fetchValidity Runs validation asynchronously and resolves to true or false None Promise

How to call a method

1
2
3
const cardInput = document.querySelector('moov-card-link');
cardInput.submit();
// Use onSuccess and onError for the result
1
2
3
const cardInput = document.querySelector('moov-card-link');
cardInput.validate();
// Use onValidated and onError for the result
1
2
3
4
5
const cardInput = document.querySelector('moov-card-link');
const validityPromise = cardInput.fetchValidity();
validityPromise.then(isValid => {
  // Do something based on isValid
});

Attributes

String-type properties can be set via attributes on the HTML <moov-card-link> element.

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 are submit, change, keydown, or none

Scopes

To link a card, your Moov API token must include the accounts/{accountID}/cards.write scope.

Theming

Visit our guide on themes to learn how to re-style Moov Drops.

tip
To re-style the inner contents of the card link, use the inputStyle property.