Callback function of tokenizeCard it's not called on Braintree

Question

I been integrating Braintree with my application and I found a problem. I need to use the method tokenizeCard but it seems the callback it's not called and I don't understand why.

function buyNow() {
    var token = getSessionVarFromView('client_token_braintree');
    console.error(token);
    braintree.setup(token, "custom", {id: "braintreePaymentForm"});
    var client = new braintree.api.Client({clientToken: token});
    client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, function (err, nonce) {
       console.error("On tokenize card");
    });
}

And my form it's this one:

      <form method="POST" name="braintreePaymentForm" id="braintreePaymentForm">
                <div class='form-row'>
                  <div class='col-xs-8 form-group required'>
                    <label class='control-label'>Card number</label>
                    <input class='form-control' size="20" autocomplete="off" data-braintree-name="number">
                  </div>
                  <div class='col-xs-4 form-group required'>
                    <label class='control-label'>Security Code</label>
                    <input class='form-control' size="20" autocomplete="off" data-braintree-name="cvv">
                  </div>
                </div>
                <div class='form-row'>
                  <div class='col-xs-6 form-group required'>
                    <label class='control-label'>Name on card</label>
                    <input class='form-control' size="20" autocomplete="off" data-braintree-name="name_on_card">
                  </div>
                  <div class='col-xs-3 form-group required'>
                    <label class='control-label'>Expires on</label>
                    <input class='form-control' size="20" autocomplete="off" data-braintree-name="expiration_month">
                  </div>
                  <div class='col-xs-3 form-group required'>
                    <input class='form-control' size="20" autocomplete="off" data-braintree-name="expiration_year">
                  </div>
                </div>
                  <div id="buyNowBtn">
                </div>
            </form>

The method buyNow it's called after the user presses buy. The method to generate my client token in the server is:

Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('merchantId');
Braintree_Configuration::publicKey('publicKey');
Braintree_Configuration::privateKey('privateKey');  

$clientToken = Braintree_ClientToken::generate();
return $clientToken;

After this, the callback function of tokenizeCard never gets called.

I hope someone can help me.

Thank you

Answer 1

_{I work at Braintree. If you have further questions, you can always get in touch with our support team.}

The form submit button needs to be either a <button> or <input type="submit"> in order to correctly trigger the callback. You're using a <div>.