angularjs - BrainTree 自定义集成托管字段未接收事件

Question

我在从 Braintree 托管字段 API 获取字段级事件时遇到困难。

我已经通读了 Evan Hahn 和 Jeff Carp(以及其他人)的 GitHub 存储库以及 StackOverflow 上的各种问题...但我找不到答案，所以这太明显了，或者其他人都没有碰到它。

Braintree DropIn 没有为我提供我想要的 Angular.JS 应用程序的用户体验，因此支持人员建议我尝试托管字段。

我真的很想尽可能多地模拟 DropIn 功能

https://www.braintreepayments.com/features/drop-in

但是托管字段的库还不存在(我可以理解 - 毕竟它在技术上仍处于测试阶段)。

但是，我的实现(我从 Braintree 支持页面的各个地方零碎地抓取)没有收到任何类型的事件通知。

它为好/坏卡号提供了适当的颜色，但它不会触发 onFieldEvent 告诉我使用了哪种类型的卡，所以我可以放一个漂亮的小图形。

托管字段工作 - 我有整个流程工作 - 这不是问题 - 我的问题是我配置错误以至于 onFieldEvent 没有被触发？

我使用的是最新发布的 API JS 文件:

https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.18.min.js

对 Braintree.setup 的完整调用如下:

           $scope.CCType = "Images/pixel.gif";
           braintree.setup(token, "custom", {
                  displayName : "Test Hosted Fields - Sandbox Enviro",
                  id: $scope.PaymentFormName,
                  hostedFields: { 
                      styles: {
                        "input": {
                          "font-size": "12pt",
                          "color": "#3A3A3A",
                          "width":"50%",
                          "padding":"3px",
                          "margin":"3px"
                        },  
                        ".number": {
                          "font-family": "inherit"
                        },
                        ":focus": {
                          "color": "blue"
                        },
                        ".valid": {
                          "color": "green"
                        },
                        ".invalid": {
                          "color": "red"
                        },
                        "@media screen and (max-width: 700px)": {
                          "input": {
                            "font-size": "14pt"
                          }
                        }
                      },
                      number: {
                        selector: "#card-number"
                      },
                      cvv: {
                        selector: "#cvv"
                      },
                      expirationDate: {
                        selector: "#expiration-date",
                        placeholder: "mm/yyyy"
                      },
                      postalcode: {
                        selector: "#postal-code"
                      }
                  },
                  paymentMethodNonceInputField: "payment_method_nonce",
                  amount: $scope.selectedItem.cost,
                  currency: 'CAD',
                  onReady : function(response) {
                        console.log("in OnReady");
                        $scope.PaymentProcessing = true;               
                  },
                  onPaymentMethodReceived : function(response) {
                        console.log("in onPaymentMethodReceived");
                        console.log(response);
                        console.log($scope.holdTransVars);

                        $scope.userPaymentMethod = response;
                        $scope.PaymentMethod = true;
                        $scope.PaymentProcessing = "";
                        $scope.BraintreeSale().then( function(result) {
                            $scope.PaymentProcessing = "complete";
                        },
                        function(result) {
                            console.log(result);
                            $scope.PaymentProcessing = "error";
                        });
                  },
                  onError : function(response) {
                      console.log("in onError");
                      console.log(response);
                      $scope.processingerrormsg = response.message;
                  },
                  onFieldEvent: function (event) {
                    console.log(event);
                    if (event.card) {
                        console.log(event.card.type);
                        switch(event.card.type) {
                            case  'master-card':
                                    $scope.CCType = "Images/mastercard.png";
                                    break;
                            case  'american-express':
                                    $scope.CCType = "Images/american_express.png";
                                    break;
                            case  'discover':
                                    $scope.CCType = "Images/discover.png";
                                    break;
                            case  'jcb':
                                    $scope.CCType = "Images/jcb.png";
                                    break;
                            case  'visa':
                                    $scope.CCType = "Images/visa.png";
                                    break;
                            case  'diners-club':
                            case  'unionpay':
                            case  'maestro':
                            default:
                                    $scope.CCType = "Images/pixel.gif";
                        }

                    }
                  }
                });

虽然我确实看到了“onReady”和“onPaymentReceived”的日志条目，但在将有效(或无效)的 CC 输入托管号码字段后，控制台日志没有显示任何内容。我希望至少能看到记录的事件对象，但没有任何显示。

我见过的其他示例使用 JQuery 来实现此目的 - 我正在寻找 Angular(或 JQLite)解决方案。但当然，如果事件没有触发，那么解决方案是什么都没有关系 - 它不会起作用。

根据我在 DropIn 演示中看到的内容，输入“41”应该足以将卡识别为 Visa。输入“52”应该足以将卡识别为万事达卡。我可以在不触发事件的情况下输入整个卡号。

这是调用参数冲突的情况吗？ (或者可能是 BrainTree 开发人员 - 我知道您正在阅读这些内容)可以告诉我这是否是此版本 HostedFields 的已知问题？？)

Answer 1

您的 onFieldEvent 回调在 hostedFields 之外。它应该嵌套在 hostedFields 中。

braintree.setup(token, "custom", {
  hostedFields: { 
    ....
    onFieldEvent: function (event) {
      ....
    }
  },
  ....
});