Credit Card to Angular

---

See Demo Page

---

Versions

---

Angular	Credit Card
>= 11	v1.x

---

Getting Started

Step 1: Install @delrio/credit-card

NPM:

npm install --save @delrio/credit-card

Step 2: Import the CreditCardModule module:

import { CreditCardModule } from '@delrio/credit-card';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [CreditCardModule.forRoot({}), FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3 (Optional): Configuration Module

import { CreditCardModule } from '@delrio/credit-card';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    CreditCardModule.forRoot({
     cardFront: {
        labelInitialCardNumber: 'XXXX XXXX XXXX XXXX',
        labelInitialDateValid: '**/**',
        labelInitialPersonName: 'NOMBRE DE LA PERSONA',
        labelMonthYear: 'AÑO/MES',
        labelValidUntilText: 'VALIDO HASTA'
     },
     cardBack: {
        labelInitialCVC: '***',
        labelTextFooter: 'Todos los derechos reservados'
     }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Define options in your consuming component:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CreditCardComponent } from '@delrio/credit-card';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  form!: FormGroup;

  @ViewChild('creditCardComponent', { static: true })
  creditCardComponent!: CreditCardComponent

  @ViewChild('creditCardNumberRef', { static: true })
  creditCardNumberRef!: ElementRef;

  @ViewChild('creditCardPersonNameRef', { static: true })
  creditCardPersonNameRef!: ElementRef;

  @ViewChild('creditCardDateValidRef', { static: true })
  creditCardDateValidRef!: ElementRef;

  @ViewChild('creditCardCVC', { static: true })
  creditCardCVC!: ElementRef;


  constructor() { }

  ngOnInit(): void {
    this.form = new FormGroup({
      cardNumber: new FormControl('378282246310005', Validators.required),
      cardPersonName: new FormControl('Juan Perez', Validators.required),
      validDate: new FormControl('10/20', Validators.required),
      cvc: new FormControl('123', Validators.required)
    })

    // Assign Refs of input controls
    this.creditCardComponent.creditCardNumberInputRef = this.creditCardNumberRef;
    this.creditCardComponent.creditCardDateValidInputRef = this.creditCardDateValidRef;
    this.creditCardComponent.creditCardPersonNameInputRef = this.creditCardPersonNameRef;
    this.creditCardComponent.creditCardCVCInputRef = this.creditCardCVC;
  }

}

In template use d-credit-card component with your options

<d-credit-card #creditCardComponent></d-credit-card>
    <form [formGroup]="form">
      <label for="creditcard_number">Número de tarjeta</label>
      <input type="text" id="creditcard_number" formControlName="cardNumber" #creditCardNumberRef> <br>

      <label for="creditcard_person_name">Nombre</label>
      <input type="text" id="creditcard_person_name" formControlName="cardPersonName" #creditCardPersonNameRef> <br>

      <label for="creditcard_date_valid">Fecha de Vencimiento</label>
      <input type="text" id="creditcard_date_valid" formControlName="validDate" #creditCardDateValidRef> <br>

      <label for="creditcard_date_valid">CVC</label>
      <input type="text" id="creditcard_cvc" formControlName="cvc" #creditCardCVC>
    </form>

API

INPUTS

Input	Type	Default	Required	Description
[labelInitialCardNumber]	string	•••• •••• •••• ••••	no	Show the placeholder text of the card number
[labelInitialDateValid]	string	••/••	no	Show the placeholder text of the card date valid
[labelInitialPersonName]	string	Nombre de la persona	no	Show the placeholder text of the card name person
[labelMonthYear]	string	MM/YY	no	Show the placeholder text of the card date month year
[labelValidUntilText]	string	Valido Hasta	no	Show the placeholder text of the card valid until
[labelInitialCVC]	string	•••	no	Show the placeholder text label initial CVC
[labelTextFooter]	string	This card has been issued by Oscar Del Rio and is licensed for anyone to use anywhere for free.	no	Show the placeholder text of Label Text Footer Card Back
[creditCardNumberInputRef]	string	null	yes	Element Ref of the input to bind card number
[creditCardPersonNameInputRef]	string	null	yes	Element Ref of the input to bind to name person
[creditCardDateValidInputRef]	string	null	yes	Element Ref of the input to bind to valid to

OUTPUTS

Output	Description
(creditFoundName)	Name of the card type found