Customizable component with zero external dependencies.
npm install ng-payment-card










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