[4.x][5.x] Missing CSRF in paymentForm.js -> _callPayAction()

[craig-lt]

Description

Seeing a bunch of 400 (Bad Request) errors in console using the plugin on the checkout page.

It wouldn't allow me to create a PR but the fix is just to add this line:
form.append(window.csrfTokenName, window.csrfTokenValue);
at ~line 222 in paymentForm.js so that CSRF is added before the post. It looks like all the other places where formData() is gotten has this already but this one place is missing.

[linear]

PT-2555 [4.x][5.x] Missing CSRF in paymentForm.js -> _callPayAction()

[nfourtythree]

Hi @craig-lt

Thank you for your message.

I can't replicate this issue locally using the example templates, I assuming this could be being caused because of missing the csrf input in your templates.

The first thing that happens in the _callPayAction() method is to grab all the data from the <form> tag. This means is the CSRF token is in there it will be added to the post data.

Could you check to see if the input is being added? Or maybe you are interacting with the payment form in a different manner?

Thanks!

[craig-lt]

Hi @nfourtythree

It's very possible that we are doing something unique here as I've inherited a rather custom Craft site. There is custom code calling _callPayAction() indirectly from some other JS logic. I haven't determined what the need is for doing this but there is a lot of code around this functionality so I don't want to remove it entirely yet. The CSRF input is in the Twig form and we are using asyncCSRF.

The best I can tell from some ad hoc testing and investigation is that initStripe() is firing before the CSRF tokens have been added to the form via the asyncCSRF code. If I delay calling it a few hundred milliseconds then everything works correctly too (as another potential fix to the problem).