Braintree's payment_method_nonse is empty when trying to post data to server

Question

I'm trying to set up DROP-IN UI. I'm using Laravel 5.2 on the backend ( followed the setup as explained in the docs:

[https://laravel.com/docs/5.2/billing#braintree-configuration]

and i have created a BraintreeController.php and it returns the client token as json. It looks like this:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Braintree_ClientToken;
use App\Http\Requests;

class BraintreeController extends Controller
{
    public function token()
    {
        return response()->json(['token' => Braintree_ClientToken::generate() ], 200);
    }
} 

At this point everything is good.

On client side i have Angularjs set up and here is my BillingController.js :

$http.get('/braintree/token').then(function(result){
    braintree.setup(result.data.token, "dropin", {
        container: "payment",
        paypal: {
             button: {
                 type: 'checkout'
             }
        }
     });
});

$('#customButton').on('click', function(event) {
      var map = {};
      $('#billForm').find('input').each(function() {
        map[$(this).attr("name")] = $(this).val();
      });
      console.log(map);

      $http.post('/order/checkout', map).then(function(result){
          console.log(result);
      });
  });

And I have a simple html template billing.html containing the form like so:

<form id="billForm">
    <input type="text" name="fullname" id="fullname">
    <input type="text" name="address1" id="address1">
    <input type="text" name="city" id="city">
    <input type="text" name="postalcode" id="postalcode">

    <div id="payment"></div>
    <button id="customButton">Submit</button>
</form>

The problem I have is that in BillingController.js the logs are showing that the payment_method_nonse is "empty" or is "empty string". Does anyone have an idea what i am doing wrong? Thank you.

EDIT:

Just to add and show everyone the method on the receiving end of posted data. Basically i'm posting form data to /order/checkout to OrdersController.php inside the store method. And this is how it looks:

public function store(Request $request)
{
   $result = Braintree_Transaction::sale([
       'amount' => '10.00',
       'paymentMethodNonce' => $request->input('payment_method_nonce'),
       'options' => [
           'submitForSettlement' => True
       ]
   ]);

   dd($result);
}

And this spits back this:

Error {#211
  +success: false
  #_attributes: array:8 [
    "errors" => ErrorCollection {#213
      -_errors: ValidationErrorCollection {#227
        -_errors: []
        -_nested: array:1 [
          "transaction" => ValidationErrorCollection {#214
            -_errors: array:1 [
              0 => Validation {#212
                -_attribute: "base"
                -_code: "91508"
                -_message: "Cannot determine payment method."
              }
            ]
            -_nested: array:1 [
              "creditCard" => ValidationErrorCollection {#216
                -_errors: array:1 [
                  0 => Validation {#217
                    -_attribute: "cvv"
                    -_code: "81706"
                    -_message: "CVV is required."
                  }
                ]
                -_nested: []
                #_collection: []
              }
            ]
            #_collection: []
          }
        ]
        #_collection: []
      }
    }
    "params" => array:1 [
      "transaction" => array:4 [
        "type" => "sale"
        "amount" => "10.00"
        "paymentMethodNonce" => null
        "options" => array:1 [
          "submitForSettlement" => "true"
        ]
      ]
    ]
    "message" => """
      Cannot determine payment method.\n
      CVV is required.
      """
    "creditCardVerification" => null
    "transaction" => null
    "subscription" => null
    "merchantAccount" => null
    "verification" => null
  ]
}

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact our support team.}

Form data that gets entered into the Drop-in gets nonced when the form's submit button is clicked. Because your form does not have a submit button, no nonce is generated.

You can use the onPaymentMethodReceived callback to submit your form's data. When you define this callback, your form will not be submitted, which is the desired behavior you are indicating above.

Here is an example of where to define your onPaymentMethodReceived callback:

braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', {
  container: 'dropin-container',
  onPaymentMethodReceived: function (obj) {
      var map = {};
      $('#billForm').find('input').each(function() {
        map[$(this).attr("name")] = $(this).val();
      });
      map['payment_method_nonce'] = obj.nonce;
      console.log(map);

      $http.post('/order/checkout', map).then(function(result){
          console.log(result);
      });
  }
});

Keep in mind your form button will need the type='submit' attribute to trigger the callback.

If you wish to trigger your form submission while your onPaymentMethodReceived callback is defined, you can follow these instructions to do so.