React credit card
Card by @jessepollakReact port of the display part of
- Look like Card.
- Provide a react interface for displaying credit card information.
How to install
npm install react-credit-card
- Add the
build/card-types.cssfiles to your app's stylesheets (This step may be unnecessary in the future)
How to use (Check the test index.cjsx for a better overview)
cvc: number(max 4 characters, will cut the rest)(The "/" will be automatically added)
name: string (max 2 lines)
number: credit card number(max 16 characters, will cut the rest)
expiry: number(max 4 characters, will cut the rest)
focused: one of the above fields
- cvc (Upon focusing cvc, the form will be rotated until this is changed.)
namePlaceholder: The text displayed as placeholder of name field (default is: "FULL NAME")
expiryAfter: The text displayed on the left of the expiry date
expiryBefore: The text displayed above the expiry date
shinyAfterBack: The text displayed at the back of the card near the shiny thing
type: Available in case you need to explicitly specify the card type. In most cases this will be inferred for you as the user fills the form, so you won't need to use it. One of the following:
Missing features towards the intended goals
- Images are inlined using base64, Card uses images created with css.
- Allow for some way to indicate that a field is invalid, and style appropriately to indicate errors.
- Add more credit card variations, to the extent that Payment supports.
- Maybe inline styles according to facebook's new guidelines, for now the styles are in a separate stylesheet.
- Automated test suite.
- There is no intention to port the form or validation part of Card. This is merely for display.
- Flat background colors for the various cards.
- Placeholder symbols are progressively filled while changing the values.
- Clone the repo
- Run npm install
- Run npm start
- Use test/index.html for testing behaviour and display
It was developed on a local webserver so it doesn't come with any server tools. If someone wants to add a more fleshed out build/testing process (gulp/grunt/webpack) it's very much welcome.
Most of the credit goes to @jessepollak for creating and mantaining Card, I just ported it over.