Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onPaymentMethodReceived callback not called with paypal

See original GitHub issue

I have the following setup for our Braintree integration:

braintree.setup(client_token, 'custom', {
  id: 'checkout',
  paypal: {
    container: 'paypal-container',
    onPaymentMethodReceived: function(obj) {
      // this is never called
      console.log(obj);
    }
  }
});

When using the PayPal button, the payment_method_nonce is correctly inserted and updated, but the onPaymentMethodReceived callback is never called. It works, however, when I change the braintree.setup call to be paypal only, instead of custom:

braintree.setup(client_token, 'paypal', {
  container: 'paypal-container',
  onPaymentMethodReceived: function(obj) {
    // this is called
    console.log(obj);
  }
});

Any idea what I’m doing wrong?

Issue Analytics

State:
Created 8 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

2reactions

crookedneighborcommented, Feb 8, 2017

@basco-johnkevin You can do this with v3 of the sdk.

Here’s an example using the new PayPal Checkout component:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>PayPal Autofill Form Demo (v3)</title>
    <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
    <style>
      .ui.container {
        margin: 50px auto;
      }

      .ui.container .segment {
        max-width: 600px;
        margin:auto;
      }
    </style>
  </head>
  <body>
    <div class="ui container">
      <h1>PayPal Autofill Form Demo (v3)</h1>
      <div class="ui form segment">
        <div id="paypal-button"></div>
        <div class="field">
          <label>First Name<label>
          <input id="first-name" />
        </div>
        <div class="field">
          <label>Last Name<label>
          <input id="last-name" />
        </div>
        <div class="field">
          <label>Email<label>
          <input id="email" />
        </div>
      </div>
    </div>

    <!-- creates the braintree object on the window -->
    <script src="https://js.braintreegateway.com/web/3.8.0/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.8.0/js/paypal-checkout.min.js"></script>
    <!-- creates the paypal object on the window and manages UI for PayPal login -->
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    <script>
      // fill in with your own client token or tokenization key
      var auth =  'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJhZTc3NzI1NzJmN2U4ZTQyZjVmNGU0YTQ4ZTE1YTg0NTA2Y2MyY2VkMzUxOTNjOTMwYTAxN2YxZDg2YTRhZThlfGNyZWF0ZWRfYXQ9MjAxNy0wMi0wOFQyMjowMzozMy40NDU3MTQxMTcrMDAwMCZtZXJjaGFudF9pZD1oaDRjcGMzOXpxNHJnamNnJnB1YmxpY19rZXk9cTNqdHNxM2QzcDJyaDV2dCIsImNvbmZpZ1VybCI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb206NDQzL21lcmNoYW50cy9oaDRjcGMzOXpxNHJnamNnL2NsaWVudF9hcGkvdjEvY29uZmlndXJhdGlvbiIsImNoYWxsZW5nZXMiOlsiY3Z2Il0sImVudmlyb25tZW50Ijoic2FuZGJveCIsImNsaWVudEFwaVVybCI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb206NDQzL21lcmNoYW50cy9oaDRjcGMzOXpxNHJnamNnL2NsaWVudF9hcGkiLCJhc3NldHNVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgudmVubW8uc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFuYWx5dGljcyI6eyJ1cmwiOiJodHRwczovL2NsaWVudC1hbmFseXRpY3Muc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbS9oaDRjcGMzOXpxNHJnamNnIn0sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsInBheXBhbEVuYWJsZWQiOnRydWUsInBheXBhbCI6eyJkaXNwbGF5TmFtZSI6ImJ0IiwiY2xpZW50SWQiOiJBVlFKZjlhLWI2am1ZRmdpb05wSTJpNTdyc1FrSGpSWlp2NGQ5RFpMVFUwbkJTdWZraHdBQ0FaeGowbGR1ODVqYXNNMDJqRlJQS2FUSU5DTiIsInByaXZhY3lVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vcHAiLCJ1c2VyQWdyZWVtZW50VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3RvcyIsImJhc2VVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFzc2V0c1VybCI6Imh0dHBzOi8vY2hlY2tvdXQucGF5cGFsLmNvbSIsImRpcmVjdEJhc2VVcmwiOm51bGwsImFsbG93SHR0cCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOmZhbHNlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImM1eWN3MnN2eWtuendqdHoiLCJjdXJyZW5jeUlzb0NvZGUiOiJVU0QifSwiY29pbmJhc2VFbmFibGVkIjp0cnVlLCJjb2luYmFzZSI6eyJjbGllbnRJZCI6IjdlOTVlMGZkZGExNDg0NjY1OGIzOGY3NzJiYTJkMzBjZDc4YTlmMjE0NGM1MzkwODZlNTc5MGJmMzc3ZmJlZWQiLCJtZXJjaGFudEFjY291bnQiOiJjb2luYmFzZS1zYW5kYm94LXNoYXJlZC1tZXJjaGFudEBnZXRicmFpbnRyZWUuY29tIiwic2NvcGVzIjoiYXV0aG9yaXphdGlvbnM6YnJhaW50cmVlIHVzZXIiLCJyZWRpcmVjdFVybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tL2NvaW5iYXNlL29hdXRoL3JlZGlyZWN0LWxhbmRpbmcuaHRtbCIsImVudmlyb25tZW50IjoicHJvZHVjdGlvbiJ9LCJicmFpbnRyZWVfYXBpIjp7ImFjY2Vzc190b2tlbiI6InNhbmRib3hfNmRkdG13X3B6YjZ3cF93ZHdoY3lfOWhnNm5iX2N5NiIsInVybCI6Imh0dHBzOi8vcGF5bWVudHMuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbSJ9LCJtZXJjaGFudElkIjoiaGg0Y3BjMzl6cTRyZ2pjZyIsInZlbm1vIjoib2ZmIn0'
      braintree.client.create({
        authorization: auth
      }, function (err, btClient) {
        braintree.paypalCheckout.create({
          client: btClient
        }, function (err, btPaypal) {
          paypal.Button.render({
           env: 'sandbox', // or 'production'

           locale: 'en_US',

           payment: function () {
             return btPaypal.createPayment({
               flow: 'vault'
             });
           },

           onAuthorize: function (data, actions) {
             return btPaypal.tokenizePayment(data).then(function (payload) {
               fillInForm(payload.details)
             }).catch(function (err) {
               // handle error
             });
           },

           onCancel: function (data) {
             console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
           },

           onError: function (err) {
             console.error('checkout.js error', err);
           }
          }, '#paypal-button'); // the PayPal button will be rendered in an html element with the id `paypal-button`
        })
      })

    function fillInForm (data) {
      document.getElementById('email').value = data.email
      document.getElementById('first-name').value = data.firstName
      document.getElementById('last-name').value = data.lastName
    }
    </script>
  </body>
</html>

0reactions

johnnncodescommented, Feb 8, 2017

@kyledetella I’m experiencing a similar issue. onPaymentMethodReceived callback is not immediately called after paypal login flow when I’m using custom integration & supporting multiple payment methods (credit card & paypal). It is called immediately though when I’m using custom integration but only support a single payment method (paypal).

https://gist.github.com/anonymous/255702dbd196d3b5592f395b9ad60d3b

I’m now using onSuccess callback as a solution but I wanted to pre-populate our form fields with the customer’s paypal first name, last name, address, zip etc… Unfortunately, those infos are not available on the onSuccess callback. Those info are available on onPaymentMethodReceived. How can I fetch those details inside the onSuccess callback?

Top Results From Across the Web

Braintree - paymentMethodNonceReceived not being invoked

I am using below JavaScript and its working fine: braintree.setup(clientToken, "custom", { id: "my-sample-form", hostedFields: { number: { selector: ...

PayPal - Braintree Developer Documentation

A callback function that is fired immediately after a user has logged in to PayPal; it is not fired upon form submission like...

Configuration for braintree.setup - PayPal Developer

onPaymentMethodReceived, any, function, This callback is called after the successful tokenization of a payment method. When subscribed to this callback, ...

Best Practices and Troubleshooting - Braintree Developer ...

When calling braintree.setup , you can attach a callback to onReady which will ... onPaymentMethodReceived: function (payload) { // retrieve nonce from ...

Setup and Integration - Braintree Developer Documentation

For more information about these top-level callbacks, see the JavaScript SDK reference. onPaymentMethodReceived. This is called when a payment_method_nonce has ...