Javascript 扩展Braintree托管字段-Paypal&；CC型

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

显示信用卡类型的图标。我可以根据触发的事件（根据文档）在控制台中记录类型，但想知道是否有一种简单的方式内联显示卡映像

集成贝宝按钮？查看托管字段选项，paypal不受支持，因此我猜我需要使用“paypal”类型设置第二个连接，并在容器中传递，但这似乎效率很低

我确实试过：

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

。。但那没用

如果英国电信的任何人能在这两个问题上为我提供指导，我将不胜感激

谢谢，
David

我在Braintree的JavaScript SDK团队工作

关于呈现卡图标，由于您可以通过回调访问卡类型，因此可以在元素上切换类名，并设置相应的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>

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

---

至于你的第二个问题，贝宝应该工作，只要它是在您的控制面板启用。上面给出的代码是正确的。如果您在这方面仍然有困难，我建议您联系我们的支持团队(support@braintreepayments.com).

在下面的演示中签出Braintree托管字段与自定义样式的集成，并根据卡片类型显示符合自定义验证规则的卡片图像

---

下拉列表支持PayPal，您是否在Braintree控制面板中启用/链接了PayPal？您好-我在下拉列表中工作正常，我的问题涉及到使用托管字段（beta）哎呀，我指的是托管字段。最好的办法可能是给支持发送电子邮件。你有没有想过如何使用托管字段+paypal？谢谢你的例子，我现在已经使用了drop-in控件，但将来很可能会再次使用托管字段。$cardNumberContainer.addClass（card.type）；应该是$cardNumberContainer.addClass（payload.card.type）；

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