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

Question

我很难从Braintree Hosted Fields API获取字段级事件。

我已经阅读了Evan Hahn和Jeff Carp(以及其他)的GitHub reppos以及StackOverflow上的各种问题…但是我找不到答案，所以这要么太明显了，要么没人遇到过。

Braintree DropIn并没有为我提供我想要的Angular.JS应用程序的用户体验，所以支持人员建议我尝试Hosted Fields。

我真的很想尽可能地模拟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的完整呼叫。设置如下:

           $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"one_answers"onPaymentReceived"的日志条目，但在将有效(或无效)cc输入到Hosted number字段时，控制台日志没有显示任何内容。我希望至少看到事件对象被记录，但是没有显示。

我看到的其他例子使用JQuery来实现这一点-我正在寻找一个Angular(或JQLite)的解决方案。但是，当然，如果事件没有触发，那么无论解决方案是什么-它都不会工作。

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

这是调用中参数冲突的情况吗?(或者可能是BrainTree开发人员-我知道你正在阅读这些)可以告诉我这是否是这个版本的hostdfields的已知问题??)

Answer 1

你的onFieldEvent回调在hostdfields之外。它应该嵌套在hostdfields中。

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