CODEWITHSUNDEEP
javascriptangularjsnode.jsexpressbraintree
Elliot Robert
Elliot Robert

Reputation: 355

Angular controller can't detect Braintree payment nonce dynamically inputed 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 command such as creating a new user's payment method.

From the controller the data would be submitted to the braintree api command 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?

Upvotes: 3

Views: 2698

Answers (3)

Elliot Robert
Elliot Robert

Reputation: 355

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>

Upvotes: 2

jeffcarp
jeffcarp

Reputation: 53

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.

Upvotes: 0

kdetella
kdetella

Reputation: 661

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

Upvotes: 6

Related Questions