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. Note that the use of the card link Drop requires a secure HTTPS connection.
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.
cardOnFile
Boolean
Optional. Indicates cardholder has authorized card to be stored for future payments.
merchantAccountID
String
Optional. Moov account ID of the merchant or entity authorized to store the card. Defaults to your platform account ID if cardOnFile is set to true and no other account is provided.
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
constcardInput=document.querySelector('moov-card-link');constsuccessCallback=(card)=>{// The card was successfully added
}cardInput.onSuccess=successCallback;
1
2
3
4
5
6
7
8
constcardInput=document.querySelector('moov-card-link');consterrorCallback=(err)=>{// There was an error adding the card
console.error(err);}cardInput.onError=errorCallback;
constcardInput=document.querySelector('moov-card-link');cardInput.submit();// Use onSuccess and onError for the result
1
2
3
constcardInput=document.querySelector('moov-card-link');cardInput.validate();// Use onValidated and onError for the result
1
2
3
4
5
constcardInput=document.querySelector('moov-card-link');constvalidityPromise=cardInput.fetchValidity();validityPromise.then(isValid=>{// Do something based on isValid
});
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
merchant-account-id
Moov account ID of the merchant or entity authorized to store the card. Defaults to your platform account ID if cardOnFile is set to true and no other account is provided.