💳 Responsive Credit Card Component For Angular

Angular Payment Card is a responsive and customizable credit card component with zero external dependencies.

angular credit card component, angular credit card ui, angular credit cards demo, ng payment card, ngx credit cards demo, angular 6 credit card form


  • 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

Supported card types

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

How to make use of it:


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

1. After installing the component as a dependency element, import it into your Angular module.

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

2. Then, you can use the component inside your templates.


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

// Handling event emitter

3. When the form is submitted, the component will issue an object in the following format:

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

Responsive Credit Card Component, Angular payment card Plugin/Github

See Demo And Download

Official Website(Bartosz-D3V): Click Here

This superior jQuery/javascript plugin is developed by Bartosz-D3V. For extra Advanced Usages, please go to the official website.

Related Posts


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Responsive Image Gallery & Lightbox Plugin using Bootstrap

Bootstrap Gallery With this script and Bootstrap 4, you can easily create an image gallery. You just have to put the thumbnails on the page. The BS Gallery…


Bootstrap 5 Floating Label Form Controls Library

A bootstrap floating label is a CSS / SCSS library that adds floating labels to Bootstrap 5 or Bootstrap 4 form controls such as input, text area,…