角度控制器无法检测Braintree payment nonce动态输入字段
只要您点击submit，Braintree的customer creation SDK系统就会在表单中生成一个随机数输入域。
<input name="payment_method_nonce" type="hidden" value="nonce-here">但是，使用Angular的ng-model输入识别系统，我无法在控制器中检测到动态生成的输入。表单一提交，我就在我的控制器中执行一个函数。
<form id="checkout" id="checkout" ng-submit="processForm(formData)">正如您所看到的，没有办法收集nonce的值并将其提交给brain tree API命令，例如创建新用户的支付方式。
在控制器中，使用$http将数据提交给下面的braintree api命令。
gateway.customer.create({
creditCard: {
token: "creditCard123",
},
paymentMethodNonce: "nonce-from-the-client"
}, function (err, result) {
});我是不是走错路了？即使这个应用程序是在Angular/express中，我也应该使用纯节点来构建一个解决方案吗？或者我应该使用jquery/angular在上述输入字段中植入一个ng-model？
回答 3
Stack Overflow用户
发布于 2015-01-21 00:41:08
我在Braintree的SDK团队工作。
您可以使用回调来侦听nonce，而不是将其自动写入DOM。
braintree.setup('CLIENT_TOKEN', 'dropin', {
container: 'container',
paymentMethodNonceReceived: function (event, nonce) {
// Do something with the nonce here
}
});这也将阻止表单代表您自动提交。您可以阅读更多文档here。如果您仍然遇到问题，请随时联系support@getbraintree.com。
Stack Overflow用户
发布于 2015-01-21 08:56:47
我通过实验将Braintree设置代码放在角度控制器中，并在node中编写post url调用，从而使其正常工作。我想尽可能多地使用Angular，但在Angular .Config路由中编写urls似乎是不可能的。我收到的两个答案都帮助我让它正常工作。谢谢你们两位。
在控制器中
$scope.$watch('cToken', function (newVal, oldVal) { //Watch for client token to be loaded then place in braintree.setup api call.
if (!newVal) return;
if (newVal){
console.log('set braintree');
braintree.setup($scope.cToken, 'custom', {
id: "checkout",
paymentMethodNonceReceived: function (event, nonce) {
// Do something with the nonce here
event.preventDefault();
}
});
}
});在node.js app.js中
app.post('/api/generateNonce', routes.generateNonce);
exports.generateNonce = function(req, res){
var nonce = req.body.payment_method_nonce;
console.log('nonce '+nonce);
gateway.customer.create({
id: 'clientId2222',
paymentMethodNonce: nonce
}, function (err, result) {
var result = JSON.stringify(result);
console.log('result '+ result);
console.log(result.success);
console.log(result.message);
// e.g f28wm
});
res.send(nonce);
}和前端。
<form name="creatClientForm" class="css-form" id="checkout" action="/api/generateNonce" method="POST" enctype="multipart/form-data">
<input data-braintree-name="number" value="4111111111111111">
<input data-braintree-name="expiration_date" value="10/20">
<input type="submit" id="submit" value="submitform">
</form>Stack Overflow用户
发布于 2015-01-21 03:38:35
正如@kdetella所说，使用paymentMethodNonceReceived应该允许您拦截nonce，而不是从DOM中拾取它。
如果可以让事情变得更简单，您可以使用braintree-angular与Angular进行稍微整洁的集成。下面是使用paymentMethodNonceReceived的an example。
https://stackoverflow.com/questions/28037645
复制相似问题
腾讯云开发者
