angular-credit-cards

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

Getting Started

Include 'angular-credit-cards' in your module's dependencies:

angular.module('myApp', [
  'angular-credit-cards'
]);

If you'd like to use the creditcards API directly, you can inject the service as creditcards.

Usage and API

With the exception of ccExp, all directives require ngModel on their elements. While designed to be used together, all directives except ccExp can be used completely independently.

All directives apply a numeric input pattern so that mobile browsers use a modified version of the enlarged telephone keypad. You can optionally set type="number" for the month (cc-exp-month) and year (cc-exp-year) inputs. You should use type="text" for cc-number and cc-cvc.

Card Number (cc-number)

<input type="text" ng-model="card.number" cc-number cc-type="cardType" />

• Strips all punctuation and spaces
• Validates the card against the Luhn algorithm
• Checks whether the card is the type specified in scope property in cc-type (optional)
• Exposes the card type as $type on the model controller

The cc-type property is optional. If its value is defined on the scope, the card number will be checked against that type in addition to the Luhh algorithm. A special validity key—ccNumberType—indicates whether the card matched the specified type. If no type is provided, ccNumberType will always be valid for any card that passes Luhn. $type will mirror ccType for convenience.

<form name="paymentForm">
  <input type="text" ng-model="card.number" name="cardNumber" cc-number />
</form>
Paying with {{cardNumber.$type}}

<form name="paymentForm">
  <select ng-model="cardType" ng-options="type in ['Visa', 'American Express', 'MasterCard']"></select>
  <input type="text" ng-model="card.number" name="cardNumber" cc-number cc-type="cardType" />
  <p ng-show="paymentForm.cardNumber.$error.ccNumberType">That's not a valid {{cardType}}</p>
</form>

CVC (cc-cvc)

<input type="text" ng-model="card.cvc" cc-cvc />
<input type="text" ng-model="card.cvc" cc-type="cardNumber.$type" />

• Sets maxlength="4"
• Validates the CVC

You can optionally specify a scope property that stores the card type as cc-type.

Expiration (cc-exp, cc-exp-month, cc-exp-year)

<div cc-exp>
  <input type="number" ng-model="card.exp_month" cc-exp-month />
  <input type="number" ng-model="card.exp_year" cc-exp-year />
</div>

• cc-exp-month
  • Sets maxlength="2"
  • Validates the month
  • Converts it to a number
• cc-exp-year
  • Sets maxlength="2"
  • Converts the year to a 4 digit number ('14' -> 2014)
  • Validates the year
  • Validates that the expiration year has not passed
• cc-exp
  • Validates that the month/year pair has not passed

cc-exp must be placed on a parent element of cc-exp-month and cc-exp-year.

Form Validation

Background Reading:

• Angular Documentation: Forms
• Angular Form Validation (Scotch.io)
• Form validation with AngularJS (ng-newsletter)

angular-credit-cards sets validity keys that match the directive names (ccNumber, ccCvc, ccExp, ccExpMonth, ccExpYear). You can use these keys or the form css classes in order to display error messages.

License

MIT