Angular CC Library

Validation and formatting input parameters of Credit Cards

---

Demo

https://timofei-iatsenko.github.io/angular-cc-library/

Or run locally:

1. Clone repo
2. run yarn install
3. run yarn run:demo
4. visit http://localhost:4200

Usage

Installation

npm install angular-cc-library --save

Version Compatibility

Angular	Library
18.x	3.4.x
17.x	3.3.x
16.x	3.2.x
15.x	3.1.x
14.x	3.0.4
13.x	3.0.0
12.x	2.1.3

Formatting 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.

Since [email protected] all directives declared as standalone, so you can import them directly into your component:

import { Component } from '@angular/core';
import { CreditCardFormatDirective } from 'angular-cc-library';

@Component({
  selector: 'credit-card-number-input',
  standalone: true,
  deps: [CreditCardFormatDirective],
  template: `<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>`
})
export class CreditCardNumberInputComponent {}

But you can still import them all at once using CreditCardDirectivesModule:

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

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

@NgModule({
    imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Credit Card Formatter

• 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

• You can get parsed card type by using export api:

<input type="tel" ccNumber #ccNumber="ccNumber">
<span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>

resolvedScheme$ will be populated with visa, amex, etc.

Expiration Date Formatter 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>

Validation

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

import { CreditCardValidators } from 'angular-cc-library';

@Component({
  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>
    </form>
  `
})
export class AppComponent implements OnInit {
  form: FormGroup;
  submitted: boolean = false;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.form = this._fb.group({
      creditCard: ['', [CreditCardValidators.validateCCNumber]],
      expirationDate: ['', [CreditCardValidators.validateExpDate]],
      cvc: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]] 
    });
  }

  onSubmit(form) {
    this.submitted = true;
    console.log(form);
  }
}

Inspiration

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

License

MIT