Question

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

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

我确实尝试过：

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

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

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

谢谢，
大卫

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）。

Answer 2

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

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

扩展Braintree托管领域 - Paypal＆amp; CC类型

2 个答案: