CreditCard

This library was generated with Angular CLI *version 10.0.14.

Installation

npm install credit-card-component jquery --save

Export Jquery in angular.json

    "scripts": [
       "./node_modules/jquery/dist/jquery.min.js"
    ]

Usage

Import credit-card module

import { CreditCardModule } from 'credit-card-component';

@NgModule({
  imports: [CreditCardModule ]
})

Then in HTML

<lib-credit-card (returnCard)="returnCard($event)" [cards]="cards"></lib-credit-card>

where


export class AppComponent {
  public cards: any = [
    {
      name: "mastercard",
      color: "#0061A8",
      src:
        "https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png"
    },
    {
      name: "visa",
      color: "#E2CB38",
      src:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2000px-Visa_Inc._logo.svg.png"
    },
    {
      name: "dinersclub",
      color: "#888",
      src:
        "https://upload.wikimedia.org/wikipedia/commons/a/a6/Diners_Club_Logo3.svg"
    },
    {
      name: "americanExpress",
      color: "#108168",
      src:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/600px-American_Express_logo.svg.png"
    },
    {
      name: "discover",
      color: "#86B8CF",
      src:
        "https://lendedu.com/wp-content/uploads/2016/03/discover-it-for-students-credit-card.jpg"
    },
    {
      name: "dankort",
      color: "#0061A8",
      src:
        "https://upload.wikimedia.org/wikipedia/commons/5/51/Dankort_logo.png"
    }
  ];
  public valueCard: any;

  constructor() { }

  ngOnInit() {}

  public returnCard(event): void{
    this.valueCard = JSON.stringify(event);
  }

  public setValues(){
    console.log(this.valueCard);
  }

}

API

Inputs

Input	Type	Required	Description
cards	`Array`	yes	list with the configuration of accepted cards

Outputs

Output	Description
(returnCard)	Object with card values

Configuration

Input	Type	Required	Description
name	`string`	yes	company name
color	`string`	yes	background color
src	`sting`	yes	company image

Info

4: VISA, 51 -> 55: MasterCard, 36-38-39: DinersClub, 34-37: American Express, 65: Discover, 5019: dankort

Github

https://github.com/penalozajohn25/Library-Card-Credit

Package detail

credit-card-component

readme