Responsive, Angular payment card component

Customizable component with zero external dependencies.

GitHub GitHub Build Status Build status codecov David David code style: prettier Renovate enabled PRs Welcome


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


  • 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


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.


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

// Handling event emitter

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
  • Mastercard
  • Visa Electron
  • Visa



yarn // or
npm install


yarn start // or
npm start


npm test



Ng Payment Card

:credit_card: Responsive credit card component for Angular.

Ng Payment Card Info

⭐ Stars 22
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 3 years ago
🐞 Open Issues 14
➗ Star-Issue Ratio 2
😎 Author Bartosz-D3V