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

Question

我正在使用 jquery.card.js来自杰西波拉克。太棒了。

如果有人有这方面的经验，能否请您告诉我是否有选项可以选择您要支持的信用卡类型？

例如

//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 的建议更改 cardTypes 是行不通的。但这与鱼无关，而是让我产生了钓鱼的想法。根据 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

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

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>

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

万事达卡 (55*) - 有效 ✓
签证 (4*) - 有效 ✓
amex (37*) - 不是 ✓