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

Question

我正在使用jquery.card.js来自jessepollak。真棒。

如果有人有经验，您能否告诉我是否有选择您想要支持的信用卡类型的选项？

例如

//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);
}

堆栈代码段中的演示

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' })

.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;
}

<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>

要测试它，您可以查看卡付款定义：

万事达卡 （ 55* ） - 作品 ✓
签证 （ 4* ） - 作品 ✓
美国运通 （ 37* ） - 不 ✓

Answer 2

基于 Coffeescript 文件，我认为您最好的选择是分叉库，然后从 cardTypes 数组中删除您不想支持的卡，以便所有其他数字都显示为未定义。

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

或卡片中的以下行.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