README

一行代码即可实现更好的信用卡表单

Card可以接受任何信用卡表单，并将其作为结账流程的最佳部分（无需您做任何改变）。所有内容都是使用纯CSS、HTML和JavaScript创建的——无需图片。

使用（无需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 Currently)

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给Twitter发信息，我们将立即添加您！

捐赠

如果您想为支持Card的开发捐赠，请直接向以下Bitcoin地址发送比特币17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC，或通过Coinbase这里发送。

intelogie / card

维护者

详细信息