0

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?

Eduardo Fonseca
  • 435
  • 1
  • 6
  • 19
  • Does the final `Render` call modify the html of `
    ` ? I ask this because you are possibly overwriting whatever that does when you re-render in Blazor. Try adding a fixed key e.g. `
    ` so that Blazor doesn't re-create the div when it re-renders.
     – Mister Magoo Jul 25 '21 at 00:52
  • Question is about the popup when clicking the buttons, not their on-page container – Preston PHX Jul 25 '21 at 02:07
  • @PrestonPHX Thanks for your input - Maybe you could answer my first question with your experience of how the paypal JS works? – Mister Magoo Jul 25 '21 at 09:34
  • This is the message I get when the random issue happens No ack for postMessage wn() in https://www.sandbox.paypal.com in 10000ms – Eduardo Fonseca Jul 28 '21 at 21:21

2 Answers2

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)

Preston PHX
  • 27,642
  • 4
  • 24
  • 44
1

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.

Javascript Debugging Options

David.Warwick
  • 620
  • 1
  • 9
  • 28