Awesome
<div align="center"> <h1>Angular CC Library</h1>Validation and formatting input parameters of Credit Cards
<hr /> </div>Demo
https://timofei-iatsenko.github.io/angular-cc-library/
Or run locally:
- Clone repo
- run
yarn install
- run
yarn run:demo
- 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 angular-cc-library@3.3.0
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 incredit-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