React Credit Card thing

A credit card library based on @jessepollak's card, with the following differences;

1. Uses React. Most of the code for that is based on react-credit-card
2. Uses the credit-card lib instead of payment.js
3. Flat backgrounds instead of images
4. Includes form fields for inputting credit card details
5. Has reducers for usage in redux

Installation

$ npm install --save-dev react-credit-card-thing

Usage

The core card component of React Credit Card Thing (RCCT) is designed to be used simply as a display for a user's card details. It leaves the data collection, reducing, validation etc up to you. Just pass in props and watch it re-render.

Include the component like this:

import Card from 'react-credit-card-thing/lib/Card';
class MyComponent extends Component {
  render() {
    return (
      <Card
        number={this.props.number}
        cvc={this.props.cvc}
        name={this.props.name}
        expiry={this.props.expiry}
        focused={this.props.focused}  // if cvc then the card is flipped
      />
    );
  }
}

See the api docs for all the props and their values.

And include the sass for it like this:

require('react-credit-card-thing/lib/styles/card');

With Form Fields

RCCT comes with some form fields for taking credit card details. You can use it like this:

import CreditCard from 'react-credit-card-thing/lib/CreditCard';
class MyComponent extends Component {
  render() {
    return (
      <CreditCard
        number={this.props.number}
        cvc={this.props.cvc}
        name={this.props.name}
        expiry={this.props.expiry}
        focused={this.props.focused}  // if cvc then the card is flipped
      />
    );
  }
}

You will need to connect these fields using a higher order component such as a redux component

With Redux Reducers

RCCT comes with a reducer for credit card details and a higher order component with redux actions and form fields to take credit card details. You can use it like this:

import creditCardReducer from 'react-credit-card-thing/lib/reducers';
import CreditCard from 'react-credit-card-thing/lib/reduxed/CreditCard';

let reducers = combineReducers({creditCard: creditCardReducer});

class MyComponent extends Component {
  render() {
    return (
      <CreditCard />
    );
  }
}

See examples/pay-form for a fuller usage example