thekip/angular-cc-library

Library to support Credit Card input masking and validation

angular-cc-library's Issues

Visa card number validation does not work

I tested with 3 different actual visa cards and none of them is validated by using this library, but master cards work well. Anyone has the same problem?

Edit: Alright, I cloned the repo and tried the same 3 actual visa cards, none of them works as well. So I believe the library has validation issues itself.

Error in ng build --prod

the package is showing the error below to build --prod in version of angular 8.2.0.
Below the error and package.json information.

Package.json:
"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/cdk": "~7.3.5",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "^8.2.14",
"@angular/material": "^7.3.5",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"angular-cc-library": "^2.0.1",
"angular-form-builder": "^0.1.9",
"angular-web-storage": "^9.0.0",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"ngx-card": "^0.2.4",
"ngx-mask": "^8.1.7",
"ngx-slick-carousel": "^0.4.7",
"popper.js": "^1.16.1",
"rxjs": "~6.4.0",
"slick-carousel": "^1.8.1",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.802.0",
"@angular/cli": "~8.2.0",
"@angular/compiler-cli": "~8.2.0",
"@angular/language-service": "~8.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}

Error:
ERROR in ./node_modules/angular-cc-library/fesm2015/angular-cc-library.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\projects\88i\Site\oito-i\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (C:\projects\88i\Site\oito-i\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:16631:30)
at Object.forEachChild (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:16859:24)
at transformer (C:\projects\88i\Site\oito-i\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:63:16)
at transformSourceFileOrBundle (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:67384:57)
at transformation (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:83586:24)
at transformRoot (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:83606:82)
at Object.map (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:499:29)
at Object.transformNodes (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:83593:30)
at emitJsFileOrBundle (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:84089:32)
at emitSourceFileOrBundle (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:84043:13)
at forEachEmittedFile (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:83832:34)
at Object.emitFiles (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:84026:9)
at emitWorker (C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:89951:33)
at C:\projects\88i\Site\oito-i\node_modules\typescript\lib\typescript.js:89912:66

Mask off when I type unknown credit card

If I type a card number from credit-card.ts i see the right mask:
5555 5555
when I type 11111 I see unmasked input:
11111

Roadmap

Milestone 2.0.0:

• Build to Angular Package Format (APF)
• Compatibility with Angular Ivy #61
• Export directives with basic API #45

Next milestone:

• Allow extending cards list #46
• Split validators to general-purpose pure functions and angular-specific validators
• Tree-shakeability (probably introduce breaking changes)
• Remove required validation from validators
• Validator for CVC/CVV which is based on card type (Visa/Amex = length 3/4)

Project maintenance:

• setup automatic workflows for testing
• switch to Conventional Commits
• add more examples in Readme (how to get card scheme in component class)
• provide recommendations in readme about autocomplete attributes and inputmode attribute
• setup badges
• deploy demo project somewhere
• setup badges in readme

Code quality:

• Enable strict mode in typescript
• Setup linting with recommended rules
• Cover with unit test not covered parts
• cover with e2e tests demo application

Maxlength clamping causes field to be marked invalid

If you enter a credit card that is too long ( say the test card 4111 1111 1111 1111), if you just keep spamming the 1s when it hits max length it will remove any excess characters at the end, but the field is still marked invalid, and to work around you have to remove the last digit and re-enter it.

CreditCardDirectivesModule is not an NgModule

MacOS Sierra
version 10.12.4
npm v4.1.2

angular-cli: 1.0.0-beta.28.3
node: 6.9.5
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10

I get the following error on attempt to cold restart dev server.

ERROR in CreditCardDirectivesModule is not an NgModule
webpack: Failed to compile.

Only arrays and iterables are allowed Error

Getting ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed when using {{ccNumber.resolvedScheme$ | async}} but still getting the intended result

   @angular-devkit/build-angular : 0.1102.1
   @angular-devkit/schematics    : 11.2.0
   @angular/cli                  : 11.2.1

Error in credit card validation

CC library failed to validate the card number : 100100982901354

Formcontrol issue

Directives don't listen to formControl changes and doesn't react to it.

Backspace with american express or diners club stop and keep first 2 digits

When you use American card number start with 37 or 377 or diners club with 36 as for example, and erase it using backspace, it does not work on until the end, it stuck on undeletable 37 or 377.

Problem with Expiry Date

Hi.
We have problems with expiry date funct.

The problem appears when you use one input to month and year.

for example:

    <input #expiryInput="ngModel" [(ngModel)]="expiryFull"
                      class="form-control" name="year" placeholder="•• / ••" (ngModelChange)="testValueExpired($event)"
                      required data-stripe="exp_year"  id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp [maxLength]="7"/>

In this case we want to validate years with 2 digits only.

Problem:

When a user press the keys very fast the year part could have from 2 to 4 digits, so, for us is a problem.

i modded the file credit-card.js to validate only 2 digit , but for futher version may you can add some decorator for 2 or 4 digits.

How to pass the card type to the controller (from .html to .ts file with in the component )

Extra digit on iPhone

card number:
When typing e.g. 5100 on iPhone (chrome, safari)
The result will be 5100 0 (the 4th digit is entered twice)

update:
fixed in PR by @jribble

expiry date not working with two digits of a year(working in case of 4 digit entered year only)

while entering expiry date as 12/24, it shows error message as "Expiration Date is required" and while entering year as 12/2024 it is working fine. Please help to resolve this issue . Thanks in advance.

Export directives with basic API

Please export the directives so that user is able to use a template variable for more advanced UI stuff, like ngIfing certain elements based on whether/how the card has been identified.

Also, provide public api to access information, such as what the card has been identified as.

<input type="tel"
          id="input-cc-number"
          autocomplete="input-cc-number"
          formControlName="cardNumber"
          ccNumber
          #ccNumberInput="ccNumber"
/>

somewhere else:

<p *ngIf="ccNumberInput.verifiedAs === 'visa'">
  show some info
</p>

or change CVC label to CID in case American Express

ngModel updates too early

When you enter valid card number, for example 5555 5555 5555 4444, in creditCard input where ccNumber directive is placed.
And then you add '5' at the end, directive will validate that properly and remove '5' from input, but model will still have that '5' at the end: 5555 5555 5555 44445.

Model: 5555 5555 5555 44445
Input: 5555 5555 5555 4444

This problem happens on all directives: ccNumber, ccExp, ccCVC.
Maybe the problem is in setTimeout()

This problem can be seen and reproduced in example of this lib and on: https://stackblitz.com/edit/angular-bsgf5f

Expiry date month value removing and inserting back, removes year

Here is the gif file where I add month and year and then try to remove month and add it back.

In this case year value gets removed.

Add 19 to valid lengths of Visa

Visa has cards that have card number with length up to 19. We have issues where customer is using visa business cards with length 19.

https://www.cybersource.com/developers/getting_started/test_and_manage/best_practices/card_type_id/

cc-exp autocomplete does not work on safari

On Safari, autocomplete for expiry date does not work:

<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>

It appears Safari wants month and year to be in two separate input boxes - see https://stackoverflow.com/a/53501982/123254

Cannot find module 'angular-cc-library' or its corresponding type declarations.

The documentation was correctly followed, but when I do the import it presents "Cannot find module 'angular-cc-library' or its corresponding type declarations."

"dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/forms": "~10.2.0",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "angularx-cc-library": "^1.1.8",
    "bootstrap": "^4.6.0",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^6.2.0",
    "ngx-mask": "^11.1.5",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },

Add supporting two inputs for expiry

Hi!
Thank you for your library
In my project I'm using two inputs for set card expiry. First for month, second for year. How about add support for this?

input fields tagged with cc directives dont respond to automation (selenium, katalon etc)

We tried many ways to set the credit card expiry and cvc field using katalon and selenium commands, however the angular model would not update with the value sent in.

There are many scenarios we have to test for when implementing 3d secure, and we would like to automate them. Having the credit card fields not filled in is preventing this effort.

Let extend card types

Hi, i'm Vitor and i'm from Brazil.
We have some credit cards that doesn't exist in this library.
There is a way to extend the actual cardTypes array?
This will help me a lot.

Thanks!

Not validating visa cards

Hi @nogorilla. The library works great and validates all types of cards except for Visa cards. I have checked Credit-card.ts file an it contains visa as available card types that are supported. However it doesn't work for me. Could you please help me?

Angular 9 (Ivy) issue

ERROR in node_modules/angular-cc-library/lib/directives.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of CCPageModule, but could not be resolved to an NgModule class

Angular CLI: 9.0.1
Node: 10.16.0
OS: darwin x64

Angular: 9.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.25
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               8.1.3
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Add custom card validations

How to add Custom Validation, like I have Rupay card in my country so I want to add it.

Support Angular 10

When using Angular 10, I get these console warnings:

npm WARN [email protected] requires a peer of @angular/common@>6 <10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>6 <10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself.

The library seems to work fine with Angular 10, despite the warnings.

_this.target.selectionStart = _this.target.selectionEnd causes IE11 to refocus the input

When clicking between inputs directly and the input value is empty, the code _this.target.selectionStart = _this.target.selectionEnd causes IE11 to refocus the previous input.

This can lead to an infinite loop of focusing if clicking between two inputs using this modules directives.

What does this code do? I guess it's to do with setting the cursor position post formatting?

Forcing exp date for only one specific format

I know exp date validators support both ways: MM/YY and MM/YYYY. But, Is there a way to force the validator to only validate one format? I 'd like to use only MM/YYYY in my project

v2 broke compatibilty with Ionic

the v2 update broke compatibility with Ionic as commented on #26

v1.2.5

with ion-input

v2.0.0

Directives have no effect on ion-input but work well on input

How to display the CC Type?

Yours is the only credit card validation package I've found that actually works in Angular2!

I have a question, you have a place in the HTML which seems like it's supposed to show the credit card type (Visa, MC, etc.), in...

[<span class="cc-brand"></span>]

... but it doesn't get set when the credit card number is entered. How can I do this?

And on another note, I found many errors in the demo code when I cloned this. This is a nice package, but the demo needs fixing.

Here's a list of what I found that needs fixing in the demo:

app.component.ts

The following import statement is incorrect...

import { CreditCardValidator } from '../../src/validators/credit-card.validator';

It should be...

import { CreditCardValidator } from '../../src/credit-card.validator';

app.html

The page produces many errors, caused by incorrect form implementations. It looks like you might have started out using the template method, and then moved to the reactive form method and didn't change all the necessary statements.

Since you are using the FormBuilder functions, (formControlName), the 'form' element needs to change from this...

<form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>

... to this.

<form [formGroup]="demoForm" (ngSubmit)="onSubmit(demoForm)" novalidate>

Then in your component, you need to update the variable from form:FormGroup to demoForm:FormGroup. The reference variable to create the FormGroup must also be updated.

this.demoForm = this._fb.group({ ...

Then back in the app.html, any reference to the 'form' variable needs to be updated to 'demoForm'.

And lastly in app.html, this line has a typo (expirationDate):

<div *ngIf="!form.controls.expirationDate.valid" class="alert alert-danger">Expiration Date is required</div>

Which should be:

<div *ngIf="!demoForm.controls.expDate.valid" class="alert alert-danger">Expiration Date is required</div>

OK, that being said, this is all just part of the demo and not your actual library which does work very nicely, but a good demo improves your impression with developers. :^)

Cvv & Exp date not validating

Cvv & Exp date not validating maxlength.

note: using Ionic 5

backspace issue with Amex and Dinersclub

Backspace does not work with Amex and Dinersclub.

Currently, the only way to delete Amex and Dinersclub card number is to:

• type all the numbers
• select All (command + A) and delete

Can't delete digits when cursor at end of numeric section

Say you have entered the value 2345 0000 0000 0000. If you position the cursor just after the 5, delete doesn't work (backspace always works fine). Delete only works when there is a number directly to the right of the cursor, not a space.

Looking for maintainers

Looking for help to maintain or take ownership of this project. I no longer work with Angular so I do not use or keep up with any changes. As many still use this library, I'm happy to let it go to someone else who has the time and ability to keep it active.

ccNumber directive is only returning first four for control value, making validateCCNumber return that the field is invalid

Here's a stackblitz with the example - https://stackblitz.com/edit/angular-sdsgck

With a log here, control.value is always only the first four digits. I haven't been able to find where in the directive this is happening (everywhere I log has all the digits as expected) but with the directive removed, validateCCNumber works great.

Will update as I find more.

I want to get the card type string.

<input autocomplete="cc-number" cc-input="" ccnumber="" class="input-lg form-control cc-number ng-invalid visa identified ng-dirty ng-touched" formcontrolname="creditCard" id="cc-number" placeholder="Card Number" type="tel" ng-reflect-name="creditCard" ng-reflect-model="4242 4">

so i want to capture that visa string

ccCVC directive is different from the example provided

In your example you mentioned: ccCvc
<input id="cc-cvc" type="tel" autocomplete="off" ccCvc>

But in your directive, it's looking for: ccCVC

This causes a confusion!

Working with Ionic

Has anyone managed to use it with Ionic ?

I have imported every modules as I'm used to do, but the directive has no affect at all.

I'm using a regular , not the .

validateCCNumber IE browser compatibility issues

The validator validateCCNumber is not compatible with IE because he use String.prototype.includes.

Need replace this function by indexOf() !== -1

ionic2: bulding for production error

[23:52:21]  build prod failed: Unexpected value 'CreditCardDirectivesModule' imported by the module 'AppModule' 
[23:52:21]  ionic-app-script task: "build" 
[23:52:21]  Error: Unexpected value 'CreditCardDirectivesModule' imported by the module 'AppModule' 
Error: Unexpected value 'CreditCardDirectivesModule' imported by the module 'AppModule'
    at /Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:14675:33
    at Array.forEach (native)
    at CompileMetadataResolver._loadNgModuleMetadata (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:14660:51)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
    at addNgModule (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
    at /Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)
    at analyzeNgModules (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:12700:16)
    at analyzeAndValidateNgModules (/Users/thomas/Documents/thomas/projects/ionic/ionic2/LiloTime/node_modules/@angular/compiler/bundles/compiler.umd.js:12704:20)

Feature request: emit credit card brand name as an event

Add @Ouput() to the directive to emit the indentified credit card brand, ie. like below:

<input matInput formControlName="number" placeholder="Card Number"
    type="tel" autocomplete="cc-number" ccNumber required (onCardType)="doStuff($event)"/>

Right now, credit card brand is assigned as a class, so one needs to cycle through the possible brand classes, like so:

  @ViewChild(CreditCardFormatDirective) ccCardInput: CreditCardFormatDirective;

  get cardBrand() {
    if (!this.ccCardInput) {
      return;
    }

    const input = <HTMLInputElement>this.ccCardInput.target;
    const cards = CreditCard.cards();

    if (input.classList.contains('identified')) {
      for (const c of cards) {
        if (input.classList.contains(c.type)) {
          return c.type;
        }
      }
    }
  }

Make AOT Ready

We Can't build prod version using AOT

What's the intent of the "cc-brand" class?

In the sample project, there's a "cc-brand" class
[<span class="cc-brand"></span>]

What's the purpose of it? I was hoping it would show the appropriate image based on the card type - but it doesn't and I was wondering it's intent.. Please let me know.

Number field prevents "Select All" at Desktop

On Destop "Select All" keyboard press (Ctrl + A) cancels selection and puts cursor at the end of the input tag.

Expiry date format as MM/YY

Hi,
I want to have MM/YY , but i get only MM/YYYY below is my code

<label for="cc-exp-date">Expiry Date</label>
          <input  formControlName="cardDate" class="form-control"
                  id="cc-exp-date" type="tel" ccExp/>
<span *ngIf="!purchaseForm.get('cardDate').valid && purchaseForm.get('cardDate').touched">
      Please enter expiry date
        </span>

'cardDate': new FormControl(null, [CreditCardValidator.validateExpDate,Validators.required])

It doesn't support some card number combinations

I've noticed in the file "credit-card.ts" this code
{ type: 'jcb', patterns: [35], format: defaultFormat, length: [16], cvvLength: [3], luhn: true }
but I've found a next information:

JCB: ^(?:2131|1800|35[0-9]{3})[0-9]{3,}$ JCB cards begin with 2131, 1800 or 35.
Credit card type

Provide pipes

Currently we have to build our own pipes to call the formatter functions... so it'd be great if the library provide this functionality.

UnionPay expressPay card validation problem

UnionPay ExpressPay card, (19 digits number) doesn't pass validation. A test card from Adyen 8171 9999 0000 0000 021, that can be found here: https://docs.adyen.com/developers/test-cards/test-card-numbers#unionpaysecureplusdebitcard doesn't validate.

internet Explorer