Field layouts

[zeckdude]

Is the layout restricted to the exact order of the fields? I would like to put each of the input fields in a separate div and place the credit card icons in a different position. Is this possible with the current implementation? If not, what is the best way to go about using the code you wrote and changing it to suit my needs?

[jxom]

Hey @zeckdude,

Yes, the order is restricted to Card Number -> Expiry -> CVC and the layout is restricted to the one input wrapper.

However, it has been a thought of mine that this library should enable the input fields to be loosely coupled via their own components. I just haven’t had the time to work on it yet. It seems like this would be a recurring issue, so maybe I’ll implement it in my free time sometime soon. Feel free to open a PR if you wish though!

[zeckdude]

@jxom I’m actively working on it at the moment to work with my layout. I had to fork it and change the layout in the index.js file but if I can make it generic I will submit a PR.

Thanks!

[jxom]

👌

[jxom]

Hey @zeckdude, did you manage to get this happening? :D

[jxom]

We have just recently published a new library, React Payment Inputs which is a rewrite of react-credit-card-input, and fixes a lot of issues that were raised in this repository as well as a few extra enhancements.

Your issue that you raised here should be fixed in React Payment Inputs - however, if you wish to still use react-credit-card-inputs, I'll try find time to fix this issue in the future.

[zeckdude]

@jxom thanks for the reply but i don’t think I ended up using it so don’t upgrade it on my part.

[james-meneses]

This is exactly what I was looking for, good to know there's this new libary that solves the problem, I'm gonna switch to it. Just commenting, in my case, i had some problems with the input in some mobile devices (such as Moto G), and as I needed to support a wide range of screen sizes, it was an important matter.