Thẻ – kiểm tra tại demo
Một biểu mẫu thẻ tín dụng tốt hơn chỉ trong một dòng mã
Thẻ sẽ làm cho bất kỳ biểu mẫu thẻ tín dụng nào trở thành phần tốt nhất trong quá trình thanh toán (mà không cần bạn thay đổi bất cứ điều gì). Mọi thứ được tạo ra với CSS, HTML và Javascript thuần túy – không cần hình ảnh.
Sử dụng (không cần jQuery)
Để sử dụng, bạn sẽ cần bao gồm các tệp JavaScript của Thẻ vào HTML của bạn, không cần liên kết CSS vì tệp JavaScript sẽ làm điều này cho bạn. Bạn có thể tìm tệp cần thiết tại /dist/card.js và bao gồm nó vào HTML của bạn như sau.
<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
Sau khi bạn đã bao gồm các tệp đó, bạn có thể khởi tạo Thẻ.
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
});
Cài đặt thẻ từ bower
Nếu bạn đang sử dụng bower, bạn có thể cài đặt card.js bằng cách sau:
bower install card --save
Cài đặt thẻ từ npm
Nếu bạn đang sử dụng npm, bạn có thể cài đặt card.js bằng cách sau:
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");
Sử dụng nhiều đầu vào cho một trường
Thẻ có thể được sử dụng trong biểu mẫu trong đó bạn có nhiều đầu vào dẫn đến một trường duy nhất (ví dụ: bạn có một đầu vào tên và họ). Để sử dụng Thẻ với chức năng này, chỉ cần truyền vào một bộ chọn chọn các trường theo đúng thứ tự. Ví dụ,
<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>
Hiển thị với các giá trị mặc định khác nhau ban đầu
Thẻ hiển thị với các giá trị mặc định cho tên thẻ, số, hết hạn, và cvc. Để ghi đè các giá trị này, bạn có thể truyền vào một đối tượng placeholders.
<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>
Dịch thuật
Cảm ơn bạn!
Để hiển thị thẻ với chuỗi bằng một ngôn ngữ khác, bạn có thể truyền vào một đối tượng messages.
<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>
Sử dụng với jQuery
Để sử dụng với jQuery, bạn cần bao gồm tệp jquery.card.js vào HTML của bạn. Bạn có thể tìm tệp cần thiết tại /dist/jquery.card.js và bao gồm nó vào HTML của bạn như sau.
<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/jquery.card.js"></script>
Sau khi bạn đã bao gồm các tệp đó, bạn có thể khởi tạo Thẻ bằng 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
});
Sử dụng với các thư viện javascript khác
Thẻ có các bọc bên ngoài giúp việc sử dụng với các thư viện javascript khác trở nên dễ dàng:
Angular 1.x
Angular 2+
Ember
React
- react-credit-card
- card-react
- react-plastic – phiên bản chỉ có CSS tĩnh.
Vue
Để sử dụng với VueJs, cài đặt card.js từ npm:
npm install card --save
Thêm vào thành phần của bạn một Div với lớp ‘card-wrapper’, chỉ cần truyền vào một bộ chọn chọn các trường theo đúng thứ tự. Nhập thành phần card.js và thêm đối tượng vào mounted instance như ví dụ sau:
<div class='card-wrapper'></div>
<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>
import * as Card from "card";
export default {
name: "Form CreditCard",
mounted() {
new Card({
form: "form#cc-form",
container: ".card-wrapper",
formSelectors: {
numberInput: "input#cc-number",
expiryInput: "input#cc-expiration",
cvcInput: "input#cc-cvv",
nameInput: "input#cc-name"
},
width: 270,
formatting: true,
placeholders: {
number: "•••• •••• •••• ••••",
name: "Nome Completo",
expiry: "••/••",
cvc: "•••"
}
});
},
}
</script>
Phát triển
Để đóng góp, tuân thủ các bước sau:
$ git clone --recursive https://github.com/jessepollak/card.git
$ cd card
$ git submodule init && git submodule update
$ npm install
$ npm run development
Bây giờ, nếu bạn truy cập localhost:8080/example trên trình duyệt của bạn, bạn nên thấy trang demo.
Những nơi sử dụng Card
Thẻ được sử dụng trong các nơi sau đây:
- 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
Bạn đang sử dụng Card trong môi trường sản xuất? Nếu có, chúng tôi rất muốn liên kết đến bạn từ trang này. Hãy mở một PR hoặc để lại @jessepollak một dòng trên Twitter và chúng tôi sẽ thêm bạn ngay lập tức!
Phạm vi dự án
Phạm vi dự án là cải thiện việc thu thập thông tin thẻ thanh toán trên các trang web. Các vấn đề và sửa lỗi liên quan đến giao diện người dùng và xác minh thông tin thẻ thanh toán nằm trong phạm vi của dự án.
Đối với câu hỏi về cách sử dụng Card trong dự án cụ thể của bạn, vui lòng hỏi trên Stack Overflow hoặc diễn đàn tương tự.
Chi tiết Tải về:
Tác giả: jessepollak
Mã nguồn: https://github.com/jessepollak/card
Giấy phép: MIT license
Cảm ơn bạn!
