Paypal-checkout-components: 'ppxo_unhandled_error' JavaScript error

[nabeel-icm]

Description

We have been noticing for a while that the below depicted JavaScript error appears out of nowhere on our application pagte which deals with Paypal payments. The error originates from Paypal Checkout.js.

In an already similar posted link:
https://github.com/paypal/paypal-checkout-components/issues/610

the given solution is to implement onError which I had already implemented but the error still appears. Please let me know about its fix. Here I am pasting an abridged version of the button rendering code:

paypal.Button.render({
        env: 'production', // Or 'sandbox'
        commit: true, // This will add the transaction amount to the PayPal button

        payment: function () {
            return paypalCheckoutInstance.createPayment({
                flow: $flowValue, // Required
                billingAgreementDescription: 'My Company name',
                amount: $amount.val(), // Required
                currency: $('#paypalForm .js-currencyname').text(), // Required
                enableShippingAddress: false,
                enableBillingAddress: true,
            });
        },

        onAuthorize: function (data, actions) {
            return paypalCheckoutInstance.tokenizePayment(data, function (err, tokenizationPayload) {
                // Submit `tokenizationPayload.nonce` to your server
                $('#CountryCode').val(tokenizationPayload.details.countryCode);
                $('#PayerEmail').val(tokenizationPayload.details.email);
                $('#NonceFromClient').val(tokenizationPayload.nonce);
                $("#paypalForm").submit();
            });
        },

        validate: function (actions) {
            toggleButton(actions);

            onChangeTextbox(function () {
                //toggleButton(actions);
            });
        },

        onClick: function () {
            //toggleValidationMessage();
        },

        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').then(function () {

        // The PayPal button will be rendered in an html element with the id
        // `paypal-button`. This function will be called when the PayPal button
        // is set up and ready to be used.
        //
        $('.ajax_spinner').hide();
    });
});

• Screenshots or videos that show the issue
• Your code
• paypal.version is 4.0.262

• Happening in latest Chrome, Firefox and Edge

• Does the issue occur consistently, or intermittently?
  Consistently

Affected browsers

• [ ] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge
• [ ] IE
• [ ] Chrome Mobile/Tablet
• [ ] Safari Mobile/Tablet
• [ ] Web View / Safari ViewController
• [ ] Other

P.S.
I have screenshot but how can I attach a screenshot with this issue? There is not attach document/image button.

[bluepnume]

You can drag and drop an image into an issue or comment -- or just copy/paste the error message and other logs.

[bluepnume]

Also can you please provide a link where this can be repro'd?

[nabeel-icm]

screenshot attached.
And as it is appearing in a access-restricted application, I don't know how to reproduce it efficiently, externally.

[prindacerk]

I am also facing this same issue in my Angular application. It seems to appear when I navigate away from the page so maybe it's not closing properly or the event listener is not disconnecting?

[bluepnume]

I'm struggling to reproduce this one. Does anyone have a demo page where I can repro?

[prindacerk]

@bluepnume I created a sample project for you. Now the replication is not the same as my application because my application is loading content via API service and this has been hardcoded. So there's no subscribe involved.
But you can reproduce by clicking the different links provided in the page as quickly as you can. I think that it has to do with loading and unloading the components and similar behaviour is happening when using subscribe.
https://github.com/prindacerk/paypal.test

I can try to create a subscribe to a demo service to reproduce it exactly. Will take more time. But hopefully this could shed some light for you.

Edit: I have updated the source code with a mock service. Now it happens more often when you switch the links from the paypal page to the other page in quick succession.

[bluepnume]

Hi -- closing this one as we've been unable to reproduce and a lot of time has passed without similar reports. Recommend trying with the latest sdk, and opening a new issue if you're still seeing the same problem. Thank you!

[prindacerk]

@bluepnume It still happens. I just verified it in my repo (the one I shared above).
https://github.com/prindacerk/paypal.test
Updated the packages and also the sdk is directly being referenced so it should be the latest I'm assuming.

It happens more often when you switch the links from the paypal page to the other page in quick succession. Try switching between "package" and "directory" links in the application in my repo.

[dmalis]

This happens quite a lot when you try to re-init PP button in a short period.

Our use case is an 1-page checkout with additional purchase options. For example, if customer selects express shipping, this adds +$5 to order's total amount and vice versa.

Each time total amount changes, we need to render new "Checkout with PayPal" button ... providing it with new total amount. If this is happening too quickly, an error (or more) is produced.

[bluepnume]

@prindacerk / @dmalis

I'm guessing this is happening because the paypal button is being destroyed as it is in the process of being (asynchronously) rendered.

In this case we have to reject the promise, since the render technically failed.

Can you try handling errors from the render, in this case?

paypal.Buttons().render('#container').catch(err => {
    // handle or suppress the error
});

[dmalis]

@bluepnume catching the error works. So, in this case, should we just catch the error and ignore it or there's something we should do with this instance of PP button?

[bluepnume]

Yep. If you're navigating away and destroying the button, it's fine to catch the error and ignore it.

[dmalis]

Actually, I'm not navigating away from the page, just rendering/replacing existing PP button with fresh one because of total amount change - this could happen multiple times.

[pramodmangalore]

I am getting a similar error out of the blue today. Seems to be occuring only on our QA server however but neither DEV/PROD.

[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!

[harpreetsb]

bump

[9527Robin]

bump

[sergey-fedosimov]

bump

[jrodriguez-ifuelinteractive]

Yeah this is still happening.

ppxo_unhandled_error:
Error: Expected reject to be called with Error, got [object Undefined]
    at ZalgoPromise._proto.reject (https://www.paypalobjects.com/api/checkout.js:977:25)
    at new ZalgoPromise (https://www.paypalobjects.com/api/checkout.js:959:69)
    at Object.payment (eval at require.load ([REDACTED MAGENTO 2 STORE]/en_US/mage/requirejs/static.min.js:11:216), <anonymous>:4:621)
    at https://www.paypalobjects.com/api/checkout.js:24746:46
    at new ZalgoPromise (https://www.paypalobjects.com/api/checkout.js:941:21)
    at ParentComponent.<anonymous> (https://www.paypalobjects.com/api/checkout.js:24720:20)
    at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:1164:33)
    at ParentComponent.<anonymous> (https://www.paypalobjects.com/api/checkout.js:23977:69)
    at Object.resultValue (https://www.paypalobjects.com/api/checkout.js:8948:37)
    at https://www.paypalobjects.com/api/checkout.js:6151:36
    at Object._RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:5246:27)
    at receiveMessage (https://www.paypalobjects.com/api/checkout.js:5282:60)
    at messageListener (https://www.paypalobjects.com/api/checkout.js:5304:9)

[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!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information.