扩展Braintree托管字段 - Paypal和CC类型

Question

我的托管字段在我的沙盒环境中工作正常,但我想知道如何模仿drop-in UI的两个功能,即:

1. 显示信用卡类型的图标.我可以根据事件触发(根据文档)在控制台中记录类型,但想知道是否有一种简单的方法来显示内嵌的卡片图像？
2. 集成贝宝按钮？查看托管字段选项,不支持paypal,所以我的猜测是我需要设置第二个连接类型为"paypal"并传入容器,但这似乎效率很低.

我试过了:

braintree.setup(token, "custom", {
  id: "options",
  paypal: {
    container: "paypal-button"
  },
/* hosted fields stuff */
});

..但是没有做任何事情.

如果英国电信的任何人都可以指导我这两个问题,我将不胜感激.

谢谢,
大卫

Answer 1

我在JavaScript SDK团队的Braintree工作.

关于渲染卡图标,由于您可以通过onFieldEvent回调访问卡类型,因此您可以在元素上切换类名并设置相应的CSS以呈现图标.这是一个通用的例子:

HTML

<form id="checkout" method="post" action="/pay">
  <div id="card-number-container">
    <label for="number">Card Number</label>
    <div id="number"></div>
  </div>

  <div>
    <label for="cvv">CVV</label>
    <div id="cvv"></div>
  </div>

  <div>
    <label for="expiration">Expiration Date</label>
    <div id="expiration"></div>
  </div>

  <input type="submit" value="Pay" />
</form>

CSS

#card-number-container {
  background-repeat: no-repeat;
  background-position: right;
  background-position: right 10px center;
}

#card-number-container.visa {
  background-image: url("../images/icons/visa.png");
  -webkit-background-size: 28px 19px;
  background-size: 28px 19px;
}

#card-number-container.discover {
  background-image: url("../images/icons/visa.png");
  -webkit-background-size: 28px 19px;
  background-size: 28px 19px;
}

// ... and so on

JavaScript的

var $cardNumberContainer = $('#card-number-container');

braintree.setup(TOKEN, 'custom', {
  id: 'checkout',
  hostedFields: {
    number: {selector: '#number'},
    cvv: {selector: '#cvv'},
    expirationDate: {selector: '#expiration'},
    onFieldEvent: function (payload) {
      $cardNumberContainer.removeClass('visa master-card discover jcb american-expres diners-club maestro');

      if (payload.card) {
        $cardNumberContainer.addClass(card.type);
      }
    }
  }
});

至于您的第二个问题,只要在控制面板中启用PayPal,它就应该可以正常工作.您在上面提供的代码是正确的.如果您仍然遇到问题,我建议您联系我们的支持团队(support@braintreepayments.com).