8

I have setup dropin UI for braintree. I can see the UI fine. Before that I created the customer and I can see the customer on braintree-sandbox. Now I want to add payment method to the customer. I am trying following code, but paymentMethodNonceReceived is not being invoked. Not sure why.

braintree.setup("<?=CLIENT_TOKEN_FROM_PHP?>", 
    "dropin", 
    {
      container: "divBrainTreeContainer",
      paymentMethodNonceReceived: function (event, nonce) {
        console.log(nonce);
        $('#formProfile').append('<input type="hidden" name="payment_method_nonce" value="'+nonce+'" />');
        $('#formProfile').submit();
      }
    }
);
Haris ur Rehman
  • 2,593
  • 30
  • 41
  • 4
    I work at Braintree on the SDK team. Do you have the `divBraintTreeContainer` element inside of a `form` element? If so, does that `form` contain a submit button? – kdetella Jan 21 '15 at 17:07
  • Ok @kdetella thanks, there was no submit button, I was submitting via javascript, but when I added the submit button, I got the payment_method_nonce. – Haris ur Rehman Jan 21 '15 at 17:35
  • 2
    @kdetella This fact about the submit button is not indicated anywhere on either the drop-in UI page or the Hello, Client page. It would be great to add this somewhere, as I was stumped by this too! It does not prevent a nonce coming down on a custom UI. – janson0 Feb 23 '15 at 22:27
  • 1
    @kdetella I would humbly suggest adding this to your documentation, because I just spent half a day trying to figure out why the callback was never called. More generally, though, forms are a thing of the past. I had to dig out info on how submit button markup looks like. Also, I'd much rather have a function that I can call that will initiate payment and call me back when done. – Jan Rychter May 13 '16 at 15:34

3 Answers3

7

I am using below JavaScript and its working fine:

  braintree.setup(clientToken, "custom", {
    id: "my-sample-form",
    hostedFields: {
      number: {
        selector: "#card-number"
      },
      cvv: {
        selector: "#cvv"
      },
      expirationMonth: {
        selector: "#expiration-month"
      },
      expirationYear: {
        selector: "#expiration-year"
      },
    },onPaymentMethodReceived:function(nonce){
        console.log(JSON.stringify(nonce));
        return false;

  }
    }

          ); 

Above gives below response and DOES NOT submit the form:

{"nonce":"ff2662e1-f1fd-42a3-a16f-d8f3213a2406","details":{"lastTwo":"11","cardType":"Visa"},"type":"CreditCard"}

means use onPaymentMethodReceived instead of paymentMethodNonceReceived

Thanks http://www.web-technology-experts-notes.in/2015/06/braintree-payment-gateway-integration.html

Kishan Chauhan
  • 1,216
  • 1
  • 12
  • 19
Poonam Gupta
  • 416
  • 6
  • 8
  • I am using braintree with js, I have added submit button inside the div id which I have mentioned in the container, but still I am unable to get nonce ,instead getting Uncaught Error: Could not stringify event: JSON.stringify is not a function. Please help – Kamini May 24 '16 at 11:58
5

As per @kdetella's comment, there should be a submit button inside the <form> element to receive payment method nonce.

Haris ur Rehman
  • 2,593
  • 30
  • 41
  • I am using braintree with js, I have added submit button inside the div id which I have mentioned in the container, but still I am unable to get nonce ,instead getting Uncaught Error: Could not stringify event: JSON.stringify is not a function – Kamini May 24 '16 at 11:56
2

https://github.com/braintree/braintree-web/issues/58

For custom integration with multiple payment method, use onSuccess instead of onPaymentMethodReceived.

braintree.setup(TOKEN, 'custom', {
  id: 'checkout',
  paypal: {
    container: 'paypal-container',
    onSuccess: function (nonce, email) {
      // This will be called as soon as the user completes the PayPal flow
      // nonce:String
      // email: String
    }
  },
  onPaymentMethodReceived: function(obj) {
    // This will be called when the user submits the form
  }
});
horizon1711
  • 152
  • 1
  • 5
  • `OnSuccess` has been [deprecated](https://developers.braintreepayments.com/reference/client-reference/javascript/v2/paypal#options) – devlin carnate Sep 06 '17 at 23:37