Điểm qua jessepollak/card: 11.7k sao trên GitHub, viết chủ yếu bằng SCSS, thuộc nhóm Frontend. :credit_card: make your credit card form better in one line of code
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.
Usage (without jQuery)
To use, you'll need to include the Card JavaScript files into your HTML, no CSS link is necessary as the JavaScript file does this for you. You can find the necessary file at /dist/card.js and include it in your HTML like so.
<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
Once you've included those files, you can initialize Card.
var card = new Card({
// a selector or DOM element for the form where users will
// be entering their information
form: 'form', // *required*
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
formSelectors: {
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
// Strings for translation - optional
messages: {
validDate: 'valid\ndate', // optional - default 'valid\nthru'
monthYear: 'mm/yyyy', // optional - default 'month/year'
},
// Default placeholders for rendered fields - optional
placeholders: {
number: '•••• •••• •••• ••••',
name: 'Full Name',
expiry: '••/••',
cvc: '•••'
},
masks: {
cardNumber: '•' // optional - mask card number
},
// if true, will log helpful messages for setting up Card
debug: false // optional - default false
});
Installing card from bower
If you're using bower, you can install card.js with:
bower install card --save
Installing card from npm
If you're using npm, you can install card.js with:
npm install --save card
var $ = require("jquery");
// The current card.js code does not explictly require jQuery, but instead uses the global, so this line is needed.
window.jQuery = $;
var card = require("card");
Using multiple inputs for one field
Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a selector that selects the fields in the correct order. For example,
<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
<input type="text" name="number">
<input type="text" name="first-name"/>
<input type="text" name="last-name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'cc-form',
container: '.card-wrapper',
formSelectors: {
nameInput: 'input[name="first-name"], input[name="last-name"]'
}
});
</script>
</body>
</html>
Rendering with different initial card placeholders
Card renders with default placeholders for card name, number, expiry, and cvc. To override these placeholders, you can pass in a placeholders object.
<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
<input type="text" name="number">
<input type="text" name="name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'cc-form',
container: '.card-wrapper',
placeholders: {
number: '**** **** **** ****',
name: 'Arya Stark',
expiry: '**/****',
cvc: '***'
}
});
</script>
</body>
</html>
Translation
To render the card with the strings in a different language, you can pass in a messages object.
<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
<input type="text" name="number">
<input type="text" name="name"/>
<input type="text" name="expiry"/>
<input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
form: 'cc-form',
container: '.card-wrapper',
messages: {
validDate: 'expire\ndate',
monthYear: 'mm/yy'
}
});
</script>
</body>
</html>
Using with jQuery
To use with jQuery, you'll need to include the jquery.card.js file into your HTML. You can find the necessary file at /dist/jquery.card.js and include it in your HTML like so.
<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/jquery.card.js"></script>
Once you've included those files, you can initialize Card with jQuery.
$('form').card({
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
// all of the other options from above
});
Using with other javascript libraries
Card has wrappers that make it easy to use with other javascript libraries:
Angular 1.x
angular-card
Angular 2+
ngx-card
Ember
ember-credit-card
React
react-credit-card
card-react
react-plastic - static CSS only version.
Vue
For use with VueJs, install card.js from npm:
npm install card --save
Add in your component an Div with class 'card-wrapper', just pass in a selector that selects the fields in the correct order. Import the component card.js and add the object in instance mounted like this example:
$ git clone --recursive https://github.com/jessepollak/card.git
$ cd card
$ git submodule init && git submodule update
$ npm install
$ npm run development
Now, if you go to localhost:8080/example in your browser, you should see the demo page.
Places using Card
Card is used in the wild in these places:
InspectAll
PennyWhale
MakeSpace
Blumpa
CourseLoads
PubNub
GigSalad
Boligninja
EasyCarros
Sintelle
Wevorce
PayumServer
Paribus
Bizzabo
Tortuba
Netlify
The Spice House
Touts
Ryman Limited
Robert Dyas
ROKA
LeSalon
Kenyan Directorate Of Immigration And Citizen Service
Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop @jessepollak a line on Twitter and we'll add you right away!
Project scope
The project scope is to improve the capture of payment cards on websites. Issues and fixes related to the user interface and validating of payment cards are in scope.
For questions on how to use Card in your particular project, please ask on Stack Overflow or similar forum.
Donations
If you'd like to donate to help support development of Card, send Bitcoin directly to 17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC or through Coinbase here.
jessepollak/card thuộc nhóm Frontend trên TopGit, cùng 6 topic GitHub. Trang Trending và Topics liệt kê các repo cùng số sao và cùng ngôn ngữ để so sánh.
Đọc thêm về jessepollak/card ở đâu?
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/jessepollak/card là nguồn chính thức.
jessepollak/card có phải mã nguồn mở không?
Có — jessepollak/card phát hành theo license MIT, nghĩa là mã nguồn mở để đọc, fork và (tùy license) tái sử dụng. Mã: github.com/jessepollak/card.
jessepollak/card là gì?
jessepollak/card (jessepollak/card) là dự án SCSS trên GitHub. Theo mô tả gốc: :credit_card: make your credit card form better in one line of code
jessepollak/card so với các dự án Frontend khác thế nào?
jessepollak/card được TopGit xếp vào nhóm Frontend, với 11.7k sao GitHub và viết bằng SCSS. Xem trang chủ đề Frontend trên TopGit để so sánh với các dự án tương tự theo số sao và mức độ hoạt động.
Vì sao jessepollak/card được xếp vào nhóm Frontend?
TopGit xếp jessepollak/card vào nhóm Frontend dựa trên GitHub topics và mô tả của repo (gắn thẻ: "coffeescript", "credit-card", "css"). Việc phân loại dựa trên metadata thật của repo, không phải đoán theo cảm tính biên tập.
Đọc đầy đủ README ở tab phía trên.
Muốn nghe thêm một ý kiến về card?
Hỏi một AI đọc được trang này — một cú bấm là có ngay nhận định về card.
/card
