[Bug] Inline Credit Card errors don't call onError callback

[j623415]

🐞 Describe the Bug

When inline credit card processing fails, onError callback is not called. This prevents the app UI from handling failures and resetting the view.

🔬 Minimal Reproduction

Goto: https://developer.paypal.com/demo/checkout/#/pattern/client

OR

Setup as per: https://developer.paypal.com/demo/checkout/#/pattern/client Add:

            onError: function (err) {
              console.log('In onError', err)
            },

Click "Debit or Credit Card" Enter 1234567890123456 as card number (or any other test card number, but mistype a digit) Fill out other data Click "Pay Now"

😕 Actual Behavior

onError callback is not called Console logs: ppxo_inline_guest_unhandled_error

beaver-logger.js:237 ppxo_inline_guest_unhandled_error {handledErrors: Array(0), unhandledErrors: Array(1), inline_guest_version: "2.12.5", timestamp: 1614198337007, windowID: "267c87c4af", …}country: "US"env: "sandbox"handledErrors: []host: "www.sandbox.paypal.com"inline_guest_version: "2.12.5"lang: "en"pageID: "668875f566"path: "/smart/card-fields"referer: "www.sandbox.paypal.com"timestamp: 1614198337007uid: "ed2faa145e_mja6mji6ntc"unhandledErrors: [{…}]ver: "2.12.5"windowID: "267c87c4af"proto: Object s @ beaver-logger.js:237 u @ beaver-logger.js:396 p @ beaver-logger.js:443 error @ index.js:85 (anonymous) @ submitInlineGuestForm.js:339 value @ index.js:1 H @ submitInlineGuestForm.js:327 ...

UI Shows a message: Something went wrong. We'll take you back to checkout so you can try again.

🤔 Expected Behavior

onError callback should be called so that the application can manage UI state

🌍 Environment

Sandbox

Affected browsers

What browser(s) are affected?

• Chrome
• Firefox

Did not test on other browsers

[zaxap83]

I have the same problem :(

[kmute90]

+1

[gititon]

+1

[bruno-silva5]

+1

[jiangts]

+1

[peterbournecommunications]

+1

[DimHD]

@gregjopa Any luck with this? Or is there a workaround? I'm currently halfway through implementing this integration and i'm stuck with this! Thanks!

[gabe777]

Still the same (yes, its already May now), and on production too.

I am trying to workaround it by catching the aformentioned beaver-logger.js:237 ppxo_inline_guest_unhandled_error myself. With no luck yet.

Any ideas how to grab it from the console?

Overriding console.error does not work as they seem not to use that, but apply in a way to get the error message in the console.

GP

[Koumi460]

I'm having the same issue...

[davidmcnee]

Same issue here

[agoldis]

We have been partnering via PayPal Commerce Platform for high-volume invoice payments processing, and this one causes a real issue for real customers on production systems.

It's kind of crazy that the issue is still here, considering the impact.

[gregjopa]

Hi everyone, we discussed this issue internally and the onError callback is currently designed for non-recoverable errors. https://developer.paypal.com/docs/checkout/integration-features/handle-errors/

When the inline guest form fails, often there is a "Try Again" button for the buyer to click on to open the guest credit-card form in the popup so they can try again to complete the transaction. We consider this a recoverable error.

If your goal is to log when this error happens, you could add a catch to the onApprove callback.

[agoldis]

@gregjopa thanks for providing more details.

I am not sure if https://github.com/paypal/paypal-js/issues/100#issue-942556427 is related, seems like it is, because it is very-very similar.

often there is a "Try Again" button for the buyer to click on...

That's the problem - "often" is not good enough, in our case it fails silently - i.e. buyer doesn't see any error message at all, neither "Try again" nor error message.

We could implement a workaround if onError would have been called, but it isn't.

Ideally you'd give some ways to interpret the checkout results.

We have been also trying to escalate this issue via integration representatives from PayPal, making the case by showing the $$ value of abandoned checkouts. It is greater than 0, for sure, and also triggers buyers complaints to our support teams.

[timler]

I am having this problem and it's very reproducible.

There is obviously some server side validation on last name where a name with the same character repeated 3 or more times fails, however the validation error is not displayed on the front end and the only indication the user has that the payment is failed is a console error log

beaver-logger.js:237 ppxo_inline_guest_unhandled_error 
[snip]
handledErrors: Array(1)
0: {contentKey: "fieldErrors.lastNameInvalid", field: "lastName"}
length: 1
[snip]

Steps to reproduce:

1. Go to https://developer.paypal.com/docs/checkout/ and scroll down to "Try the buttons"
2. Click on "Debit or Credit card"
3. Enter the following details 3.1 Card number: 4111 1111 1111 1111 3.2 Expiry date: 12/23 3.3 CCV: 123 3.4 First name: john 3.5 Last name: dddoe 3.6 Any billing address and any email address
4. Click "Pay Now"

Expected result: The user is returned to the form with a validation error displayed under the last name indicating that it did not pass validation OR an error message like "Something went wrong. We'll take you back to checkout so you can try again."

Actual result: The user is returned to the form with no indication of why the payment failed.

See screenshot from my checkout:

The error is not returned in the onError callback, the createOrder callback has already been run successfully and the onApprove callback is never reached. It does not seem possible to catch this error.

If anyone has any suggestions on how to catch this error please advise - otherwise I suggest there is a bug fix to the Paypal Javascript SDK.

Thanks in advance.

[alexander-stoyan]

Submitted in February an not still fixed in July, seriously? It's a big showstopper for too many, don't you care about it at all?

[kodigome]

up! any update with this issue?

[DominicTurner]

I have exactly the same issue when testing - using Paypal buttons. Handling createOrder, onApprove, onError

After createOrder I get this in the browser console:

ppxo_inline_guest_unhandled_error handledErrors[0]: [ { "contentKey": "fieldErrors.firstNameInvalid", "field": "firstName" } ]

In the PayPal button "Pay by Card" (not customer logged in via PayPal) I have "Firstname" set to "asdf"

This fails validation but does not fire onError handler. So fails silently with no information to retry in the Paypal UI.

[rolandoisidoro]

I've stumbled upon this issue after having trouble with debit card payments. Using a debit card for which 3D Secure hasn't been enabled will result in an unhandled error as described here.

I then proceeded and activated 3D Secure on the card and everything worked as expected, with the second step validation showing up in the PayPal form.

For testing purposes I disabled 3D Secure on the card and the error didn't occur, since PayPal now shows a message informing the user.

[luxorwannabe]

+1

[rucebee]

+1

[do-ift]

+1

[rucebee]

It seems, there is a problem inside widget UI. Invalid fields intended to be highlighted in red but they are not. So, errors are treated as handled and are not propagated feather but paypal UI fails.

[Jacob-Daniel]

production site +1

[mrleolg]

+1

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[marcopanichi]

Same problem here

[ZSabakh]

bump, same problem.

[jitu-git]

Still have the same problem.

[khweb]

bump, same problem

[saransh88]

Bump, noticed similar issue