Responsive, Angular payment card component

Customizable component with zero external dependencies.


Install

``bash
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.

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

Afterwards, you can use the component within your templates.

`html


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


// Handling event emitter
(formSaved)="processPayment(cc)">

`

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

`ts
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

$3

`bash
yarn // or
npm install
`

$3

`bash
yarn start // or
npm start
`

$3

`bash
npm test
``

License

MIT