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

Question

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

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

我试过了：

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

.. 但那没有做任何事情。

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

谢谢，
大卫

Answer 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)。

Answer 2

查看下面的演示，了解 Braintree 托管字段与自定义样式的集成，并在卡片类型的基础上显示符合自定义验证规则的卡片图像。

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

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

Extending Braintree hosted fields - Paypal & CC type

javascript

paypal

braintree

meteor