https://github.com/bendrucker/virtual-credit-cards
Credit card form components built with virtual-dom
https://github.com/bendrucker/virtual-credit-cards
Last synced: over 1 year ago
JSON representation
Credit card form components built with virtual-dom
- Host: GitHub
- URL: https://github.com/bendrucker/virtual-credit-cards
- Owner: bendrucker
- License: mit
- Created: 2016-06-14T19:20:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-03-17T22:56:11.000Z (over 4 years ago)
- Last Synced: 2025-04-10T08:14:08.793Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 5
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# virtual-credit-cards [](https://travis-ci.org/bendrucker/virtual-credit-cards) [](https://greenkeeper.io/)
> Credit card form components built with virtual-dom
## Install
```
$ npm install --save virtual-credit-cards
```
## Demo
```sh
$ npm run example
```
An example form (*example.js*) will open up in your default browser with all three components connected.
## Usage
virtual-credit-cards comes with inputs for:
* Card numbers
* Expiration (MM/YY)
* CVC
```js
var NumberInput = require('virtual-credit-cards/number')
var state = NumberInput()
NumberInput.render(state())
//=> VTree
```
## Components
### Number
#### `NumberInput()` -> `function`
Returns the observable number input state. `state.value` is an observable representation of the parsed card number.
#### `NumberInput.render(state, [options])` -> `object`
Renders a state object into a virtual DOM tree.
#### `NumberInput.validate(state, [types])` -> `boolean`
Validates the current card number state.
##### types
Type: `array`
Default: `[]`
An array of [allowed card types](https://github.com/bendrucker/creditcards-types#card-types). If no value is provided, a valid card of any type will be valid.
### Expiration
#### `ExpirationInput()` -> `function`
Returns the observable number input state. `state.value` is an observable representation of the parsed expiration. It will either be `null` or `{month: Number, year: Number}`, depending on whether the input is complete.
#### `ExpirationInput.render(state, [options])` -> `object`
Renders a state object into a virtual DOM tree.
#### `ExpirationInput.validate(state)` -> `boolean`
Validates the expiration state.
### CVC
#### `CvcInput()` -> `function`
Returns the observable number input state. `state.value` is an observable representation of the parsed CVC.
#### `CvcInput.render(state, [options])` -> `object`
Renders a state object into a virtual DOM tree.
#### `CvcInput.validate(state, [type])` -> `boolean`
Validates the CVC state.
##### type
Type: `string`
Default: `null`
If a [card type](https://github.com/bendrucker/creditcards-types#card-types) is provided, the validator will check that the provided CVC is valid for that card type.
## License
MIT © [Ben Drucker](http://bendrucker.me)