README

一行代码的更好信用卡表单

此卡可接受任何信用卡形式，并将其变成结账流程的最佳部分（无需您做任何改变）。一切都是使用纯 CSS、HTML 和 JavaScript 创建的——无需图片。

card

用法（无需 jQuery）

要使用它，您需要将 Card JavaScript 文件包含到您的 HTML 中，无需链接 CSS，因为 JavaScript 文件会为您完成这项工作。您可以在 /dist/card.js 找到必要的文件，并将其包含到您的 HTML 中，如下所示。

<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>

包含这些文件后，您就可以初始化 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
});

从 bower 安装 card

如果您正在使用 bower，可以使用以下命令安装 card.js：

bower install card --save

从 npm 安装 card

如果您正在使用 npm，可以使用以下命令安装 card.js：

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");

使用多个输入为一个字段

Card 可以用于具有多个输入且渲染到单个字段的表单（例如，您有姓名的首字母和姓氏输入）。要使用具有此功能的功能的 Card，只需传递一个选择器，该选择器按正确顺序选择字段。例如，

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<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: 'form',
    container: '.card-wrapper',

    formSelectors: {
        nameInput: 'input[name="first-name"], input[name="last-name"]'
    }
});
</script>
</body>
</html>

使用不同的初始卡占位符进行渲染

Card 使用默认的占位符渲染卡 name、number、expiry 和 cvc。要覆盖这些占位符，您可以传递一个 placeholders 对象。

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<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: 'form',
    container: '.card-wrapper',

    placeholders: {
        number: '**** **** **** ****',
        name: 'Arya Stark',
        expiry: '**/****',
        cvc: '***'
    }
});
</script>
</body>
</html>

翻译

要使用不同语言的字符串渲染卡，您可以传递一个 messages 对象。

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<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: 'form',
    container: '.card-wrapper',

    messages: {
        validDate: 'expire\ndate',
        monthYear: 'mm/yy'
    }
});
</script>
</body>
</html>

与 jQuery 一起使用

要使用 jQuery，您需要将 jquery.card.js 文件包含到您的 HTML 中。您可以在 /dist/jquery.card.js 找到必要的文件，并将其包含到您的 HTML 中，如下所示。

<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/jquery.card.js"></script>

包含这些文件后，您就可以使用 jQuery 初始化 Card。

$('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
});

与其它 JavaScript 库一起使用

Card 提供了与其他 JavaScript 库一起使用的包装器，使其变得容易使用

Angular (1.x 目前)

angular-card

Ember

ember-credit-card

React

开发

要贡献，请遵循以下步骤

$ git clone --recursive https://github.com/jessepollak/card.git
$ cd card
$ git submodule init && git submodule update
$ npm install
$ npm development

现在，如果您在浏览器中访问 localhost:8080/example，您应该看到演示页面。

使用 Card 的地方

Card 在这些地方得到广泛应用

InspectAll
PennyWhale
MakeSpace
Blumpa
CourseLoads
PubNub
GigSalad
Boligninja
EasyCarros
[Sintelle] (http://www.sintelleparapharmacie.com/)
Wevorce
PayumServer
Paribus
Bizzabo
Tortuba
Netlify
The Spice House
Touts
Ryman Limited
Robert Dyas

您在生产中使用 Card 吗？如果是这样，我们很乐意从本页链接到您。打开一个 PR 或在 @jessepollak 上留言，我们将立即添加您！

捐款

如果您想捐款以支持 Card 的开发，可以直接将比特币发送到 17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC 或通过 Coinbase 这里。

jessyjames / credit-card

维护者

详细信息