card Add ability to initialize Card with data and on inputs

We've had frequent requests for the ability to initialize card without the inputs, or with inputs, but the data prefilled. I'd like to make this happen.

Here's the basic spec of what needs to happen:

A user should be able to pass in an object to the Card initializer that creates a new Card with all the relevant values (number, expiry, card type, cvc).
A user should be able to pass in a masked number (see #179, #153) and have the card type still be set
A user should be able to initialize Card like this, then have the selected input fields override the data as they are changed and/or filled.

Am I missing anything here that other people would like?

If you'd like to help me make this happen, I'd love to support in any way I can. Check out the Contributing Guidlines or ping me on Twitter.

Jul 18 '15 21:07 jessepollak

This would be indeed very useful

Jul 27 '15 18:07 baldurrensch

+1

Would love to be able to use this to display information about a saved card, without needing a form at all.

Aug 05 '15 02:08 bholzer

any progress on this issue ?

Nov 06 '15 18:11 Fivell

@jessepollak , do have at least an idea how to implement this ?

Nov 06 '15 19:11 Fivell

Hello @Fivell, if you need to set data in the form. Just fire keyup events to show the card. It works for me! var evt = document.createEvent('HTMLEvents'); evt.initEvent('keyup', false, true); document.getElementById('').dispatchEvent(evt); document.getElementById('').dispatchEvent(evt); ... etc

Nov 06 '15 19:11 mkrypka

@mkrypka , I need to implement ui looks like (full credit card number should be masked for security reasons) efdc26c2-1fcb-11e5-83ab-7d3004d0164e

https://github.com/jessepollak/card/issues/179#issuecomment-117641899

Nov 06 '15 19:11 Fivell

hide_numbers_in_pucture

Is it possible mask(hide) part of card number from animated-card-image? Like '4111 **** **** 1111' ? And leave input field as it is now(all numbers are visible).