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

【问题标题】：Extending Braintree hosted fields - Paypal & CC type扩展 Braintree 托管字段 - Paypal 和 CC 类型
【发布时间】：2015-08-21 08:51:21
【问题描述】：

我的沙盒环境中的托管字段运行良好，但想知道如何模仿插入式 UI 的两个功能，即：

显示信用卡类型的图标。我可以根据触发的事件（根据文档）在控制台中记录类型，但想知道是否有一种简单的方法可以内联显示卡片图像？
集成贝宝按钮？查看托管字段选项，不支持 paypal，所以我的猜测是我需要使用“paypal”类型设置第二个连接并传入容器，但这似乎非常低效。

我试过了：

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

.. 但这并没有做任何事情。

如果 BT 的任何人可以就这两个问题指导我，我将不胜感激。

谢谢，
大卫

【问题讨论】：

插件支持 PayPal，您是否在 Braintree 控制面板中启用/链接了 PayPal？
嗨 - 我在插件中运行良好，我的问题与使用托管字段（测试版）有关
哎呀，我的意思是托管字段。最好的选择可能是发送电子邮件支持
你有没有想过如何做托管字段+贝宝？

标签： javascript meteor paypal braintree

【解决方案1】：

我在 Braintree 的 JavaScript SDK 团队工作。

关于渲染卡片图标，由于您可以通过 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)。

【讨论】：

感谢您的示例，我现在已经使用了插入式控件，但将来很可能会再次使用托管字段。
$cardNumberContainer.addClass(card.type);应该是 $cardNumberContainer.addClass(payload.card.type);

【解决方案2】：

查看下面的演示，了解 Braintree 托管字段与自定义样式的集成，并根据卡片类型显示卡片图像，内嵌自定义验证规则。

Braintree Hosted Fields integration with Custom Stylesheet(css) and validation

【讨论】：