angular credit card library


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
01Oct 16, 2017Jul 11, 2017Minified + gzip package size for angularx-cc-library in KB



This project is forked from '' Angular CC Library - for validation and formating of input parameters It supports latest angular version(4.x) and ion-input.


  1. Clone repo
  2. run npm install
  3. run npm run dev
  4. visit http://localhost:4200



npm install angularx-cc-library --save

Formating Directive

On the input fields, add the specific directive to format inputs. All fields must be type='tel' in order to support spacing and additional characters

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CreditCardDirectivesModule } from 'angularx-cc-library';

import { AppComponent } from './app.component';

    imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule {

Credit Card Formater

  • add ccNumber directive:
    <input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
  • this will also apply a class name based off the card .visa, .amex, etc. See the array of card types in credit-card.ts for all available types

Expiration Date Formater Will support format of MM/YY or MM/YYYY

  • add ccExp directive:
    <input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>

CVC Formater

  • add ccCvc directive:
    <input id="cc-cvc" type="tel" autocomplete="off" ccCvc>


Current only Model Validation is supported. To implement, import the validator library and apply the specific validator on each form control

import { CreditCardValidator } from 'angularx-cc-library';

  selector: 'app',
  template: `
    <form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
        <input id="cc-number" formControlName="creditCard" type="tel" autocomplete="cc-number" ccNumber>
        <input id="cc-exp-date" formControlName="expirationDate" type="tel" autocomplete="cc-exp" ccExp>
        <input id="cc-cvc" formControlName="cvc" type="tel" autocomplete="off" ccCvc>
export class AppComponent implements OnInit {
  form: FormGroup;
  submitted: boolean = false;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.form ={
      creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
      expirationDate: ['', [<any>CreditCardValidator.validateExpDate]],
      cvc: ['', [<any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(4)]] 

  onSubmit(form) {
    this.submitted = true;


Based on Stripe's jquery.payment plugin but adapted for use by Angular2



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from