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()],
});
}
ngx-payment-inputs
service
Hacking your forms with This library not provide a component (yet
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