Paypal Smart Button automatically closed while loading

Wow, this doesn't really make sense, sorry for reporting, haven't tried myself to reproduce yet.

Care to share the Drupal version you're running? (And the Commerce core version while you're at it?)

No worries, maybe something is wrong somewhere with my setup.
Drupal 9.5.3, Commerce 8.x-2.33+5-dev

We have experienced the same issue. In addition we can see a js error "Paypal Response "Expected an Order ID to be passed".

As @slashsharp noted, the error happens in the messages.add(data.responseJSON.message, options); line, where data is a string with order id and not an object.

This promise was added in #3303443: Enhance Exception Handling on Ajax calls → . I am not sure why data does not contain responseJSON in this case.

The next patch removed this promise and fixes the payment process.

I'm a bit confused by this now... So there's both a JS error and the error with the event class?
Remove the use Drupal\commerce\EventBase; and change class CheckoutOrderRequestEvent extends EventBase { to class CheckoutOrderRequestEvent

The promise referenced is the error handler of the Ajax callback to retrieve the order id.

It is not causing this issue, but attempting to handle it. It displays the error message, if one was returned and reloads the page if the response code is 403 (access denied) so that the user can log in again.

A patch to remove the error handler is not the solution here.

I've re-tested, and the handler generally works as expected, though we can add more safety around it.

If the popup window opens and closes, the root cause is that the order id was not available.

The most common reason for this issue is if the session has gone away or the user has logged out.

The most common case is a user gets to the checkout step with the PayPal buttons, does something else (gets a cup of coffee?), then the session times out, then they click the button, and the Ajax callback returns an error.

It takes some patience to wait for the timeout to occur. :)

A couple ways to reproduce this more quickly is:
with an authenticated user:

1. go to the page with the PayPal buttons
2. open another tab on the site
3. log out from the site on the other tab
4. on the checkout tab, click the PayPal button

You should be presented with the login page, and after you sign in, you should be back on the checkout step again.

with an anonymous user:

1. go to the page with the PayPal buttons
2. go to the database and truncate the session table (Only in a dev environment, of course!)
3. on the checkout tab, click the PayPal button

Since this was an anonymous user, you will most likely end up on an empty cart page.

We are aware of one specific case that would cause data to be a string, but that only occurs if you are using a version of jQuery before 1.8. (Promises on then() was not implemented until jQuery 1.7)

I'll follow up with a patch that adds more safety to the js, but you really should be getting an object for data in the error handling. If you can identify a reproducible case, we can certainly look into it and troubleshoot!

Attached patch adds more safety around the data on the error handler, and tries to gracefully handle an unexpected payload.

I'm a bit confused by this now... So there's both a JS error and the error with the event class?

@jsacksick #6, the event class change did not help me. The error came from js. I am still not happy with the solution, as it works unstable. That's why we decided to deactivate this payment type for now. I plan to get back to it again and debug a bit more.

@TomTech your patch #8 is empty.

Well...let's. try that again with a non-empty patch. :)

@tomtech you're still assigned, plans to finish this? Perhaps proceed with a MR?
Or are you awaiting review by @jsacksick for #10 first?

No reply from @tomtech :(

rakesh.regar → made their first commit to this issue’s fork.

@rakesh.regar provided @tomtech's patch as an MR.

Changes LGTM and makes the JS a bit more safe. Unsure if it will fix the original issue, as there aren't clear steps to reproduce (other the ones from @tomtech).

The only thing is, that in the case "data.status" is "403", the added message will quickly disappear through location.reload(). Other than that, it looks fine!

Let's hear feedback from others.