Question

我正在使用jessepollak的jquery.card.js。太棒了。

如果有人有这方面的经验，请问您是否可以选择选择哪种类型的信用卡？

e.g。

//This is how I would like it to be...
var card = new Card({
  supportedCardTypes: 'Visa, Master'; //I don't want DC or AMEX etc...
});

有这样的选择吗？我该如何实现？

谢谢。

回答------------------------------------------- -----------------

事实证明，只有像TMan建议的那样改变卡片类型并不起作用。但它不是关于鱼，它是关于给我钓鱼的想法。根据TMan的想法入侵脚本，我发现添加这一行会起作用：

Card.prototype.handlers = {
    setCardType: function($el, e) {
      //my modification here to support only Visa and Master!!
      var cardType = e.data === 'mastercard' || e.data === 'visa' ? e.data : 'unknown';
      //end of my modification!!
      if (!QJ.hasClass(this.$card, cardType)) {
        QJ.removeClass(this.$card, 'jp-card-unknown');
        QJ.removeClass(this.$card, this.cardTypes.join(' '));
        QJ.addClass(this.$card, "jp-card-" + cardType);
        QJ.toggleClass(this.$card, 'jp-card-identified', cardType !== 'unknown');
        return this.cardType = cardType;
      }
    },

你可以破解库源代码，快速而肮脏不是最好的想法，或者做一些事情来在你自己的代码中按照你的方式初始化处理程序。

再次感谢。

Answer 1

周围的好主意。这是一种将您添加到处理程序并覆盖它而无需破解库的方法。这将更好地保持未来的变化。

var setCardTypeOrig = Card.prototype.handlers.setCardType;

Card.prototype.handlers.setCardType = function($el, e) {
  var allowedCards = ['mastercard','visa'];
  if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
  setCardTypeOrig.call(this, $el, e);
}

Stack Snippets中的演示

＆＃13;

var setCardTypeOrig = Card.prototype.handlers.setCardType;

Card.prototype.handlers.setCardType = function($el, e) {
  var allowedCards = ['mastercard','visa'];
  if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
  setCardTypeOrig.call(this, $el, e);
}

var card = new Card({ form: '.form-container form', container: '.card-wrapper' })

＆＃13;

.form-container {
  margin-top: 20px;
}
.form-container input {
  font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  float: left;
}
.form-container input.col-6 {
  width: 50%
}
.form-container input.col-3 {
  width: 25%
}

.form-container input[type="text"] {
  background-color: #fff;
  border: 1px solid #cccccc;

  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.form-container .button {
  cursor: pointer;

  position: relative;
  text-decoration: none;
  text-align: center;
  
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  
  color: #fff;
  background-color: #008CBA;
  border-width: 0;
}

.form-container .button:hover, 
.form-container .button:focus {
  background-color: #007295;
}

＆＃13;

<script src="https://rawgit.com/jessepollak/card/master/lib/js/card.js"></script>

<div class="demo-container">

  <div class="card-wrapper"></div>

  <div class="form-container">
    <form action="">

      <input placeholder="Card number" type="text" name="number" class="col-6"/>
      <input placeholder="Full name" type="text" name="name" class="col-6"/>
      <input placeholder="MM/YY" type="text" name="expiry" class="col-3"/>
      <input placeholder="CVC" type="text" name="cvc" class="col-3"/>
      <input type="submit" value="Submit" class="button col-6"/>

    </form>
  </div>
</div>

＆＃13;

要测试它，您可以查看card payment definitions：

万事达卡（55*） - 正常工作✓
签证（4*） - 工作✓
美国运通（37*） - 没有✓

Answer 2

根据Coffeescript文件，我认为你最好的选择是分叉图书馆，然后从cardTypes数组中删除你不想支持的卡片，以便显示所有其他数字如未定义。

https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee

或card.js中的以下行：

https://github.com/jessepollak/card/blob/master/lib/js/card.js#L1134

Card.prototype.cardTypes = ['jp-card-amex', 'jp-card-dankort', 'jp-card-dinersclub', 
    'jp-card-discover', 'jp-card-jcb', 'jp-card-laser', 'jp-card-maestro', 
    'jp-card-mastercard', 'jp-card-unionpay', 'jp-card-visa', 'jp-card-visaelectron'];

您可能还想修改cardTemplate变量以删除不再适用的DOM节点：

https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee#L36

jessepollak的JQuery.Card.js的信用卡类型

2 个答案:

Stack Snippets中的演示