TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published


A set of Angular Directives to validate and format credit card inputs.

npm npm bundle size npm


Before install the library, check if your Angular version are >=10.0.0


npm i --save ngx-payment-inputs


yarn add ngx-payment-inputs


Import the main module into your feature module (example.: app.module.ts):

import { PaymentInputsModule } from 'ngx-payment-inputs';

// rest of code...

  declarations: [AppComponent],
  imports: [
+     PaymentInputsModule,
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Now, go to your formGroup (or FormControl), and create all controls necessaries for usage (card number, card expiry date, card cvc).

// your feature component
// rest of code...

  ngOnInit(): void {
    this.form ={
      cardNumber: [null],
      cardCvc: [null],
      cardValidate: [null],

  // rest of code...

Into your HTML, add jstCardNumber, jstCardExpireDate and jstCardCvv for respectives inputs.

<form [formGroup]="form">
    <label for="card-number">Card Number</label>
    <input id="card-number" formControlName="cardNumber" jstCardNumber />

    <label for="card-date">Card Date</label>
    <input id="card-date" formControlName="cardValidate" jstCardExpireDate />

    <label for="card-cvv">Card CVV</label>
    <input id="card-cvv" formControlName="cardCvc" jstCardCvv />

Using custom validators

ngx-payment-inputs provides three custom validators to help to show errors form all credit card inputs.

  • PaymentInputValidators.cardNumber()
  • PaymentInputValidators.expiryDate()
  • PaymentInputValidators.CVC()

Example of usage:

// rest of code
import { CardTypeService, PaymentInputValidators } from 'ngx-payment-inputs';
// ...

  ngOnInit(): void {
    this.form ={
      cardNumber: [null, [PaymentInputValidators.cardNumber()],
      cardCvc: [null, [PaymentInputValidators.expiryDate()],
      cardValidate: [null, [PaymentInputValidators.CVC()],

Hacking your forms with ngx-payment-inputs service

This library not provide a component (yet 😏) with all credit card inputs, instead of this, provide three Angular Directives that made all job for you, and let the developer free to customize the input, but you can improve the user experience showing the credit card brand, for example.

To help the developer, we provide a service that exposes the card type as observable, see the below example:

// rest of code
import { CardTypeService } from 'ngx-payment-inputs';

  selector: 'jst-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
export class AppComponent implements OnInit {
  type: string;

  constructor(private cardTypeService: CardTypeService) {}

  ngOnInit(): void {
    this.cardTypeService.cardType.subscribe((type) => (this.type = type.type));

With this, you can show a credit card brand into your HTML based into type returned from our service.

See all credit card types (all values are lowercase):

  • visa
  • mastercard
  • amex
  • dinersclub
  • discover
  • jcb
  • unionpay
  • maestro
  • elo
  • hipercard

Public APIs

List with all public api exposed to use or extends:

API Type Description
PaymentInputsModule Module Module for Payment Inputs Directives and services
jstCardNumber Directive Formatter for card. number
jstCardExpireDate Directive Formatter for card expiry date .
jstCardCvv Directive Formatter for card cvc.
CardTypeService Service Service with all card input refs and card type.
CardTypesModel Interface/Type definition Type definition for Card Type list (internal list used for identify a card by number).
PaymentInputValidators Class Class with validators for: Card number, card expiry date and card CVC.


Fork the project and help us to improve the project.

Install dependencies with NPM: npm i. The project are into packages folder.

To build the project, run npm run build:payment-inputs, the artifact goes to dist/packages folder.

Running unit tests


Run nx test payment-inputs to execute the unit tests.


MIT @ Rai Siqueira


npm i ngx-payment-inputs

DownloadsWeekly Downloads






Unpacked Size

432 kB

Total Files


Last publish


  • rsiqueira