Responsive, Angular payment card component

Customizable component with zero external dependencies.

Install

yarn add ng-payment-card //or
npm install --save ng-payment-card

Version 0.0.8 is no longer compatible with Angular 2 - 4 due to TypeScript upgrade

For Angular 2 - 4, please use version 0.0.7

Features

Neat design
Validation of all fields (including Luhn validation) - that can be switched off
Displaying appropriate card provider's name based on card number
Fully responsive
No dependencies (apart from Angular itself)
Angular 2 - 7 compatible
Built with BEM methodology and SCSS
Fully customizable
100% test coverage level
Built with statical code analysis tools

Usage

After installing the component as a dependency, import it into you Angular module.

import { NgPaymentCardModule } from 'ng-payment-card';

Afterwards, you can use the component within your templates.

<ng-payment-card></ng-payment-card>

// Setting custom validation messages
<ng-payment-card
  [ccNumMissingTxt]='Please provide card number'
  [cardExpiredTxt]='Payment card has expired'>
</ng-payment-card>

// Handling event emitter
<ng-payment-card
  (formSaved)="processPayment(cc)">
</ng-payment-card>

Upon submitting the form, component will emit object in the following format:

cardNumber: string;
cardHolder: string;
expirationMonth: string;
expirationYear: string;
ccv: number;

Full list of available inputs

Supported card types

American Express
Diners
Diners Carte Blanche
Discover Club
China UnionPay
JCB
Laser
MAESTRO
Mastercard
Visa Electron
Visa

Development

Installation

yarn // or
npm install

Running

yarn start // or
npm start

Testing

npm test

License

MIT