node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

virtual-credit-cards

virtual-credit-cards Build Status

Credit card form components built with virtual-dom

Install

$ npm install --save virtual-credit-cards

Demo

$ 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
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. 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 is provided, the validator will check that the provided CVC is valid for that card type.

License

MIT © Ben Drucker