#ANGULAR CREDIT CARD VALIDATOR INSTALL#
#ANGULAR CREDIT CARD VALIDATOR CODE#

Both directives will handle parsing the date components into numbers internally.Ĭc-exp must be placed on a parent element of cc-exp-month and cc-exp-year. The browser's normal maxlength behavior (preventing input after the specified number of characters and truncating pasted text to that length) does not work with type='number'. Validates that the month/year pair has not passedĬc-exp-month and cc-exp-year should both be placed on input elements with type='text' or no type attribute.

Validates that the expiration year has not passed.

Converts the year to a 4 digit number ( '14' -> 2014), unless full-year is added.

Sets maxlength='2' (or 4 with the full-year attribute).

Expiration ( cc-exp, cc-exp-month, cc-exp-year) For all other card types, 3 digits are expected. For American Express cards, a 4 digit CVC is expected. You can optionally specify a scope property that stores the card type as cc-type. If no type is provided, ccNumberType will always be valid for any card that passes Luhn and matches any card type.ĭisplaying the card type from a user input: Įnforcing a specific card type chosen with a : A special validity key- ccNumberType-indicates whether the card matched the specified type. If its value is defined on the scope, the card number will be checked against that type in addition to the Luhh algorithm.

Exposes the card type as $ccType on the model controller.

Otherwise, checks whether the card matches any valid card type.

Checks whether the card is the type specified in scope property in cc-type (optional).

Validates the card against the Luhn algorithm.

You should use type='text' for all input elements. While designed to be used together, all directives except ccExp can be used completely independently.Īll directives apply a numeric input pattern so that mobile browsers use a modified version of the enlarged telephone keypad. With the exception of ccExp, all directives require ngModel on their elements. If you'd like to use the creditcards API directly, you can inject the service as creditcards.

#ANGULAR CREDIT CARD VALIDATOR CODE#

otherwise, include the code first then the module name

Include 'angular-credit-cards' in your module's dependencies: // node module exports the string 'angular-credit-cards' for convenience

#ANGULAR CREDIT CARD VALIDATOR INSTALL#

$ bower install angular-credit-cards Setup Pairs well with angular-stripe or any other payments backend. Uses creditcards to parse and validate inputs. A set of Angular directives for constructing credit card payment forms.

Angular credit card validator