@@ -38,6 +38,10 @@ npm install payform --save
38
38
``` javascript
39
39
var payform = require (' payform' );
40
40
41
+ // Format input for card number entry
42
+ var input = document .getElementById (' ccnum' );
43
+ payform .cardNumberInput (input)
44
+
41
45
// Validate a credit card number
42
46
payform .validateCardNumber (' 4242 4242 4242 4242' ); // => true
43
47
@@ -53,6 +57,10 @@ require.config({
53
57
});
54
58
55
59
require ([" payform" ], function (payform ) {
60
+ // Format input for card number entry
61
+ var input = document .getElementById (' ccnum' );
62
+ payform .cardNumberInput (input)
63
+
56
64
// Validate a credit card number
57
65
payform .validateCardNumber (' 4242 4242 4242 4242' ); // => true
58
66
@@ -71,6 +79,10 @@ bower install payform --save
71
79
``` html
72
80
<script src =" path/to/payform/dist/payform.js" ></script >
73
81
<script >
82
+ // Format input for card number entry
83
+ var input = document .getElementById (' ccnum' );
84
+ payform .cardNumberInput (input)
85
+
74
86
// Validate a credit card number
75
87
payform .validateCardNumber (' 4242 4242 4242 4242' ); // => true
76
88
@@ -79,6 +91,26 @@ bower install payform --save
79
91
</script >
80
92
```
81
93
94
+ ### jQuery Plugin (also supports Zepto)
95
+
96
+ This library also includes a jquery plugin. The primary ` payform ` object
97
+ can be found at ` $.payform ` , and there are jquery centric ways to utilize the [ browser
98
+ input formatters.] ( #browser-input-formatting-helpers )
99
+
100
+ ``` html
101
+ <script src =" path/to/payform/dist/jquery.payform.js" ></script >
102
+ <script >
103
+ // Format input for card number entry
104
+ $ (' input.ccnum' ).payform (' formatCardNumber' );
105
+
106
+ // Validate a credit card number
107
+ $ .payform .validateCardNumber (' 4242 4242 4242 4242' ); // => true
108
+
109
+ // Get card type from number
110
+ $ .payform .parseCardType (' 4242 4242 4242 4242' ); // => 'visa'
111
+ </script >
112
+ ```
113
+
82
114
## API
83
115
84
116
### General Formatting and Validation
@@ -169,8 +201,12 @@ This function doesn't perform any validation of the month or year; use `payform.
169
201
170
202
These methods are specifically for use in the browser to attach ` <input> ` formatters.
171
203
204
+ (alternate [ jQuery Plugin] ( #jquery-plugin ) syntax is also provided)
205
+
172
206
#### payform.cardNumberInput(input)
173
207
208
+ _ jQuery plugin:_ ` $(...).payform('formatCardNumber') `
209
+
174
210
Formats card numbers:
175
211
176
212
* Includes a space between every 4 digits
@@ -187,6 +223,8 @@ payform.cardNumberInput(input);
187
223
188
224
#### payform.expiryInput(input)
189
225
226
+ _ jQuery plugin:_ ` $(...).payform('formatCardExpiry') `
227
+
190
228
Formats card expiry:
191
229
192
230
* Includes a ` / ` between the month and year
@@ -202,6 +240,8 @@ payform.expiryInput(input);
202
240
203
241
#### payform.cvcInput(input)
204
242
243
+ _ jQuery plugin:_ ` $(...).payform('formatCardCVC') `
244
+
205
245
Formats card CVC:
206
246
207
247
* Restricts length to 4 numbers
@@ -214,6 +254,19 @@ var input = document.getElementById('cvc');
214
254
payform .cvcInput (input);
215
255
```
216
256
257
+ #### payform.numericInput(input)
258
+
259
+ _ jQuery plugin:_ ` $(...).payform('formatNumeric') `
260
+
261
+ General numeric input restriction.
262
+
263
+ Example:
264
+
265
+ ``` javascript
266
+ var input = document .getElementById (' numeric' );
267
+ payform .numericInput (input);
268
+ ```
269
+
217
270
### Custom Cards
218
271
219
272
#### payform.cards
0 commit comments