2

我目前正在尝试将 Braintree 集成到我的 angularJS Web 应用程序中，但我面临以下问题。

当用户选择执行付款时，我会打开一个模式以显示我的付款表单。在模态的控制器中，我在函数的开头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""}

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

在模态的控制器中， $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确实为空（这意味着拆解按预期运行），但是当我再次打开模式时（再次向服务器执行新请求以获取客户端令牌）我得到了上述错误关于托管字段，所以我想知道我是否遗漏了某些内容，或者托管字段的拆解是否存在任何问题。

谢谢你的帮助，巴比斯

4

1 回答 1

0

使用拆卸方法一切都很好。问题是在模态上注册的事件被触发了两次，因此设置在模态第二次打开时运行了两次。

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

于 2016-02-18T21:08:59.380 回答