jessepollak / card Goto Github PK
View Code? Open in Web Editor NEW:credit_card: make your credit card form better in one line of code
License: MIT License
:credit_card: make your credit card form better in one line of code
License: MIT License
In Internet Explorer 10, the back of the card is transparent (meaning it shows the content on the front of the card) and also flipped, and the CVV doesn't appear at all.
Is IE10 on the list of supported browsers?
Saw this a few days ago and it worked great on Chrome for iOS, but honestly don't know if I looked at it with desktop Chrome or not.
Got back to the office today and it doesn't display the card at all, the form controls all work and the "demo" keystrokes play, but no visuals of the card at all at least with Chrome Version 35.0.1916.114 for OSX.
This this is awesome, great work.
I cannot get the plugin to work with ASP.net web forms. I believe it has something to do with having the form tag on every page and not just around the form itself.
Hi
Really like what you have done here, I was trying out the demo and it doesn't pick up an auto fill from chrome on my name.
The card image does not update.
Thanks
Paul
I think that you shouldn't set the font on the body.
It can change the look of the entire page.
body {
font-family: $card-font-family;
You might want to change the colour of the font for better contrast when it can't recognize the card type.
Ie. if I type in a random number just to see how it works, I can barely see what I'm typing in on the card due to the lack of contrast.
BTW This is great work! Love it!
Link redirects to HTTP when I click the HTTPS URL in the readme.md
Perhaps the script could detect whether it's running on a secure protocol.
So - run some sort of sniffer script which alerts the user if he/she is submitting data through plaintexted HTTP, and also NEVER allow non-secure HTTP AJAX Posts/Submissions of such data.
I am aware this script caters to the UI aspect, and doesn't concern itself with the AJAX plumbing, but I don't see how it would play nice with security professionals who design these systems defensively from the very beginning.
Many users get confused by the card and aren't sure where to type - in the form or on the card.
Having an option to slide the card up and into view will alleviate some of this.
Perhaps it can evaluate how many characters are in the field and change font size (smaller) as it gets longer and longer.
It's kind of jarring from a aesthetic point of view.
The right-hand side of the card's background also moves after the card finishes fading in.
When I paste a card number into the form and use only the mouse (no keyboard events) the card is not rendered correctly. No numbers appear on the card graphic however formatting is done to the pasted value.
I'm not sure this nice lib really require jquery.
It seems a good option to make something jquery free, then make available a jquery plugin (eg: Pikaday do that).
Expected: pressing tab in MM/YY
field switches focus to CVC
field.
Actual: does nothing.
(Note: this is based on the demo implementation on http://jessepollak.github.io/card/)
In particular, the .logo class here: https://github.com/jessepollak/card/blob/master/src/scss/logos/_logo.scss#L4
This logo class is affecting the actual logo on our site because it's not scoped to the credit card
Does this project allow for excluding card types? Let's say I have a company that only accepts Visa and MasterCard and NO Amex. Can I prevent Amex cards from showing the graphics?
Example: http://kenkeiter.com/skeuocard/
When the form is partially pre-filled with address data, it should display this on the card.
I can't figure out how to get it take the pre-fill data and use it, tabbing around the form causes the image to update, but triggering clicks, focus, change, etc does not. Also, it only updates the image with pre-fill data from a field you tab into focus, not tabbing out (blur).
What's the easiest way to update the image with data place in the form from the DB?
Chrome has this nifty little feature that it doesn’t allow fonts to go under a specific size (6pt is the minimum, the value is user-configurable; don’t remember the default setting though). However, Discover and AmEx logos are broken by that, and look like crap (network in Discover is off-center; AmEx is a complete mess).
Right now, in order for Card to work, the developer has to manually add selectors for the necessary form fields. While this should be encouraged, it would nice if Card jut worked out of the box most of the time.
Whilst I appreciate this is a demo - the SSL/HTTP link is more preferable. Just incase. It's highly unlikely anyone would be entering sensitive data. But I've seen stranger things:
Any chance of having this packaged and published to http://www.nuget.org/ so us Microsoft Visual Studio users can easily incoprorate this into our .NET applications as a NuGet Package?
If you can call an .exe during the build process then it should be super simple to do!
This plugin is great but it would be even better if you could allow to pass translations through additional files as in jquery-validation : https://github.com/jzaefferer/jquery-validation/tree/master/src/localization
I'll be more than happy to contribute by translating the captions into French.
The first 6 digits (the BIN) decides which bank is the issuer of the card; and card type (debit/credit), the country etc. Wouldn't it be nice to add such information on the card?
Have a look at http://www.x2q.net/2013/09/10/bank-identification-number-bin-list/
I'm having the issue that after the form is ran and there are validation errors the card render is back to it's blank state while the form still displays input in the fields.
I'd like for the card to be able to render on load with default values.
In my use case, I need to set card values myself. Is this possible through the API?
It seems that the default formatting setting (true) overwrites whatever you add in.
I think it's because of line (547)
this.options = $.extend({}, opts, this.defaults);
I think you want to swap the user options to after your provided defaults so they override.
I'll make a quick PR with the change
Hi,
I tried this repository for my website. I used this:
<!DOCTYPE html>
<html lang="de"><head><style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style></style>
<script></script><title>Card — the better way to collect credit cards</title>
<link rel="stylesheet" href="http://suriyaakudo.bplaced.net/projects/card/lib/css/card.css">
</head>
<body>
<style>
.demo-container {
width: 350px;
margin: 50px auto;
}
form {
margin: 30px;
}
input {
width: 200px;
margin: 10px auto;
display: block;
}
</style>
<div class="demo-container">
<div class="card-wrapper"></div>
<div class="form-container active">
<form action=""><input placeholder="Card number" name="number" type="text"><input placeholder="Full name" name="name" type="text"><input placeholder="MM/YY" name="expiry" type="text"><input placeholder="CVC" name="cvc" type="text"></form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://suriyaakudo.bplaced.net/projects/card/lib/js/card.js"></script>
<script>
$('.active form').card({ container: $('.card-wrapper')})
</script>
</body></html>
Where should I paste this:
$('form').card({
// a selector or jQuery object for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
numberInput: 'input#number', // optional — default input[name="number"]
expiryInput: 'input#expiry', // optional — default input[name="expiry"]
cvcInput: 'input#cvc', // optional — default input[name="cvc"]
nameInput: 'input#name', // optional - defaults input[name="name"]
width: 200, // optional — default 350px
formatting: true // optional - default true
});
???
Yours
Suriyaa Kudo
Would be awesome to also offer built-in input and select boxes.
The init method could receive as arguments the input/select field names and select boxes could optionally get the option values/titles.
I know this might not be the goal of this project, but would probably be awesome.
I was almost implementing my own version of https://dribbble.com/shots/660725-Credit-Card-Form for our checkout process, but looks like I'll be using yours now.
I find that the 3d rotation is too grand. I would suggest another solution.
As soon as the form is recognizing a card which has CVC at the back.
The backside of the card will slide quickly into the image and "greyed", when user selects the CVC field, the front/back changes focus according to the image.
When entering card details you really want to disturb the user as little as possible as it can affect CR.
If you use tab to navigate through the form fields, it never gets to CVC (whereas without using the card plugin it works just fine).
Tested in firefox 30 and chrome 34.
EDIT: I realized just now that tab wasn't working because the date value wasn't valid. What are you guys doing to show validation errors? (without doing another validation on the field)
When clicking on card-number or other parts of the image, a focus on that text field would be nice. I found my self clicking there and it felt odd not being able to edit in-place.
Also when a text field is focused a highlight could be nice to have on the card itself.
Sometimes values may be prefilled on page load. Currently to display values like this, one must manually trigger the keyup/change event, even if all the info is there and accurate.
Some credit card processors require the expiry date to be in MMYY format.
This script forces the value to be MM/YY format. I realize that I could strip the slash before sending the value to the processor, but doing this is inconvenient.
Would it make sense to utilize a bypass option for this value's format?
See: https://github.com/jessepollak/card/blob/master/lib/css/card.css#L407
This line has one linear-gradient with a -webkit-
prefix despite the rest not having the prefix.
Also I have no idea why the background-image
s are repeated twice each. The single difference is in the sheen on the top left. The top one has a degree of 245 and the other has -115, functionally identical in every way.
I'm not used to scss, so I couldn't find the issue at hand.
I followed the developer instructions i.e to clone and then run an npm install however the npm install fails with an error.
The error appears to be: npm ERR! Error: No compatible version found: gulp@'^3.7.0'
I am new to node package management - is there something I am missing?
Here is the full output to the console:
G:\Users\Darrell\Source\Repos\card>npm install
npm http GET https://registry.npmjs.org/jquery
npm http GET https://registry.npmjs.org/jquery.payment
npm http GET https://registry.npmjs.org/gulp
npm http GET https://registry.npmjs.org/coffee-script
npm http GET https://registry.npmjs.org/bower
npm http GET https://registry.npmjs.org/gulp-browserify
npm http GET https://registry.npmjs.org/gulp-sass
npm http GET https://registry.npmjs.org/gulp-autoprefixer/0.0.7
npm http GET https://registry.npmjs.org/gulp-livereload
npm http GET https://registry.npmjs.org/coffeeify
npm http GET https://registry.npmjs.org/tiny-lr/0.0.7
npm http GET https://registry.npmjs.org/nodemon
npm http GET https://registry.npmjs.org/gulp-rename
npm http GET https://registry.npmjs.org/gulp-changed
npm http GET https://registry.npmjs.org/gulp-clean
npm http GET https://registry.npmjs.org/gulp-connect
npm http GET https://registry.npmjs.org/run-sequence
npm http GET https://registry.npmjs.org/gulp-open
npm http 304 https://registry.npmjs.org/coffee-script
npm http 304 https://registry.npmjs.org/jquery.payment
npm http 304 https://registry.npmjs.org/gulp-sass
npm http 304 https://registry.npmjs.org/gulp-autoprefixer/0.0.7
npm http 304 https://registry.npmjs.org/gulp-browserify
npm http 304 https://registry.npmjs.org/jquery
npm http 304 https://registry.npmjs.org/gulp
npm ERR! Error: No compatible version found: gulp@'^3.7.0'
npm ERR! Valid install targets:
npm ERR! ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.7","0.0.8","0.0.9","0.1.0
","0.2.0","1.0.0","1.1.0","1.2.0","1.2.1","2.0.0","2.0.1","2.1.0","2.2.0","2.3.0
","2.4.0","2.4.1","2.6.0","2.6.1","2.7.0","3.0.0","3.1.1","3.1.2","3.1.3","3.1.4
","3.2.0","3.2.1","3.2.2","3.2.3","3.2.4","3.2.5","3.3.0","3.3.1","3.3.2","3.3.4
","3.4.0","3.5.0","3.5.1","3.5.2","3.5.5","3.5.6","3.6.0","3.6.1","3.6.2","3.7.0
","3.8.0","3.8.1"]
npm ERR! at installTargetsError (G:\Program Files\nodejs\node_modules\npm\li
b\cache.js:685:10)
npm ERR! at G:\Program Files\nodejs\node_modules\npm\lib\cache.js:607:10
npm ERR! at saved (G:\Program Files\nodejs\node_modules\npm\node_modules\npm
-registry-client\lib\get.js:138:7)
npm ERR! at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! [email protected]
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "G:\Program Files\nodejs\node.exe" "G:\Program Files\nod
ejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! cwd G:\Users\Darrell\Source\Repos\card
npm ERR! node -v v0.10.4
npm ERR! npm -v 1.2.18
npm http 304 https://registry.npmjs.org/coffeeify
npm http 304 https://registry.npmjs.org/gulp-livereload
npm http 304 https://registry.npmjs.org/gulp-rename
npm http 304 https://registry.npmjs.org/nodemon
npm http 304 https://registry.npmjs.org/gulp-changed
npm http 304 https://registry.npmjs.org/gulp-clean
npm http 304 https://registry.npmjs.org/bower
npm http 304 https://registry.npmjs.org/gulp-connect
npm http 304 https://registry.npmjs.org/tiny-lr/0.0.7
npm http 304 https://registry.npmjs.org/gulp-open
npm http 304 https://registry.npmjs.org/run-sequence
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! G:\Users\Darrell\Source\Repos\card\npm-debug.log
npm ERR! not ok code 0
G:\Users\Darrell\Source\Repos\card>
If would be great if when a form uses the format "mm/yyyy" for an expiry date, it could be displayed as four dots on the card.
I would do this myself, but haven't got time to learn coffeescript right now. :)
Many payment providers have their own card detection and they get updated pretty often, this way the developer gets too choose to use their payment providers ones or built-in one.
I see this plugin is wrapped after its been converted from Coffeescript.
There isn't a semi colon at the end of the browserify shim, which causes this to fail in my build process -- which concat's a bunch of JS files together.
Some forms require first + last name to be separate inputs. Should Card handle that?
Right now, if your form doesn't contain the correct inputs (or you select the wrong form), you're just going to get a JS undefined
error. For less technical users, it would be helpful to explicitly warn when certain inputs are missing.
This would help with solves #30.
Safari chokes on the radial gradients with super high transparency. For now, I've disabled them by checking user agent and disabling for Safari, but I'd like to find a way to make them work.
I'm not sure how many cards this affects, but here's an example:
Type in 62 into the card entry. It should be UnionPay. It's nothing. Try 622. It should be Discover. Nothing.
Furthermore, 622 is not a Discover card prefix, it's a UnionPay prefix. The program is missing a few card numbers as well.
See: the Wikipedia page
Adding this to bower would make it a lot more easily usable.
Using the arrow keys to select an existing entry in the form history then pressing tab to select it and continue to the next input field does not update the visual display.
Firefox 29 on OS 10.9
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.