0.0.8 • Published 4 years ago
credit-card-component v0.0.8
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