Payment Method Library

Angular library providing credit card input directives with formatting and validation using Cleave.js and card-validator.

Installation

npm install @corvesta/payment-method-lib cleave.js card-validator

Usage

Import Directives

import { CreditCardNumberDirective, CreditCardExpiryDirective, CreditCardCVCDirective, CreditCardValidationService } from '@corvesta/payment-method-lib';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [ReactiveFormsModule, CreditCardNumberDirective, CreditCardExpiryDirective, CreditCardCVCDirective],
  template: `
    <form [formGroup]="form">
      <input formControlName="cardNumber" ccNumber #ccNumber="ccNumber" placeholder="1234 5678 9012 3456">
      <div>Card Type: {{ ccNumber.resolvedScheme$ | async }}</div>
      
      <input formControlName="expiry" ccExp placeholder="MM/YYYY">
      <input formControlName="cvv" ccCVC placeholder="123">
    </form>
  `
})
export class CheckoutComponent {
  form = this.fb.group({
    cardNumber: ['', [this.validator.validateCreditCardNumber]],
    expiry: ['', [this.validator.validateExpirationDate]],
    cvv: ['', [this.validator.validateCVV]]
  });

  constructor(
    private fb: FormBuilder,
    private validator: CreditCardValidationService
  ) {}
}

Directives

ccNumber

• Formats credit card numbers with proper spacing
• Detects card type (Visa, Mastercard, Amex, Discover)
• Exports resolvedScheme$ observable for card type
• Adds CSS classes for card types

ccExp

• Formats expiry date as MM/YYYY
• Handles date input validation

ccCVC

• Limits input to 4 digits
• Numeric input only

Validation Service

CreditCardValidationService

• validateCreditCardNumber: Validates card number format
• validateExpirationDate: Validates expiry date
• validateCVV: Validates CVV format
• getCardType: Returns card type for given number

CSS Classes

Card type classes are automatically added to inputs:

• .visa, .mastercard, .amex, .discover
• .identified (when card type is detected)
• .unknown (when card type is not detected)