/ng-payment-card

:credit_card: Responsive credit card component for Angular.

Primary LanguageTypeScriptMIT LicenseMIT

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

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