Card link

The card link 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-link element, as well as other Moov Drops.

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.

How to use

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

Attributes

You can set configuration information information on the moov-card-link via attributes set on the HTML <moov-card-link> 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-link
  oauth-token="{{TOKEN}}"
  account-id="{{ACCOUNT_ID}}"
  validation-event="keydown"
></moov-card-link>

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 link is invalidated
onValidated Callback fired when the link passes validation
onSuccess 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 = () => {
  // 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

Submit

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

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

Validate

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

1
2
3
const cardInput = document.querySelector('moov-card-link');
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-link');
const validityPromise = cardInput.fetchValidity();
validityPromise.then(isValid => {
// Do something based on isValid
});