javascript - Angular controller can't detect Braintree payment nonce dynamically inputed field - Stack Overflow

admin管理员组

文章数量:1393107

Braintree's customer creation SDK system generates a nonce input field in the form as soon as you hit submit.

<input name="payment_method_nonce" type="hidden" value="nonce-here">

However, with Angular's ng-model input identification system I can't detect the dynamically generated input in my controller. I'm executing a function in my controller as soon as the form is submitted.

<form id="checkout" id="checkout" ng-submit="processForm(formData)">

As you can see, there's no way to collect the value of the nonce and submit it to a brain tree API mand such as creating a new user's payment method.

From the controller the data would be submitted to the braintree api mand below using $http.

gateway.customer.create({
creditCard: {
token: "creditCard123",
},
paymentMethodNonce: "nonce-from-the-client"
}, function (err, result) {
});

Am I going about this the wrong way? Should I just jerry-rig a solution using pure node even though this application is in Angular/express? Or should I use jquery/angular to implant a ng-model in the said input field?

Braintree's customer creation SDK system generates a nonce input field in the form as soon as you hit submit.

<input name="payment_method_nonce" type="hidden" value="nonce-here">

However, with Angular's ng-model input identification system I can't detect the dynamically generated input in my controller. I'm executing a function in my controller as soon as the form is submitted.

<form id="checkout" id="checkout" ng-submit="processForm(formData)">

As you can see, there's no way to collect the value of the nonce and submit it to a brain tree API mand such as creating a new user's payment method.

From the controller the data would be submitted to the braintree api mand below using $http.

gateway.customer.create({
creditCard: {
token: "creditCard123",
},
paymentMethodNonce: "nonce-from-the-client"
}, function (err, result) {
});

Am I going about this the wrong way? Should I just jerry-rig a solution using pure node even though this application is in Angular/express? Or should I use jquery/angular to implant a ng-model in the said input field?

• javascript
• angularjs
• node.js
• express
• braintree

Share Improve this question Follow edited Feb 4, 2015 at 20:06 hairboat 6501919 silver badges3030 bronze badges asked Jan 20, 2015 at 4:11 Elliot RobertElliot Robert 35511 gold badge44 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I work at Braintree on the SDK team.

You can use a callback to listen for the nonce instead of having it automatically written to the DOM.

braintree.setup('CLIENT_TOKEN', 'dropin', {
    container: 'container',
    paymentMethodNonceReceived: function (event, nonce) {
      // Do something with the nonce here
    }
});

This will also prevent the form from being automatically submitted on your behalf. You can read some further documentation here. If you continue to encounter issues, feel free to reach out to [email protected].

I got it working by experimenting with putting the Braintree setup code in the angular controller and writing the post url call in node. I wanted to use Angular for as much as possible but writing the urls in Angular .Config routes didn't seem to be possible. Both answers I received helped me get it working. Thank you both.

In controller

$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();
            }
        });
    }
  });

In 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);
}

And front end.

<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>

As @kdetella said, using paymentMethodNonceReceived should allow you to intercept the nonce instead of picking it up from the DOM.

If it would make things easier, you can use braintree-angular for a slightly neater integration with Angular. Here's an example of using paymentMethodNonceReceived.

本文标签： javascriptAngular controller can39t detect Braintree payment nonce dynamically inputed fieldStack Overflow