Angular library providing credit card input directives with formatting and validation using Cleave.js and card-validator.
npm install @corvesta/payment-method-libAngular library providing credit card input directives with formatting and validation using Cleave.js and card-validator.
``bash`
npm install @corvesta/payment-method-lib cleave.js card-validator
`typescript
import { CreditCardNumberDirective, CreditCardExpiryDirective, CreditCardCVCDirective, CreditCardValidationService } from '@corvesta/payment-method-lib';
@Component({
selector: 'app-checkout',
standalone: true,
imports: [ReactiveFormsModule, CreditCardNumberDirective, CreditCardExpiryDirective, CreditCardCVCDirective],
template:
})
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
$3
- Formats credit card numbers with proper spacing
- Detects card type (Visa, Mastercard, Amex, Discover)
- Exports observable for card type
- Adds CSS classes for card types$3
- Formats expiry date as MM/YYYY
- Handles date input validation$3
- Limits input to 4 digits
- Numeric input onlyValidation Service
$3
-
validateCreditCardNumber: Validates card number format
- validateExpirationDate: Validates expiry date
- validateCVV: Validates CVV format
- getCardType: Returns card type for given numberCSS Classes
Card type classes are automatically added to inputs:
-
.visa, .mastercard, .amex, .discover
- (when card type is detected)
- .unknown` (when card type is not detected)