0
# Credit Card Validation
1

2
Credit card format validation for major card types including Visa, MasterCard, American Express, Discover, JCB, Maestro, and Diners Club using industry-standard regex patterns.
3

4
## Capabilities
5

6
### Generic Credit Card Validation
7

8
Validates that the input matches any of the supported credit card formats.
9

10
```typescript { .api }
11
/**
12
 * Validates any supported credit card format
13
 * @param control - AbstractControl to validate
14
 * @returns ValidationErrors if invalid, null if valid
15
 */
16
static isCreditCard(control: AbstractControl): ValidationErrors | null;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { CreditCardValidators } from "ngx-validators";
23
import { FormControl } from "@angular/forms";
24

25
const control = new FormControl('', CreditCardValidators.isCreditCard);
26

27
// Valid: "4111111111111111" (Visa), "5555555555554444" (MasterCard)
28
// Invalid: "1234567890123456", "invalid-card-number"
29
```
30

31
**Supported Card Types:** Visa, MasterCard, American Express, Discover, JCB, Maestro, Diners Club
32

33
**Error Object:**
34
```typescript
35
{ 
36
  creditcard: true 
37
}
38
```
39

40
### Visa Card Validation
41

42
Validates Visa card format (starts with 4, 13 or 16 digits).
43

44
```typescript { .api }
45
/**
46
 * Validates Visa credit card format
47
 * @param control - AbstractControl to validate
48
 * @returns ValidationErrors if invalid, null if valid
49
 */
50
static visa(control: AbstractControl): ValidationErrors | null;
51
```
52

53
**Usage Example:**
54

55
```typescript
56
const control = new FormControl('', CreditCardValidators.visa);
57

58
// Valid: "4111111111111111", "4000000000000002"
59
// Invalid: "5555555555554444" (MasterCard), "invalid"
60
```
61

62
**Pattern:** `^(?:4[0-9]{12})(?:[0-9]{3})?$`
63

64
**Error Object:**
65
```typescript
66
{ 
67
  visa: true 
68
}
69
```
70

71
### MasterCard Validation
72

73
Validates MasterCard format (starts with 5[1-5] or 2[2-7], 16 digits).
74

75
```typescript { .api }
76
/**
77
 * Validates MasterCard credit card format
78
 * @param control - AbstractControl to validate
79
 * @returns ValidationErrors if invalid, null if valid
80
 */
81
static mastercard(control: AbstractControl): ValidationErrors | null;
82
```
83

84
**Usage Example:**
85

86
```typescript
87
const control = new FormControl('', CreditCardValidators.mastercard);
88

89
// Valid: "5555555555554444", "2223000048400011"
90
// Invalid: "4111111111111111" (Visa), "invalid"
91
```
92

93
**Pattern:** `^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$`
94

95
**Error Object:**
96
```typescript
97
{ 
98
  mastercard: true 
99
}
100
```
101

102
### American Express Validation
103

104
Validates American Express format (starts with 34 or 37, 15 digits).
105

106
```typescript { .api }
107
/**
108
 * Validates American Express credit card format
109
 * @param control - AbstractControl to validate
110
 * @returns ValidationErrors if invalid, null if valid
111
 */
112
static americanExpress(control: AbstractControl): ValidationErrors | null;
113
```
114

115
**Usage Example:**
116

117
```typescript
118
const control = new FormControl('', CreditCardValidators.americanExpress);
119

120
// Valid: "378282246310005", "371449635398431"
121
// Invalid: "4111111111111111" (Visa), "invalid"
122
```
123

124
**Pattern:** `^(?:3[47][0-9]{13})$`
125

126
**Error Object:**
127
```typescript
128
{ 
129
  americanExpress: true 
130
}
131
```
132

133
### Discover Card Validation
134

135
Validates Discover card format (starts with 6011 or 65, 16 digits).
136

137
```typescript { .api }
138
/**
139
 * Validates Discover credit card format
140
 * @param control - AbstractControl to validate
141
 * @returns ValidationErrors if invalid, null if valid
142
 */
143
static discover(control: AbstractControl): ValidationErrors | null;
144
```
145

146
**Usage Example:**
147

148
```typescript
149
const control = new FormControl('', CreditCardValidators.discover);
150

151
// Valid: "6011111111111117", "6500000000000002"
152
// Invalid: "4111111111111111" (Visa), "invalid"
153
```
154

155
**Pattern:** `^(?:6(?:011|5[0-9]{2})(?:[0-9]{12}))$`
156

157
**Error Object:**
158
```typescript
159
{ 
160
  discover: true 
161
}
162
```
163

164
### JCB Card Validation
165

166
Validates JCB card format (starts with 2131, 1800, or 35, variable length).
167

168
```typescript { .api }
169
/**
170
 * Validates JCB credit card format
171
 * @param control - AbstractControl to validate
172
 * @returns ValidationErrors if invalid, null if valid
173
 */
174
static jcb(control: AbstractControl): ValidationErrors | null;
175
```
176

177
**Usage Example:**
178

179
```typescript
180
const control = new FormControl('', CreditCardValidators.jcb);
181

182
// Valid: "3530111333300000", "213100000000000"
183
// Invalid: "4111111111111111" (Visa), "invalid"
184
```
185

186
**Pattern:** `^(?:(?:2131|1800|35\\d{3})\\d{11})$`
187

188
**Error Object:**
189
```typescript
190
{ 
191
  jcb: true 
192
}
193
```
194

195
### Maestro Card Validation
196

197
Validates Maestro card format (starts with 50-69, variable length 12-19 digits).
198

199
```typescript { .api }
200
/**
201
 * Validates Maestro credit card format
202
 * @param control - AbstractControl to validate
203
 * @returns ValidationErrors if invalid, null if valid
204
 */
205
static maestro(control: AbstractControl): ValidationErrors | null;
206
```
207

208
**Usage Example:**
209

210
```typescript
211
const control = new FormControl('', CreditCardValidators.maestro);
212

213
// Valid: "6304000000000000", "5018000000000009"
214
// Invalid: "4111111111111111" (Visa), "invalid"
215
```
216

217
**Pattern:** `^(?:(?:5[0678]\\d\\d|6304|6390|67\\d\\d)\\d{8,15})$`
218

219
**Error Object:**
220
```typescript
221
{ 
222
  maestro: true 
223
}
224
```
225

226
### Diners Club Validation
227

228
Validates Diners Club card format (starts with 30[0-5] or 3[68], 14 digits).
229

230
```typescript { .api }
231
/**
232
 * Validates Diners Club credit card format
233
 * @param control - AbstractControl to validate
234
 * @returns ValidationErrors if invalid, null if valid
235
 */
236
static dinersclub(control: AbstractControl): ValidationErrors | null;
237
```
238

239
**Usage Example:**
240

241
```typescript
242
const control = new FormControl('', CreditCardValidators.dinersclub);
243

244
// Valid: "30569309025904", "38520000023237"
245
// Invalid: "4111111111111111" (Visa), "invalid"
246
```
247

248
**Pattern:** `^(?:3(?:0[0-5]|[68][0-9])[0-9]{11})$`
249

250
**Error Object:**
251
```typescript
252
{ 
253
  dinersclub: true 
254
}
255
```
256

257
## Usage Examples
258

259
### Reactive Forms
260

261
```typescript
262
import { FormBuilder, FormGroup } from "@angular/forms";
263
import { CreditCardValidators } from "ngx-validators";
264

265
export class PaymentComponent {
266
  paymentForm: FormGroup;
267

268
  constructor(private fb: FormBuilder) {
269
    this.paymentForm = this.fb.group({
270
      // Accept any valid credit card
271
      cardNumber: ['', [CreditCardValidators.isCreditCard]],
272
      
273
      // Require specific card type
274
      visaCard: ['', [CreditCardValidators.visa]],
275
      mastercardOnly: ['', [CreditCardValidators.mastercard]],
276
      amexOnly: ['', [CreditCardValidators.americanExpress]]
277
    });
278
  }
279
  
280
  // Check specific card type
281
  getCardType(cardNumber: string): string {
282
    if (CreditCardValidators.visa({ value: cardNumber } as AbstractControl) === null) {
283
      return 'Visa';
284
    }
285
    if (CreditCardValidators.mastercard({ value: cardNumber } as AbstractControl) === null) {
286
      return 'MasterCard';
287
    }
288
    if (CreditCardValidators.americanExpress({ value: cardNumber } as AbstractControl) === null) {
289
      return 'American Express';
290
    }
291
    return 'Unknown';
292
  }
293
}
294
```
295

296
### Template-Driven Forms
297

298
```html
299
<form>
300
  <!-- Generic credit card validation -->
301
  <input 
302
    type="text"
303
    name="cardNumber"
304
    [(ngModel)]="payment.cardNumber"
305
    #cardNumber="ngModel"
306
    creditCardValidator
307
    placeholder="Enter credit card number">
308
  
309
  <div *ngIf="cardNumber.errors?.creditcard">
310
    Please enter a valid credit card number.
311
  </div>
312

313
  <!-- Specific card type validation -->
314
  <input 
315
    type="text"
316
    name="visaCard"
317
    [(ngModel)]="payment.visaCard"
318
    #visaCard="ngModel"
319
    visaValidator
320
    placeholder="Visa card only">
321
  
322
  <div *ngIf="visaCard.errors?.visa">
323
    Please enter a valid Visa card number.
324
  </div>
325
</form>
326
```
327

328
### Card Type Detection
329

330
```typescript
331
import { CreditCardValidators } from "ngx-validators";
332

333
class CardTypeDetector {
334
  detectCardType(cardNumber: string): string[] {
335
    const types: string[] = [];
336
    const control = { value: cardNumber } as AbstractControl;
337
    
338
    if (CreditCardValidators.visa(control) === null) types.push('Visa');
339
    if (CreditCardValidators.mastercard(control) === null) types.push('MasterCard');
340
    if (CreditCardValidators.americanExpress(control) === null) types.push('American Express');
341
    if (CreditCardValidators.discover(control) === null) types.push('Discover');
342
    if (CreditCardValidators.jcb(control) === null) types.push('JCB');
343
    if (CreditCardValidators.maestro(control) === null) types.push('Maestro');
344
    if (CreditCardValidators.dinersclub(control) === null) types.push('Diners Club');
345
    
346
    return types;
347
  }
348
}
349
```
350

351
## Template-Driven Forms Support
352

353
For template-driven forms, use the `CreditCardValidatorDirective`:
354

355
```html
356
<input 
357
  type="text"
358
  name="creditCard"
359
  [(ngModel)]="user.creditCard"
360
  #creditCard="ngModel"
361
  creditCardValidator>
362

363
<div *ngIf="creditCard.errors?.creditcard">
364
  Please enter a valid credit card number.
365
</div>
366
```
367

368
## Important Notes
369

370
1. **Format Only**: These validators only check the format/pattern of credit card numbers, not whether they are actual valid, active cards.
371

372
2. **No Luhn Algorithm**: The validators do not implement the Luhn algorithm checksum validation.
373

374
3. **Number Input**: Card numbers should be provided as strings of digits without spaces, dashes, or other formatting.
375

376
4. **Test Card Numbers**: Use official test card numbers for development:
377
   - Visa: 4111111111111111, 4000000000000002
378
   - MasterCard: 5555555555554444, 2223000048400011
379
   - American Express: 378282246310005, 371449635398431
380

381
5. **Security**: Never store or log actual credit card numbers. Always use secure payment processing services.