ngx-payment-inputs

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

Install

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

NPM

npm i --save ngx-payment-inputs

Yarn

yarn add ngx-payment-inputs

Usage

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

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

// rest of code...

@NgModule({
  declarations: [AppComponent],
  imports: [
      BrowserModule,
      ReactiveFormsModule,
+     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 = this.fb.group({
      cardNumber: [null],
      cardCvc: [null],
      cardValidate: [null],
    });
  }

  // rest of code...

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

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

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

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

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 = this.fb.group({
      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';

@Component({
  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.

Contributing

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

WIP 🚧

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

License

MIT @ Rai Siqueira