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

Posted 2023-02-22

【中文标题】扩展 Braintree 托管字段 - Paypal 和 CC 类型

【英文标题】：Extending Braintree hosted fields - Paypal & CC type

【发布时间】：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？

嗨 - 我在插件中运行良好，我的问题与使用托管字段（测试版）有关

哎呀，我的意思是托管字段。最好的选择可能是发送电子邮件支持

你有没有想过如何做托管字段+贝宝？

【参考方案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，它就应该可以工作。您上面提供的代码是正确的。如果您仍然遇到问题，我建议您联系我们的支持团队 ([e-mail])。

【讨论】：

感谢您的示例，我现在已经使用了插入式控件，但将来很可能会再次使用托管字段。

$cardNumberContainer.addClass(card.type);应该是 $cardNumberContainer.addClass(payload.card.type);

【参考方案2】：

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

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