ASW Credit Card Validator - validate card numbers.

ASW Card Validator library validates masking and card numbers, with the help of Luhn's algorithm using Angular.

ASW credit card validator demo

Contributing Guidelines
·
Submit an Issue
·
Blog

 


 

Documentation

ASW Card Validator library validates masking and card numbers, with the help of Luhn's algorithm using Angular. Identify card type VISA, Amex, China UnionPay, Dankort, Diners, Discover, Elo, Hipercard, JCB, Maestro, and Mastercard and then verify the card number, based on digits.

Test card numbers

| Card Type| Card Number | Expiry Date|CVV |
| --------------- | --------------------|-------------|------------------------------------------------------------------------------ |
| American Express (Amex)|3700 0000 0000 002|03/2030| 7373|
| China UnionPay|6243 0300 0000 0001 |12/2029| 737 |
| Dankort| 5019 5555 4444 5555| 03/2030| 737|
|Diners|3600 6666 3333 44|03/2030|737|
|Discover|6011 6011 6011 6611|03/2030|737|
|Elo|5066 9911 1111 1118|03/2030|737|
|Hipercard|6062 8288 8866 6688|03/2030|737|
|JCB|3569 9900 1009 5841|03/2030|737|
|Maestro|6771 7980 2100 0008|03/2030|737|
|Mastercard|5555 3412 4444 1115|03/2030|737|
|Visa|4166 6766 6766 6746|03/2030|737|

Installation

Below are some prerequisites before install Card Validator.

$3

Install Angular Material by running the following command:

``html
ng add @angular/material
`

$3

Install Card Validator to set up in the project by running the following command:
`html
npm install @asoftwareworld/card-validator
`

$3

Import the NgModule for each component you want to use:

`
import { AswCardModule } from '@asoftwareworld/card-validator/card';
import { AswCardCvvModule } from '@asoftwareworld/card-validator/card-cvv';
import { AswCardDateModule } from '@asoftwareworld/card-validator/card-date';
import { CardCvvService, CardCvvValidator } from '@asoftwareworld/card-validator/common';
// ...
@NgModule({
imports: [
// shown passing global defaults (optional)
AswCardModule,
AswCardCvvModule,
AswCardDateModule
...
],
providers: [
CardCvvService,
CardCvvValidator
]
// ...
})
export class AppModule { }
`

Add a selector to HTML

In your template, use the component selector:
`

Angular material

Credit Card Number

*ngIf="aswMatCardForm.get('creditCard')?.invalid && (aswMatCardForm.get('creditCard')?.dirty || aswMatCardForm.get('creditCard')?.touched)">

Card number is required.


Card number has invalid length.

*ngIf="aswMatCardForm.get('creditCard')?.errors?.['invalidCardNumber'] && !aswMatCardForm.get('creditCard')?.errors?.['required'] && !aswMatCardForm.get('creditCard')?.errors?.['minlength']">
Card number is invalid.

MM / YY

*ngIf="aswMatCardForm.get('cardDate')?.invalid && (aswMatCardForm.get('cardDate')?.dirty || aswMatCardForm.get('cardDate')?.touched)">

Card date is required.

*ngIf="aswMatCardForm.get('cardDate')?.errors?.['invalidCardDate'] && !aswMatCardForm.get('cardDate')?.errors?.['required']">
Card expired.

CVV

*ngIf="aswMatCardForm.get('cvv')?.invalid && (aswMatCardForm.get('cvv')?.dirty || aswMatCardForm.get('cvv')?.touched)">

CVV is required.


Invalid CVV length.

*ngIf="aswMatCardForm.get('cvv')?.errors?.['invalidCardCvv'] && !aswMatCardForm.get('cvv')?.errors?.['required'] && !aswMatCardForm.get('cvv')?.errors?.['minlength']">
CVV is invalid.

Continue to checkout

Bootstrap

Credit Card Number
id="cardNumber" placeholder="Enter credit card number" name="card"
[required]="required">

*ngIf="aswBootstrapCardForm.get('creditCard')?.invalid && (aswBootstrapCardForm.get('creditCard')?.dirty || aswBootstrapCardForm.get('creditCard')?.touched)">

Card number is required.


Card number has invalid length.

*ngIf="aswBootstrapCardForm.get('creditCard')?.errors?.invalidCardNumber && !aswBootstrapCardForm.get('creditCard')?.errors?.required && !aswBootstrapCardForm.get('creditCard')?.errors?.minlength">
Card number is invalid.

MM / YY
placeholder="Enter card expiry" formControlName="cardDate"
[required]="required">

*ngIf="aswBootstrapCardForm.get('cardDate')?.invalid && (aswBootstrapCardForm.get('cardDate')?.dirty || aswBootstrapCardForm.get('cardDate')?.touched)">

Card date is required.

*ngIf="aswBootstrapCardForm.get('cardDate')?.errors?.invalidCardDate && !aswBootstrapCardForm.get('cardDate')?.errors?.required">
Card expired.

CVV
placeholder="Enter card cvv" formControlName="cvv" name="card"
[required]="required">

*ngIf="aswBootstrapCardForm.get('cvv')?.invalid && (aswBootstrapCardForm.get('cvv')?.dirty || aswBootstrapCardForm.get('cvv')?.touched)">

CVV is required.


Invalid CVV length.

*ngIf="aswBootstrapCardForm.get('cvv')?.errors?.invalidCardCvv && !aswBootstrapCardForm.get('cvv')?.errors?.required && !aswBootstrapCardForm.get('cvv')?.errors?.minlength">
CVV is invalid.

Continue to checkout

`

Define in your component to get published event :

`
export class AppComponent implements OnInit {
title = 'asw-credit-card-validator';
aswMatCardForm: FormGroup;
aswBootstrapCardForm: FormGroup;
cardNumber = '';
required = true;
disabled = true;
constructor(
private fb: FormBuilder) {
this.aswMatCardForm = this.fb.group({
creditCard: ['', [Validators.required]],
cvv: ['', [Validators.required]],
cardDate: ['', [Validators.required]]
});
this.aswBootstrapCardForm = this.fb.group({
creditCard: ['', [Validators.required]],
cvv: ['', [Validators.required]],
cardDate: ['', [Validators.required]]
});
}

ngOnInit(): void {
this.aswMatCardForm = this.fb.group({
creditCard: ['', [Validators.required, Validators.minLength(12)]],
cvv: ['', [Validators.required, Validators.minLength(3)]],
cardDate: ['', [Validators.required]]
});
this.aswBootstrapCardForm = this.fb.group({
creditCard: ['', [Validators.required, Validators.minLength(12)]],
cvv: ['', [Validators.required, Validators.minLength(3)]],
cardDate: ['', [Validators.required]]
});
}

submit(): void {
}
}
`

Theme

Angular Material more information

List of Input parameters for AswCard

| Input parameters| Default value | Description |
| --------------- | --------------------|------------------------------------------------------------------------------------------- |
| placeholder: string (optional)| | The placeholder is text shown when the label is floating but the input is empty. |
| required: boolean (optional)| false | User must specify a value for the input is required or not. |
| disabled: boolean (optional)| false | User must specify the input is disabled or not.|
|aswDefaultStyles: boolean (optional)| false| aswDefaultStyles is a set of predefined CSS styles that are applied to the ASW Credit Card Validator library's components by default.|
|aswInputClass: string (optional)| | aswInputClassproperty allows you to customize the styles of a component by specifying a custom CSS class for the component, which you can then define in your CSS file.|

List of Input parameters for AswCardDate

| Input parameters| Default value | Description |
| --------------- | --------------------|------------------------------------------------------------------------------------------- |
| placeholder: string (optional)| | The placeholder is text shown when the label is floating but the input is empty. |
| required: boolean (optional)| false | User must specify a value for the input is required or not. |
| disabled: boolean (optional)| false | User must specify the input is disabled or not.|
|aswInputClass: string (optional)| | aswInputClassproperty allows you to customize the styles of a component by specifying a custom CSS class for the component, which you can then define in your CSS file.|

List of Input parameters for AswCardCvv

| Input parameters| Default value | Description |
| --------------- | --------------------|------------------------------------------------------------------------------------------- |
| placeholder: string (optional)| | The placeholder is text shown when the label is floating but the input is empty. |
| required: boolean (optional)| false | User must specify a value for the input is required or not. |
| disabled: boolean (optional)| false | User must specify the input is disabled or not.|
|aswInputClass: string (optional)| | aswInputClassproperty allows you to customize the styles of a component by specifying a custom CSS class for the component, which you can then define in your CSS file.|

List of Components

| Components | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------- |
| Card | Card validator validates masking and card numbers, with the help of Luhn's algorithm. Identify card type, VISA, Amex, China UnionPay, Dankort, Diners, Discover, Elo, Hipercard, JCB, Maestro, and Mastercard and then verify the card number, just by looking at the digits |
| Card CVV | CVV validation by default test for a numeric string of 4 characters in length. The maxLength can be overridden based on card number. The length will be changed 3 to 4 in the case of an American Express card which expects a 4 digit. |
| Card Date | Card month accepts 1 or 2 digit months. 1, 01, 10 are valid month. Year accepts 2 digit only. 21, 22 is valid year. The maxElapsedYear parameter determines how many years in the future a card's expiration date should be considered valid. It has a default value of 19, so cards with an expiration date 20 or more years in the future would not be considered valid. It can be overridden by passing in an integer as a second argument. |

Browser Support

| !Chrome | !Firefox | !Safari | !Opera | !Edge |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

Report a bug

We use GitHub Issues as the official bug tracker for the ASW Credit Card Validator. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the ASW Credit Card Validator.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help please email asoftwareworld@gmail.com

License

MIT

Social Media

Twitter:

LinkedIn:

Youtube:

Facebook:

Donate

If you found value in ASW Credit Card Validator` or a contributor helped you out of a jam, consider becoming a contributor yourself.