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 |