PayPal Checkout popup randomly closes

Question

We are having an issue in a Blazor WebAssembly app, which is using PayPal buttons for users to Add Funds to the system's wallet. The issue is random, sometimes the popup closes immediately after opening, and does not allow users to even login into paypal to continue with the checkout process.

This is the js file: https://github.com/efonsecab/FairPlayTube/blob/main/src/FairPlayTubeSln/FairPlayTube.Client/wwwroot/js/paypal/paypal.js This is the Blazor component which calls the js to render the buttons https://github.com/efonsecab/FairPlayTube/tree/main/src/FairPlayTubeSln/FairPlayTube.Client/CustomComponents/Paypal

It happens constantly in dev, but not that much in prod.

This is the error shown in the console: No ack for postMessage wn() in https://www.sandbox.paypal.com in 10000ms

The thing is that sometimes everything works successfully on the first try, but other show this.

Any ideas how to solve it?

Answer 1

If it closes immediately after opening, the createOrder function's invocation of actions.order.create is failing, likely due to an invalid request. Log everything, look at the console errors/output, and find out what you are doing wrong.

The object you are passing to actions.order.create can first be saved to a variable, logged with console.log(JSON.stringify(somevar,null,2)), and then return actions.order.create(somevar)

Answer 2

After several hours searching and trying numerous suggestions, I finally found the answer with this post: https://stackoverflow.com/a/66473740

For me, this solution works 100% of the time so far. I disabled Javascript debugging.