Bp-angular-credit-cards NPM

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. Try it!

Installation

# use npm
$ npm install angular-credit-cards
# or bower
$ bower install angular-credit-cards

Setup

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

// node module exports the string 'angular-credit-cards' for convenience
angular.module('myApp', [
  require('angular-credit-cards')
]);
// otherwise, include the code first then the module name
angular.module('myApp', [
  'credit-cards'
]);

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

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 should use type="text" for all input elements.

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)
Otherwise, checks whether the card matches any valid card type
Exposes the card type as $ccType 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 and matches any card type.

Displaying the card type from a user input:

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

Enforcing a specific card type chosen with a <select>:

<form name="paymentForm">
  <select ng-model="cardType" ng-options="type for 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.$ccType" />

Sets maxlength="4"
Validates the CVC

You can optionally specify a scope property that stores the card type as cc-type. For American Express cards, a 4 digit CVC is expected. For all other card types, 3 digits are expected.

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

<div cc-exp>
  <input ng-model="card.exp_month" cc-exp-month />
  <input 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" (or 4 with the full-year attribute)
Converts the year to a 4 digit number ('14' -> 2014), unless full-year is added
Validates the year
Validates that the expiration year has not passed

`cc-exp`

Validates that the month/year pair has not passed

cc-exp-month and cc-exp-year should both be placed on input elements with type="text" or no type attribute. 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". Both directives will handle parsing the date components into numbers internally.

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

Integration

If you're not fully familiar with form validation in Angular, these may be helpful:

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.

You can also try a live demo and experiment with various inputs and see how they're validated.