Paypal-checkout-components: [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...

[circularone]

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.