Braintree hosted fields javascript php send nonce in ajax

Hosted Fields of Braintree are small, transparent iframes that replace the sensitive credit card inputs in your checkout flow, It helps you meet the latest data security requirements.

In this you need not to take the PCI Compliance as credit card details are in Braintree and process by Braintree. User will feel he is adding credit card details in your website and in actual its NOT.

After doing couples of days hard work, I am able to integrate the braintree hosted fields.
Following are HTML Form

<form action="/braintree/submitform" id="my-payment-form" method="GET">
<div class="braintreeinput">
<label for="card-number">Card Number</label>
      <br />
<div id="card-number">
</div>
</div>
<div class="braintreeinput">
<label for="cvv">CVV</label>
      <br />
<div id="cvv">
</div>
</div>
<div class="braintreeinput">
<label for="expiration-month">Expiration Month</label>
      <br />
<div id="expiration-month">
</div>
</div>
<div class="braintreeinput">
<label for="expiration-year">Expiration Year</label>
      <br />
<div id="expiration-year">
</div>
</div>
<div class="payBtnCont">
<input id="mainSubmitBtn" type="submit" value="Send Money" />
    </div>
</form>

Add Following javascript in web page

http://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.17.js

Get the Client Token from Server and set in javascript variable as below:

var clientToken = 'CLIENT_TOKEN_FROM_SERVER';

Following are javascript code:

      braintree.setup(clientToken, "custom", {
        id: "my-payment-form",
        hostedFields: {
          number: {
            selector: "#card-number"
          },
          cvv: {
            selector: "#cvv"
          },
          expirationMonth: {
            selector: "#expiration-month"
          },
          expirationYear: {
            selector: "#expiration-year"
          },
          styles:{
            ".braintreeinput": {
            "font-size": "16pt",
            "color": "#3A3A3A",
            "line-height" : "40px"
          }  
          }
        },onPaymentMethodReceived:function(nonce){
             console.log(JSON.stringify(response));
            /*Response:
{"nonce":"e1db0653-7a83-4022-8213-7e73504e7f88","details":{"lastTwo":"11","cardType":"Visa"},"type":"CreditCard"}*/


            $.ajax({
                url:'/braintree/submitform',
                data:'payment_method_nonce='+response.nonce,
                type:'POST',
                dataType:'json',
                success: function(response) {
                    //Ajax call results comes here
                }                
            });

            return false;
          
      }
        }
      
              ); 

Once you get the nonce in API call "/braintree/submitform", you can charge from customer using below code.

$result = Braintree_Transaction::sale([
  'amount' => '10.00',
  'paymentMethodNonce' => nonceFromTheClient,
  'options' => [
    'submitForSettlement' => True
  ]
]);

Best Related Posts are Following:

1. Braintree Questions and Answers - Javascript+PHP.
2. Manage Customer Details in Braintree.
3. Hosted Field Integration - Braintree.
4. Braintree payment gateway integration.