Question

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

我已经阅读了Evan Hahn和Jeff Carp（以及其他人）的GitHub回购以及StackOverflow上的各种问题...但我找不到答案，所以这要么太明显了，要么就是没有其他人有遇到它。

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

我真的想尽可能地模仿DropIn功能

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

但托管字段的库还没有（我可以理解 - 毕竟它仍然是技术上的测试版）。

然而，我的实施（我从Braintree支持页面上的各个地方零碎地抓取）并没有接收任何类型的事件通知。

它给了我适当的颜色好/坏卡号，但它没有触发onFieldEvent，告诉我使用了什么类型的卡，所以我可以放一个漂亮的小图形。 / p>

托管字段有效 - 我的整个流程都有效 - 这不是问题 - 我遇到的问题是我错误配置了什么导致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";
                        }

                    }
                  }
                });

虽然我确实看到＆＃34; onReady＆＃34;的日志条目和＆＃34; onPaymentReceived＆＃34;，控制台日志在将有效（或无效）CC输入托管号码字段时不显示任何内容。我希望至少看到事件对象被记录，但没有显示。

我见过的其他例子使用JQuery来实现这一点 - 我正在寻找一个Angular（或JQLite）解决方案。但是，当然，如果事件没有发生，那么解决方案的作用并不重要 - 它无法发挥作用。

根据我在DropIn演示中看到的内容，输入＆＃34; 41＆＃34;应该足以将卡识别为Visa。输入＆＃34; 52＆＃34;应该足以将卡识别为万事达卡。我可以在没有事件发生的情况下输入整个卡号。

这是电话中参数冲突的情况吗？（或者也许是BrainTree开发人员 - 我知道你正在读这些）可以告诉我这个版本的HostedFields是否已知问题？）

Answer 1

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

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

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

1 个答案: