Paypal-checkout-components: calling return actions.reject(); is not stopping createOrder from being triggered in safari 14.1

[basel-ab]

I have a validation on my checkout page, so i'm using a validation in onclick event, then i'm using return actions.reject(); or return actions.resolve(); to control it.

this validation is working fine on all browsers (at least the ones that i was able to test) except for safari 14.1 from iphone
caling return actions.reject(); is not stoping createOrder from being triggered which causes an error in the backend code.

is there a way to insure that createOrder is not triggered unless all the validation are passed ?

onClick: function (data, actions) {
if (!$("#TermsAndConditions").is(":checked")) {
                            return actions.reject();
                        } else {
                            return actions.resolve();
                        }
                },
createOrder: function (data, actions) {
.....
}

[Ben-Adlington]

Also ran into the same issue with this specifically on IOS and had to put a hacky work around in place 😢

[basel-ab]

Can you share your workaround I'm really stuck, none of the workarounds are working, I tried to disable the buttons but found out that in many cases I'm loosing buyers because for some reason the buttons remain disabled 😔

[Ben-Adlington]

In our scenario we realised we were ending up with a large amount of cancelled orders as they were getting created regardless of if the validation failed, to work around it I stored the result of the validation outside of the PayPal handlers, I then check this value at the start of each of the handles to ensure nothing is running unless the validation has passed..

Using your code above:

var validationResult = false;

function validateForm() {
  // do some logic to determine if your form is valid, return true / false
  return $("#TermsAndConditions").is(":checked");
}
....
....
....
  onClick: function (data, actions) {
    validationResult = validateForm();

    // This won't work for iOS..
    if (validationResult === false) {
      return actions.reject();
    }

    return actions.resolve();
  },
  createOrder: function (data, actions) {
    // This should stop any un-needed logic running in iOS..
    if (validationResult === false) {
      // returning here means the cancel / error events run..
      return;
    }
  }
  onCancel: function (data, actions) {
    if (validationResult === false) {
      return;
    }
  onError: function (data, actions) {
    if (validationResult === false) {
      return;
    }
  }

[basel-ab]

This solution is to avoid saving these orders into your database , but still you are loosing these orders
I hope someone can help us to solve it, I have a trigger that notifies me when this issue occurs, I'm really loosing orders due to this issue

[mnicpt]

@basel-ab Have you tried just returning true or false? I will look more into why actions aren't working for that browser.

[basel-ab]

@mnicpt I just tried it, it's the same bug closing the popup allow create order

[mnicpt]

@basel-ab The popup shouldn't open if onClick is rejected or returns false. I'll assign to me and fix on Monday. The popup will close automatically if onClick return false. One more thing. Can you try removing all code from the onClick handler except return false;?

[basel-ab]

That was my test, I removed the code in onclick and replaced it with return false; but got the same issue, this happens only in iphone safari browser, I tried it from my macbook it worked fine

[basel-ab]

@mnicpt please when you do the test be aware that the popup is getting closed, the issue that createOrder is getting called regardless of the validation

[mnicpt]

@basel-ab Thank you. I will look into it on Monday.Are you able to reproduce on the Xcode simulator?

[basel-ab]

@mnicpt Yes, I just tried it on iPhone 11 pro simulator, the same bug there, one more thing, when i press on the debit card option it's working as expected, only PayPal option is giving the error

[basel-ab]

@mnicpt any update?

[mnicpt]

@basel-ab Sorry. Was on vacation. Will look at this again on Monday.

[mnicpt]

@braebot @Ben-Adlington Looking at this now. Will hopefully have something for you by the EOD.

[mnicpt]

@basel-ab @Ben-Adlington Found the issue. Going to provide a fix today and get it going through the release process. Will let you know when released. I found this happens on all versions.

[basel-ab]

Great, appreciate your efforts @mnicpt

[mnicpt]

For short-term fix, you would have to condition on client side validation in createOrder as mentioned above.

[arturobas]

Hopefully this fix my issue too
actions.reject() not close paypal popup

[mnicpt]

@basel-ab @arturobas @Ben-Adlington The fix was released late yesterday. You should be good now. Please let me know if you see any issues.

[basel-ab]

Thanks @mnicpt