UNPKG

12.9 kBMarkdownView Raw
1# Credit Card Validator [![Build Status](https://github.com/braintree/card-validator/workflows/Unit%20Tests/badge.svg)](https://github.com/braintree/card-validator/actions?query=workflow%3A%22Unit+Tests%22) [![npm version](https://badge.fury.io/js/card-validator.svg)](http://badge.fury.io/js/card-validator)
2
3Credit Card Validator provides validation utilities for credit card data inputs. It is designed as a CommonJS module for use in Node.js, io.js, or the [browser](http://browserify.org/). It includes first class support for 'potential' validity so you can use it to present appropriate UI to your user as they type.
4
5A typical use case in a credit card form is to notify the user if the data they are entering is invalid. In a credit card field, entering “411” is not necessarily valid for submission, but it is still potentially valid. Conversely, if a user enters “41x” that value can no longer pass strict validation and you can provide a response immediately.
6
7Credit Card Validator will also provide a determined card type (using [credit-card-type](https://github.com/braintree/credit-card-type)). This is useful for scenarios in which you wish to render an accompanying payment method icon (Visa, MasterCard, etc.). Additionally, by having access to the current card type, you can better manage the state of your credit card form as a whole. For example, if you detect a user is entering (or has entered) an American Express card number, you can update the `maxlength` attribute of your `CVV` input element from 3 to 4 and even update the corresponding `label` from 'CVV' to 'CID'.
8
9## Download
10
11You can install `card-validator` through `npm`.
12
13```
14npm install card-validator
15```
16
17## Example
18
19### Using a CommonJS build tool (browserify, webpack, etc)
20
21```javascript
22var valid = require("card-validator");
23
24var numberValidation = valid.number("4111");
25
26if (!numberValidation.isPotentiallyValid) {
27 renderInvalidCardNumber();
28}
29
30if (numberValidation.card) {
31 console.log(numberValidation.card.type); // 'visa'
32}
33```
34
35## API
36
37### `var valid = require('card-validator');`
38
39---
40
41#### `valid.number(value: string, [options: object]): object`
42
43```javascript
44{
45 card: {
46 niceType: 'American Express',
47 type: 'american-express',
48 gaps: [4, 10],
49 lengths: [15],
50 code: {name: 'CID', size: 4}
51 },
52 isPotentiallyValid: true, // if false, indicates there is no way the card could be valid
53 isValid: true // if true, number is valid for submission
54}
55```
56
57You can optionally pass `luhnValidateUnionPay` as a property of an object as a second argument. This will override the default behavior to ignore luhn validity of UnionPay cards.
58
59```javascript
60valid.number(<Luhn Invalid UnionPay Card Number>, {luhnValidateUnionPay: true});
61
62{
63 card: {
64 niceType: 'UnionPay',
65 type: 'unionpay',
66 gaps: [4, 8, 12],
67 lengths: [16, 17, 18, 19],
68 code: {name: 'CVN', size: 3}
69 },
70 isPotentiallyValid: true,
71 isValid: false // Would be true if no options were included
72}
73```
74
75You can optionally pass `maxLength` as a property of an object as a second argument. This will override the default behavior to use the card type's max length property and mark any cards that exceed the max length as invalid.
76
77If a card brand has a normal max length that is shorter than the passed in max length, the validator will use the shorter one. For instance, if a `maxLength` of `16` is provided, the validator will still use `15` as the max length for American Express cards.
78
79You can optionally pass `skipLuhnValidation: true` as a property of an object as a second argument. This will override the default behaviour and will skip the validation of the check digit of the card number using Luhn Algorithm. The `skipLuhnValidation` **should not** be set to `true` in production environment.
80
81```javascript
82valid.number(<Maestro Card with 19 Digits>, {maxLength: 16});
83
84{
85 card: {
86 // Maestro card data
87 },
88 isPotentiallyValid: false,
89 isValid: false
90}
91```
92
93If a valid card type cannot be determined, the `card` field in the response will be `null`.
94
95A fake session where a user is entering a card number may look like:
96
97<table>
98 <thead>
99 <tr>
100 <th colspan=1>Input</th>
101 <th colspan=3>Output</th>
102 <th colspan=2>Suggested Handling</th>
103 </tr>
104 </thead>
105 <thead>
106 <tr>
107 <th>Value</th>
108 <th><code>card.type</code></th>
109 <th><code>isPotentiallyValid</code></th>
110 <th><code>isValid</code></th>
111 <th>Render Invalid UI</th>
112 <th>Allow Submit</th>
113 </tr>
114 </thead>
115 <tbody>
116 <tr>
117 <td><code>''</code></td>
118 <td><code>null</code></td>
119 <td><strong>true</strong></td>
120 <td>false</td>
121 <td>no</td>
122 <td>no</td>
123 </tr>
124 <tr>
125 <td><code>'6'</code></td>
126 <td><code>null</code></td>
127 <td><strong>true</strong></td>
128 <td>false</td>
129 <td>no</td>
130 <td>no</td>
131 </tr>
132 <tr>
133 <td><code>'60'</code></td>
134 <td><code>'discover'</code></td>
135 <td><strong>true</strong></td>
136 <td>false</td>
137 <td>no</td>
138 <td>no</td>
139 </tr>
140 <tr>
141 <td><code>'601'</code></td>
142 <td><code>'discover'</code></td>
143 <td><strong>true</strong></td>
144 <td>false</td>
145 <td>no</td>
146 <td>no</td>
147 </tr>
148 <tr>
149 <td><code>'6011'</code></td>
150 <td><code>'discover'</code></td>
151 <td><strong>true</strong></td>
152 <td>false</td>
153 <td>no</td>
154 <td>no</td>
155 </tr>
156 <tr>
157 <td><code>'601'</code></td>
158 <td><code>'discover'</code></td>
159 <td><strong>true</strong></td>
160 <td>false</td>
161 <td>no</td>
162 <td>no</td>
163 </tr>
164 <tr>
165 <td><code>'60'</code></td>
166 <td><code>'discover'</code></td>
167 <td><strong>true</strong></td>
168 <td>false</td>
169 <td>no</td>
170 <td>no</td>
171 </tr>
172 <tr>
173 <td><code>'6'</code></td>
174 <td><code>null</code></td>
175 <td><strong>true</strong></td>
176 <td>false</td>
177 <td>no</td>
178 <td>no</td>
179 </tr>
180 <tr>
181 <td><code>''</code></td>
182 <td><code>null</code></td>
183 <td><strong>true</strong></td>
184 <td>false</td>
185 <td>no</td>
186 <td>no</td>
187 </tr>
188 <tr>
189 <td><code>'x'</code></td>
190 <td><code>null</code></td>
191 <td>false</td>
192 <td>false</td>
193 <td><strong>yes</strong></td>
194 <td>no</td>
195 </tr>
196 <tr>
197 <td><code>''</code></td>
198 <td><code>null</code></td>
199 <td><strong>true</strong></td>
200 <td>false</td>
201 <td>no</td>
202 <td>no</td>
203 </tr>
204 <tr>
205 <td><code>'4'</code></td>
206 <td><code>'visa'</code></td>
207 <td><strong>true</strong></td>
208 <td>false</td>
209 <td>no</td>
210 <td>no</td>
211 </tr>
212 <tr>
213 <td><code>'41'</code></td>
214 <td><code>'visa'</code></td>
215 <td><strong>true</strong></td>
216 <td>false</td>
217 <td>no</td>
218 <td>no</td>
219 </tr>
220 <tr>
221 <td><code>'411'</code></td>
222 <td><code>'visa'</code></td>
223 <td><strong>true</strong></td>
224 <td>false</td>
225 <td>no</td>
226 <td>no</td>
227 </tr>
228 <tr>
229 <td><code>'4111111111111111'</code></td>
230 <td><code>'visa'</code></td>
231 <td><strong>true</strong></td>
232 <td><strong>true</strong></td>
233 <td>no</td>
234 <td><strong>yes</strong></td>
235 </tr>
236 <tr>
237 <td><code>'411x'</code></td>
238 <td><code>null</code></td>
239 <td>false</td>
240 <td>false</td>
241 <td><strong>yes</strong></td>
242 <td>no</td>
243 </tr>
244 </tbody>
245</table>
246
247---
248
249#### `valid.cardholderName(value: string): object`
250
251The `cardholderName` validation essentially tests for a valid string greater than 0 characters in length that does not look like a card number.
252
253```javascript
254{
255 isPotentiallyValid: true,
256 isValid: true
257}
258```
259
260If a cardholder name is comprised of only numbers, hyphens and spaces, the validator considers it to be too card-like to be valid, but may still be potentially valid if a non-numeric character is added. This is to prevent card number values from being sent along as the cardholder name but not make too many assumptions about a person's cardholder name.
261
262```javascript
263{
264 isPotentiallyValid: true,
265 isValid: false
266}
267```
268
269If a cardholder name is longer than 255 characters, it is assumed to be invalid.
270
271```javascript
272{
273 isPotentiallyValid: false,
274 isValid: false
275}
276```
277
278#### `valid.expirationDate(value: string|object, maxElapsedYear: integer): object`
279
280The `maxElapsedYear` parameter determines how many years in the future a card's expiration date should be considered valid. It has a default value of 19, so cards with an expiration date 20 or more years in the future would not be considered valid. It can be overridden by passing in an `integer` as a second argument.
281
282```javascript
283{
284 isPotentiallyValid: true, // if false, indicates there is no way this could be valid in the future
285 isValid: true,
286 month: '10', // a string with the parsed month if valid, null if either month or year are invalid
287 year: '2016' // a string with the parsed year if valid, null if either month or year are invalid
288}
289```
290
291`expirationDate` will parse strings in a variety of formats:
292
293| Input | Output |
294| ------------------------------------------------------------------------------------------- | ----------------------------- |
295| `'10/19'`<br/>`'10 / 19'`<br />`'1019'`<br/>`'10 19'` | `{month: '10', year: '19'}` |
296| `'10/2019'`<br/>`'10 / 2019'`<br />`'102019'`<br/>`'10 2019'`<br/>`'10 19'` | `{month: '10', year: '2019'}` |
297| `'2019-10'` | `{month: '10', year: '2019'}` |
298| `{month: '01', year: '19'}`<br/>`{month: '1', year: '19'}`<br/>`{month: 1, year: 19}` | `{month: '01', year: '19'}` |
299| `{month: '01', year: '2019'}`<br/>`{month: '1', year: '2019'}`<br/>`{month: 1, year: 2019}` | `{month: '01', year: '2019'}` |
300
301---
302
303#### `valid.expirationMonth(value: string): object`
304
305`expirationMonth` accepts 1 or 2 digit months. `1`, `01`, `10` are all valid entries.
306
307```javascript
308{
309 isValidForThisYear: false,
310 isPotentiallyValid: true,
311 isValid: true
312}
313```
314
315---
316
317#### `valid.expirationYear(value: string, maxElapsedYear: integer): object`
318
319`expirationYear` accepts 2 or 4 digit years. `16` and `2016` are both valid entries.
320
321The `maxElapsedYear` parameter determines how many years in the future a card's expiration date should be considered valid. It has a default value of 19, so cards with an expiration date 20 or more years in the future would not be considered valid. It can be overridden by passing in an `integer` as a second argument.
322
323```javascript
324{
325 isCurrentYear: false,
326 isPotentiallyValid: true,
327 isValid: true
328}
329```
330
331---
332
333#### `valid.cvv(value: string, maxLength: integer): object`
334
335The `cvv` validation by default tests for a numeric string of 3 characters in length. The `maxLength` can be overridden by passing in an `integer` as a second argument. You would typically switch this length from 3 to 4 in the case of an American Express card which expects a 4 digit CID.
336
337```javascript
338{
339 isPotentiallyValid: true,
340 isValid: true
341}
342```
343
344---
345
346#### `valid.postalCode(value: string, [options: object]): object`
347
348The `postalCode` validation essentially tests for a valid string greater than 3 characters in length.
349
350```javascript
351{
352 isPotentiallyValid: true,
353 isValid: true
354}
355```
356
357You can optionally pass `minLength` as a property of an object as a second argument. This will override the default min length of 3.
358
359```javascript
360valid.postalCode('123', {minLength: 5});
361
362{
363 isPotentiallyValid: true,
364 isValid: false
365}
366```
367
368## Custom Card Brands
369
370Card Validator exposes the [`credit-card-type` module](https://github.com/braintree/credit-card-type) as `creditCardType`. You can add custom card brands by [utilizing the `addCard` method](https://github.com/braintree/credit-card-type#adding-card-types).
371
372```javascript
373valid.creditCardType.addCard({
374 niceType: "NewCard",
375 type: "new-card",
376 patterns: [1234],
377 gaps: [4, 8, 12],
378 lengths: [16],
379 code: {
380 name: "CVV",
381 size: 3,
382 },
383});
384```
385
386## Design decisions
387
388- The default maximum expiration year is 19 years from now.
389- `valid.expirationDate` will only return `month:` and `year:` as strings if the two are valid, otherwise they will be `null`.
390- Since non-US postal codes are alpha-numeric, the `postalCode` will allow non-number characters to be used in validation.
391
392## Development
393
394We use `nvm` for managing our node versions, but you do not have to. Replace any `nvm` references with the tool of your choice below.
395
396```sh
397nvm install
398npm install
399```
400
401All testing dependencies will be installed upon `npm install`. Run the test suite with `npm test`.