credit-cards-react
v0.7.1
Published
Beautiful credit cards for your payment forms
Downloads
5
Maintainers
Readme
Credit Cards React
This is a fork of react-credit-cards without the sass dependency for 100% functionality with css-in-js
A modern credit card component for React.
Install
npm install --save react-credit-cards
Usage
import Cards from 'react-credit-cards';
...
<Cards
number={input.number.value}
name={input.name.value}
expiry={input.expiry.value}
cvc={input.cvc.value}
focused={state.focused}
/>
Don't forget to import the react-credit-cards/lib/styles.scss
in your main.scss file or import it directly in your component if you are using webpack.
Features
- We support all credit card issuers available in Payment plus Hipercard (a brazilian credit card).
Props
name
{string}: Name on card. *number
{string|number}: Card number. *expiry
{string|number}: Card expiry date.10/20
or012017
*cvc
{string|number}: Card CVC/CVV. *focused
{string}: Focused card field.name|number|expiry|cvc
locale
{object}: Localization text (e.g.{ valid: 'valid thru' }
).placeholders
{object}: Placeholder text (e.g.{ name: 'YOUR NAME HERE' }
).preview
{bool}: To use the card to show scrambled data (e.g.**** 4567
).issuer
{string}: Set the issuer for thepreview
mode (e.g.visa|mastercard|...
)acceptedCards
{array}: If you want to limit the accepted cards. (e.g.['visa', 'mastercard']
callback
{func}: A callback function that will be called when the card number has changed with 2 paramaters:type ({ issuer: 'visa', maxLength: 19 }), isValid ({boolean})
* Required fields
Development
Here's how you can get started developing locally:
$ git clone [email protected]:amarofashion/react-credit-cards.git
$ cd react-credit-cards
$ npm install
$ npm start
Now, if you go to http://localhost:3000
in your browser, you should see the demo page.
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process of contributing to the project.
Useful links
EBANK's test numbers Adyen's test numbers Worldpay's test card numbers Brazilian cards patterns
LICENSE
This project is licensed under the MIT License.