Braintree - paymentMethodNonceReceived not being invoked

Question

I have setup dropin UI for braintree. I can see the UI fine. Before that I created the customer and I can see the customer on braintree-sandbox. Now I want to add payment method to the customer. I am trying following code, but paymentMethodNonceReceived is not being invoked. Not sure why.

braintree.setup("<?=CLIENT_TOKEN_FROM_PHP?>", 
    "dropin", 
    {
      container: "divBrainTreeContainer",
      paymentMethodNonceReceived: function (event, nonce) {
        console.log(nonce);
        $('#formProfile').append('<input type="hidden" name="payment_method_nonce" value="'+nonce+'" />');
        $('#formProfile').submit();
      }
    }
);

Answer 1

I am using below JavaScript and its working fine:

  braintree.setup(clientToken, "custom", {
    id: "my-sample-form",
    hostedFields: {
      number: {
        selector: "#card-number"
      },
      cvv: {
        selector: "#cvv"
      },
      expirationMonth: {
        selector: "#expiration-month"
      },
      expirationYear: {
        selector: "#expiration-year"
      },
    },onPaymentMethodReceived:function(nonce){
        console.log(JSON.stringify(nonce));
        return false;

  }
    }

          ); 

Above gives below response and DOES NOT submit the form:

{"nonce":"ff2662e1-f1fd-42a3-a16f-d8f3213a2406","details":{"lastTwo":"11","cardType":"Visa"},"type":"CreditCard"}

means use onPaymentMethodReceived instead of paymentMethodNonceReceived

Thanks http://www.web-technology-experts-notes.in/2015/06/braintree-payment-gateway-integration.html

Answer 2

As per @kdetella's comment, there should be a submit button inside the <form> element to receive payment method nonce.