shatran/card-react

React component for card https://github.com/jessepollak/card

card-react's Issues

missing last digit of card number

In my Stripe integration tests I use the test number: 4000 0566 5566 5556.

The number posted to Stripe is 400005665566555. This number (last 6 missing) still passes the Luhn algorithm so all appears to be fine but the number itself is incorrect.

I believe that, perhaps, this is an issue with the payment library this library depends on.

I am hoping that this is fixed by a not-so-recent commit to payment.

Therefore, can you upgrade your dependency of payment to 2.1.4 and publish a new version?

Entering every 4th digit doesn't trigger onChange

Due to
Payment.formatCardNumber ReactDOM.findDOMNode(@refs[@inputsRefs[inputsNames["number"]]])
the DOM is directly manipulated on every 4th digit entry, and thus card data cannot be saved to state using onChange events.

Using with stripe.js

Hey there! Possibly covered in another issue, but I'm not seeing it.

https://stripe.com/docs/custom-form#step-1-collecting-credit-card-information

The HTML is fairly standard, but note how every input for sensitive data—number, CVC, expiration, and ZIP code—omits the name attribute. By omitting a name, the user-supplied data in those fields won't be passed to your server when the form is submitted. Each element also includes a data-stripe attribute

Is it possible to use card-react without using name attributes?

Does not build under webpack

Webpack seems to be very particular about loading dependencies with multiple module definitions in them. Though it presents as a warning, the warning does in fact break a build from completing in production mode:

WARNING in ./~/card-react/~/payment/lib/payment.js
Critical dependencies:
1:459-466 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/card-react/~/payment/lib/payment.js 1:459-466

There are also problems with payment itself which need to be resolved before fully fixing this issue, see jessepollak/payment#16

PR incoming to fix the issue for card-react.

Sass error on build

Hi, just wondering, I got a Sass error on build before doing any customization:

Running "compass:lib" (compass) task error src/scss/card.scss (Line 22 of node_modules/bourbon/app/assets/stylesheets/helpers/_font-source-declaration.scss: Invalid CSS after " eot": expected ")", was ": "#{$file-pa...")

To reproduce, I cloned the repo, ran an npm install and then ran grunt dev.

Is this happening to anyone else?

npm run fails requiring global ruby/sass

I cloned the repo, then ran npm install and npm run. Running fails at:

Running "sass:dist" (sass) task
Warning: 
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
 Use --force to continue.

Aborted due to warnings.

Maybe the solution here would be to drop ruby/sass in favour of installing node sass as a dev dependency.

Redux Bad Formatting

When used with Redux Form Fields, the formatting is glitchy. When I type in the credit card number, for example, on the 5th digit the numbers get deleted while typing.

Identify card type

What is the best way to get the card type? Sorry if I missed the obvious.

How to get input values?

I am brand new to react and I am having difficulty getting the values of the form inputs. It appears that adding onChange events to the inputs interferes with the credit card component. What is the recommended way to get the values of the inputs?
Thanks

Incomplete event handling missing input fill in from browser suggestion popup

Thanks for a nice React-ification of Card, better integrated than others!

The current setup of event handles (onKeyUp, onBlur) for validation misses the case when:

• the user has previously filled out the form
• has the browser set to remember filled in values
• double clicks the field and then selects the previous value from the browser popup

In this case neither of these event happen, even though the input has been filled in.

Incompatible with redux

I'd like to use this component, but the way it handles the input values is incompatible with redux (and basically any state-management).

Trying to tie the input fields to some type of controlled state management results in the React warning:

CardReactFormContainer contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

The inputs don't work correctly either, as the code that handles input validation and the "controlled" nature of the input once it is tied to some state management interfere with each other.

Ideally it would be nice to have this project move to using redux behind the scenes for state management, but at the very least it would be great if it could be made to not interfere with those of us using redux.

When you focus on the cvv field, the card flips but the back side of the card dissapears

When you focus on the cvv field, the card flips but the back side of the card disappears. When it is flipping, I can see the back side of the card. But after it has flipped, I can just see the mirror image of the front side of the card.

card-react failed to build with node 6.11.x

latest version of card-react failed to build with node 6 or higher.

npm run start

> [email protected] start /Users/n/Documents/Work/react/card-react
> grunt dev

Running "clean:build" (clean) task
>> 1 path cleaned.

Running "clean:lib" (clean) task
>> 1 path cleaned.

Running "cjsx:build" (cjsx) task
File lib/card-react-form-container.js created.
File lib/card-react-component.js created.

Running "browserify:dev" (browserify) task
>> Bundle .tmp/example/card-loader.js created.

Running "sass:dist" (sass) task
Warning: 
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
 Use --force to continue.

Aborted due to warnings.

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `grunt dev`
npm ERR! Exit status 6
npm ERR! 
npm ERR! Failed at the [email protected] start script 'grunt dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the card-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     grunt dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs card-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls card-react
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/n/Documents/Work/react/card-react/npm-debug.log

versions:

$npm -v
3.10.10
$ node -v
v6.11.1

compiled in Mac with OSX Sierra

Changing styling?

Is it possible to adapt the styling to my needs, or can the library only be used in its current form?

Formatting not working in mobile browser

Hi, I've been using this module, for a website, but I realized that the formatting is not working when the website is opened from a mobile browser, the inputs work like a plain one, do anybody know what can be done to solve it?

initialValues don't re-render

Some users have already filled card info, in this case I have to fetch their data to let them edit it. So when it renders for the first time it uses default values. Then when data is fetched it appears in inputs but card display doesn't re-render with new values, and it re-renders only if input value is changed.

How can I fix this?

is there a way to separate out the expiration fields?

i am integrating this with stripe, and it requires the expiration fields to be separate like one input field for month and one for year.

HTML encoding for default values that include '••••' is not working for React ^0.14.3

On page load with given default values from /lib/card-react-component.js is having trouble encoding the proper values that were intended to be there, mainly with the bullet points for the CC default values.

This is what it is returning on the browser:

https://cloud.githubusercontent.com/assets/10355544/12796608/7cba4774-ca74-11e5-941e-e4f5c6f83bc2.png

I am not sure if this is just happening on my machine but I would be more than happy to make a PR to fix this issue. I worked in basic JS into one of the lib files which seemed to fix the issue, returning this to the browser. I believe this is happening because some HTML encoding isnt supporting the • on page render.

https://cloud.githubusercontent.com/assets/10355544/12796692/e2f3de7e-ca74-11e5-9d09-2fadb42deb8c.png

@shatran thoughts?

Thank you

Payment.js is still used as pre-built instead of source (?)

I know there was a previous ticket, and it was meant to have been solved, but using the latest card-react from npm, in a webpack setup, I'm getting this:

WARNING in ./~/card-react/~/payment/lib/payment.js Critical dependencies: 1:505-512 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/card-react/~/payment/lib/payment.js 1:505-512

When npm starts/reloads.

I thought this was resolved last year already?

Incompatible with react-ladda

When attempting to use this library with react-ladda, react-ladda breaks with the message:

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined

This points to line 73 of react-ladda. So far, this is the only library I've used that has broken react-ladda, so I figure it has something to do with the fact that this isn't a pure react library, but a wrapper around something that mutates the DOM. The crux of the problem is that the <button> element inside the <LaddaButton> element does not seem to be an object? But this works when not using card-react.

React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

This is with latest [email protected]