React Credit Card thing
A credit card library based on @jessepollak's card, with the following differences;
- Uses React. Most of the code for that is based on react-credit-card
- Uses the credit-card lib instead of payment.js
- Flat backgrounds instead of images
- Includes form fields for inputting credit card details
- 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