Press "Enter" to skip to content

💳 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

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

Supported card types

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

How to make use of it:

Install:

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.

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

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.