Card link Moov Drop

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`.
`holderName`	String	Optional value specifying the full name of the card holder.
`billingAddress`	Object	Optional value for the billing address of the card. Follows the format specified in the link card schema. Supplying a `postalCode` will update the zip input field accordingly.
`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.onSuccess = 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.