braintree-web icon indicating copy to clipboard operation
braintree-web copied to clipboard

Specific PayPal API error message handling

Open borderistheocean opened this issue 1 year ago • 0 comments

General information

  • SDK version: 3.106.0
  • Environment: Sandbox
  • Browser and OS Version 127.0.6533.120 (Official Build) (64-bit) on Windows 11 Enterprise 23H2

Issue description

When creating a PayPal Checkout there isn't a way to intercept a user closing the pop out modal before it has fully loaded - when a user does this the onError callback returns the following message Error: Detected popup close.

The current solution is to handle the error this way:

  onCancel: () => {
    showInfoBanner('PayPal Payment cancelled');
  },
  onError: (e) => {
    switch (e.toString()) {
      case 'Error: Detected popup close':
        showInfoBanner('PayPal Payment cancelled');
        break;
      default:
        showError('PayPal error');
    }
  },

This solution however isn't ideal. The error stack trace seems to indicate that the generic message is retrieved from the PayPal SDK but isn't parsed in any meaningful way.

Error: Detected popup close
    at https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:118015
    at e.dispatch (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:14426)
    at e.resolve (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:13483)
    at e.dispatch (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:14646)
    at e.resolve (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:13483)
    at https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:13127

Error: Detected popup close
    at no.error (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:76410)
    at Array.<anonymous> (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:84791)
    at JSON.parse (<anonymous>)
    at o (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:84650)
    at po (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:84803)
    at Oo.u.on (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:89387)
    at Oo (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:89507)
    at https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:95826
    at n.try (https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:17031)
    at https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:95623
    at https://www.paypal.com/sdk/js?components=buttons&currency=GBP&vault=false&disable-funding=card&intent=authorize&client-id=CLIENTID:3:95875
    at sentryWrapped (http://localhost:8080/static/js/bundle.js:116681:17)

Ideally it would be handy to have a enum of all possible error types or specific callbacks for errors such as these, something akin to:

onError: (errorObject) => {
    switch (errorObject) {
      case errorTypes.detectedPopOutClose:
        showInfoBanner('PayPal Payment cancelled');
        break;
      default:
        showError('PayPal error');
    }
  },

borderistheocean avatar Aug 20 '24 10:08 borderistheocean