CODEWITHSUNDEEP
javascriptbraintree
user1741614
user1741614

Reputation: 43

BrainTree Hosted Fields onPaymentMethodReceived function not working returning nonce

I am having a hard time figuring out why the onPaymentMethodReceived in a hosted fields is not returning any values. `

  <form action="" id="my-form" method="post">
      <label for="a">Amount</label>
      <div id="amount"> 
          <input type="text" name="amount" value="400" id="amount" />
      </div>

      <label for="card-number">Card Number</label>
      <div id="card-number"> 
          <input type="text" name="cardNumber" value="4111111111111111" id="cardNumber" />
      </div>

      <label for="cvv">CVV</label>
      <div id="cvv">
          <input type="text" name="CVV" value="020" id="cv-v" />
       </div>
      <label for="expiration-month">Expiration Month</label>
      <div id="expiration-month">
          <input type="text" name="expirMonth" value="10" id="expirMonth" />
       </div>

      <label for="expiration-year">Expiration Year</label>
      <div id="expiration-year">
          <input type="text" name="expirYear" value="20" id="expirYear" />
      </div>
      <input type="submit" value="Pay" id="btn_submit"/>
  </form>

 <script>
  var nonce0 ;
  braintree.setup(clientToken, "custom", 
    {
      id: "my-form",
      hostedFields: {
            number: {
              selector: "#card-number"
            },
            cvv: {
              selector: "#cvv"
            },
            expirationMonth: {
              selector: "#expiration-month"
            },
            expirationYear: {
              selector: "#expiration-year"
            },
      },
      onPaymentMethodReceived:function(nonce){
          console.log("in onPaymentMethodReceived");
          console.log(nonce);
          nonce0 = nonce;
          alert('OnPaymentMR');
          console.log(JSON.stringify(nonce));
          return false;
      },
      onError :function(obj){
          alert('onError');
          console.log(JSON.stringify(obj));
     }
   }); 
    console.log('BTree = '+ nonce0);
  </script>

` I wanted to store the nonce returned but nothing is happening, console.log is not showing any values. Even the onError is not doing anything either.
Using breakpoints,I can tell that the hidden nonce is coming back but the callback function is not getting fired.
I tried it with the Dropin-UI and it does work and I can get the nonce from the onPaymentMethodReceived. Not sure what I am doing wrong.

Upvotes: 0

Views: 715

Answers (2)

StarSagar
StarSagar

Reputation: 366

In "onPaymentMethodReceived" method you need to try "nonce.nonce" var to check nonce in responce. Like -

 onPaymentMethodReceived:function(obj) {
  var nonce_from_braintree = obj.nonce                
}

Also you can check below link to get more detailed script to manipulate braintree payment gateway integration with hosted field.

http://www.ilovephp.net/php/simple-braintree-paypal-payment-gateway-integration-in-php-with-demo-examples/

Hope this helps you...:)

Upvotes: 0

Dana K.
Dana K.

Reputation: 319

Full disclosure: I work as a developer for Braintree

When using Hosted Fields, the form should only include a div container for each payment field. Your implementation would look something like this:

<form action="" id="my-form" method="post">
  <label for="a">Amount</label>
  <div id="amount"></div>

  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="cvv">CVV</label>
  <div id="cvv"></div>

  <label for="expiration-month">Expiration Month</label>
  <div id="expiration-month"></div>

  <label for="expiration-year">Expiration Year</label>
  <div id="expiration-year”></div>

  <input type="submit" value="Pay" id="btn_submit"/>
</form>

The Braintree setup script will then render iframes to handle payment field inputs. If you continue to have issues, you can always get in touch with Braintree support.

Upvotes: 2

Related Questions