String nonce is not being generated

Question

I’m using the Braintree API and I can put the dropin form of them on the page:

var braintreeToken = @Html.Raw(Json.Encode(Model.brainTreeToken));

braintree.setup(
    braintreeToken,
    "dropin", {
        container: "payment-form"
    });

...

That is the result:

In their documentation it says braintree.js will add a hidden input named payment_method_nonce to your form, ie, is added a hidden field with the value of the nonce.

In my controller, I get this field in Formcollection but it always comes as an empty string. It does not come null, it comes empty.

[HttpPost]
public void CreateTransaction(FormCollection collection)
{
     string payment_method_nonce = collection["payment_method_nonce"];

The string above is always empty. Supposedly, it would bring a nonce string to do the transaction. How to solve this?

EDIT

The form I write in the view is:

<form id="createTransactionForm" method="post">
    <div id="payment-form"></div>
    <input type="submit" value="Test - Pay">
</form>

The id="payment-form" div will be filled with the Braintree dropin.

Using the browser inspector you can see the final HTML result, which results in one form within another. I have wondered if this is correct, if the form I write is necessary, and yes, it is so.

The result:

Answer 1

To work, payment_method_nonce needs to be created as a field <input>. May type=hidden. In your case, the field is not being created this way.

A suggestion would be you create the empty field and fill in using some JS command:

<form id="createTransactionForm" method="post">
    <div id="payment-form"></div>
    <input type="hidden" name="payment_method_nonce" value>
    <input type="submit" value="Test - Pay">
</form>