npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@66pix/angular-credit-cards

v3.1.7

Published

Angular directives for formatting and validating credit card inputs

Downloads

16

Readme

angular-credit-cards Build Status

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" ng-required="true" />
  • Can format your inputs into space-delimited groups (e.g. 4242 4242 4242 4242) by adding the cc-format option
  • Strips all punctuation and spaces in the model
  • Validates the card against the Luhn algorithm
  • Checks whether the card is the type(s) 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

If you're using cc-format, you'll want to apply the novalidate attribute to your <form> to disable native browser validation. The input pattern used to trigger the dialer keypad on mobile does not allow spaces, causing browsers that implement pattern validation to display an error tooltip.

The cc-type property is optional and may be a single card type or an array of types. If its value is defined on the scope, the card number will be checked against the type(s) 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.

You can also enable eager card type detection to match against card type with only leading digits (e.g. a 4 can immediately be detected as a Visa). Add the cc-eager-type attribute to your element to enable eager type detection. The eagerly matched type will be available as $ccEagerType on the model controller.

Displaying the card type from a user input:

<form name="paymentForm">
  <input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type />
</form>
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
  Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$valid">
  Yes, that looks like a valid {{paymentForm.cardNumber.$ccType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$error.required">
  You must enter a credit card number!
</p>

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 ng-required="true" />
<input type="text" ng-model="card.cvc" cc-type="cardNumber.$ccType" ng-required="true" />
  • 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 ng-required="true" />
  <input ng-model="card.exp_year" cc-exp-year ng-required="true" />
</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. Because ccExp is not an input and adds a validation property directly to the form, you cannot access its validity as myForm.ccExp.$valid. Instead use myForm.$error.ccExp to determine whether to show a validation error.

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.

License

MIT