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

@asoftwareworld/card-validator

v1.1.1

Published

`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

Downloads

99

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

asoftwareworldasoftwareworld

Keywords

angularmaterialtypescriptcredit cardvalidatoraswasoftwareworldaswcarddateaswcardcvvaswcard

Readme

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.

Step 1: Install Angular Material

Install Angular Material by running the following command:

ng add @angular/material

Step 2: Install ASW Credit Card Validator

Install Card Validator to set up in the project by running the following command:

npm install @asoftwareworld/card-validator

Step 3: Import the component modules

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:

<section>
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card mb-4">
                <div class="card-header py-3">
                    <h5 class="mb-0">Angular material</h5>
                </div>
                <div class="card-body">
                    <form [formGroup]="aswMatCardForm">
                        <div class="row mb-4">
                            <div class="col-12">
                                <mat-form-field appearance="outline" class="asw-full-width">
                                    <mat-label>Credit Card Number</mat-label>
                                    <asw-card formControlName="creditCard" name="card" [required]="required"></asw-card>
                                    <mat-error
                                        *ngIf="aswMatCardForm.get('creditCard')?.invalid && (aswMatCardForm.get('creditCard')?.dirty || aswMatCardForm.get('creditCard')?.touched)">
                                        <ng-container *ngIf="aswMatCardForm.get('creditCard')?.errors?.['required']">
                                            Card number is required.
                                        </ng-container>
                                        <ng-container *ngIf="aswMatCardForm.get('creditCard')?.errors?.['minlength']">
                                            Card number has invalid length.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswMatCardForm.get('creditCard')?.errors?.['invalidCardNumber'] && !aswMatCardForm.get('creditCard')?.errors?.['required'] && !aswMatCardForm.get('creditCard')?.errors?.['minlength']">
                                            Card number is invalid.
                                        </ng-container>
                                    </mat-error>
                                </mat-form-field>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-6">
                                <mat-form-field appearance="outline" class="asw-full-width">
                                    <mat-label>MM / YY</mat-label>
                                    <asw-card-date formControlName="cardDate" [required]="required"></asw-card-date>
                                    <mat-error
                                        *ngIf="aswMatCardForm.get('cardDate')?.invalid && (aswMatCardForm.get('cardDate')?.dirty || aswMatCardForm.get('cardDate')?.touched)">
                                        <ng-container *ngIf="aswMatCardForm.get('cardDate')?.errors?.['required']">
                                            Card date is required.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswMatCardForm.get('cardDate')?.errors?.['invalidCardDate'] && !aswMatCardForm.get('cardDate')?.errors?.['required']">
                                            Card expired.
                                        </ng-container>
                                    </mat-error>
                                </mat-form-field>
                            </div>
                            <div class="col-6">
                                <mat-form-field appearance="outline" class="asw-full-width">
                                    <mat-label>CVV</mat-label>
                                    <asw-card-cvv formControlName="cvv" name="card" [required]="required"></asw-card-cvv>
                                    <mat-error
                                        *ngIf="aswMatCardForm.get('cvv')?.invalid && (aswMatCardForm.get('cvv')?.dirty || aswMatCardForm.get('cvv')?.touched)">
                                        <ng-container *ngIf="aswMatCardForm.get('cvv')?.errors?.['required']">
                                            CVV is required.
                                        </ng-container>
                                        <ng-container *ngIf="aswMatCardForm.get('cvv')?.errors?.['minlength']">
                                            Invalid CVV length.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswMatCardForm.get('cvv')?.errors?.['invalidCardCvv'] && !aswMatCardForm.get('cvv')?.errors?.['required'] && !aswMatCardForm.get('cvv')?.errors?.['minlength']">
                                            CVV is invalid.
                                        </ng-container>
                                    </mat-error>
                                </mat-form-field>
                            </div>                            
                        </div>
                        <button class="btn btn-primary btn-lg btn-block" type="submit">
                            Continue to checkout
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card mb-4">
                <div class="card-header py-3">
                    <h5 class="mb-0">Bootstrap</h5>
                </div>
                <div class="card-body">
                    <form [formGroup]="aswBootstrapCardForm">
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="form-outline">
                                    <label for="cardNumber" class="form-label">Credit Card Number</label>
                                    <asw-card aswDefaultStyles aswInputClass="form-control form-control-lg" formControlName="creditCard"
                                        id="cardNumber" placeholder="Enter credit card number" name="card"
                                        [required]="required"></asw-card>
                                    <div class="invalid-feedback"
                                        *ngIf="aswBootstrapCardForm.get('creditCard')?.invalid && (aswBootstrapCardForm.get('creditCard')?.dirty || aswBootstrapCardForm.get('creditCard')?.touched)">
                                        <ng-container *ngIf="aswBootstrapCardForm.get('creditCard')?.errors?.required">
                                            Card number is required.
                                        </ng-container>
                                        <ng-container *ngIf="aswBootstrapCardForm.get('creditCard')?.errors?.minlength">
                                            Card number has invalid length.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswBootstrapCardForm.get('creditCard')?.errors?.invalidCardNumber && !aswBootstrapCardForm.get('creditCard')?.errors?.required && !aswBootstrapCardForm.get('creditCard')?.errors?.minlength">
                                            Card number is invalid.
                                        </ng-container>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                        <div class="row mb-4">
                            <div class="col-6">
                                <div class="form-outline">
                                    <label for="cardexpiry" class="form-label">MM / YY</label>
                                    <asw-card-date aswInputClass="form-control form-control-lg" id="cardexpiry"
                                        placeholder="Enter card expiry" formControlName="cardDate"
                                        [required]="required"></asw-card-date>
                                    <div class="invalid-feedback"
                                        *ngIf="aswBootstrapCardForm.get('cardDate')?.invalid && (aswBootstrapCardForm.get('cardDate')?.dirty || aswBootstrapCardForm.get('cardDate')?.touched)">
                                        <ng-container *ngIf="aswBootstrapCardForm.get('cardDate')?.errors?.required">
                                            Card date is required.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswBootstrapCardForm.get('cardDate')?.errors?.invalidCardDate && !aswBootstrapCardForm.get('cardDate')?.errors?.required">
                                            Card expired.
                                        </ng-container>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-outline">
                                    <label for="cardcvv" class="form-label">CVV</label>
                                    <asw-card-cvv aswInputClass="form-control form-control-lg" id="cardcvv"
                                        placeholder="Enter card cvv" formControlName="cvv" name="card"
                                        [required]="required"></asw-card-cvv>
                                    <div class="invalid-feedback"
                                        *ngIf="aswBootstrapCardForm.get('cvv')?.invalid && (aswBootstrapCardForm.get('cvv')?.dirty || aswBootstrapCardForm.get('cvv')?.touched)">
                                        <ng-container *ngIf="aswBootstrapCardForm.get('cvv')?.errors?.required">
                                            CVV is required.
                                        </ng-container>
                                        <ng-container *ngIf="aswBootstrapCardForm.get('cvv')?.errors?.minlength">
                                            Invalid CVV length.
                                        </ng-container>
                                        <ng-container
                                            *ngIf="aswBootstrapCardForm.get('cvv')?.errors?.invalidCardCvv && !aswBootstrapCardForm.get('cvv')?.errors?.required && !aswBootstrapCardForm.get('cvv')?.errors?.minlength">
                                            CVV is invalid.
                                        </ng-container>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-lg btn-block" type="submit">
                            Continue to checkout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

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 [email protected]

License

MIT

Social Media

Twitter: https://twitter.com/asoftwareworld

LinkedIn: https://in.linkedin.com/company/asoftwareworld

Youtube: https://www.youtube.com/@asoftwareworld

Facebook: https://www.facebook.com/asoftwaresworld

Donate


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