Braintree javascript 客户端 - 拆解调用不会删除现有集成 - 我的托管字段出现错误

Question

我目前正在尝试将 braintree 集成到我的 angularJS 网络应用程序中，但我遇到了以下问题。

当用户选择执行付款时，我会打开一个模式来显示我的付款表格。在模态的控制器中，我运行在 braintree.setup(...) 函数的开头。我在表单中使用托管字段。一切正常（提交测试卡号并成功取回随机数），但是当我关闭模式然后重新打开它时，我使用的托管字段出现以下错误：

Object {message: "Cannot place two elements in "#card-number""}
Object {message: "Cannot place two elements in "#cvv""}
Object {message: "Cannot place two elements in "#expiration-month""}
Object {message: "Cannot place two elements in "#expiration-year""}

我尝试使用提供的拆卸方法（如文档中所示），但仍然不断收到该错误。

在 modal 的控制器中，当我从服务器获得令牌时调用函数 $scope.setupBraintree($scope.token)。 $scope.setupBraintree 定义如下：

$scope.setupBraintree = function(token){

    braintree.setup(token, "custom", {
        id: "paymentForm",
        hostedFields: {
            number: {
                selector: "#card-number"
            },
            cvv: {
                selector: "#cvv"
            },
            expirationMonth: {
                selector: "#expiration-month"
            },
            expirationYear: {
                selector: "#expiration-year"
            }
        },
        onReady: function(integration){
            $scope.checkout = integration;
        }
    });
};

然后，当用户关闭模式时，$scope.cancel() 被调用，其定义如下：

$scope.cancel = function() {

    $scope.checkout.teardown(function () {
                 $scope.checkout = null;
                // braintree.setup can safely be run again!
    });

    $uibModalInstance.dismiss('cancel');
};

所以当我想要销毁 braintree 集成时（当模态关闭时），我调用了 teardown 方法。当我关闭模态时，$scope.checkout 确实为空（这意味着如预期的那样拆卸运行），但是当我再次打开模态时（我再次向服务器执行新请求以获取一个客户端令牌）我收到了关于托管字段的上述错误，所以我想知道我是否遗漏了一些东西，或者托管字段的拆卸是否有任何问题。

感谢您的帮助，巴比斯

Answer 1

拆机方法一切正常。问题是模态上注册的事件被触发了两次，因此设置是运行模态第二次打开时的两次。

修复了这个问题并按预期进行了拆卸，每次加载模态时设置功能都会顺利运行

Braintree javascript 客户端 - 拆解调用不会删除现有集成 - 我的托管字段出现错误

Braintree javascript client - Teardown call does not remove the existing integration - gettings error on my hosted fields

javascript

braintree

teardown

angularjs