XID issue with Ajax based checkout CT

Question

Thanks for taking the time to help. I am having a ready head scratcher with a single page checkout system for CT.

I have built a accordion type checkout system. First panel is the billing address and then once validated it submits via Ajax and opens the next stage - shipping etc.

Each panel has a CT checkout form in it that submits, updates info and shipping details. Each stage of the checkout works well and data is updated in the backend.

However, the last step - Actually confirming and payment, won't submit and redirect to the payment provider. I have noticed that the XID is empty. In fact, if I look at the code, the first form "billing info" has an XID. When shipping is opened, that form has a blank XID, but it submits OK.

The response coming back from the POST has different XIDs in each form. But if I view source, it doesn't show - XID is just blank.

This checkout worked before 2.7. I understand that EE has had some work done on the XID for 2.7.

I need to launch this site tomorrow and really could do with some help.

Here is a JS Fiddle with my code. I really hope someone can help. http://jsfiddle.net/KByhm/

Thanks again for taking the time to look.

Answer 1

I see you're already attempting to grab the new XID from the return data of the Ajax call:

// update the XID hash in the form so we don't run afoul of EE's secure forms
$("input[name=XID]").val(response.XID);

But I fell onto this documentation the other day which I think is new and relating to new EE version handling.

Seems like if submitted by Ajax the updated XID is no longer returned as part of the form, instead it's part of the Ajax header.

Answer 2

YYYYYYEEEEEEEEESSSSSSSS!!!! Thank F for that.

I have got this working. Peter's answer was the right way to go. It was in the docs all along! For those that may run into a similar situation, I fixed this by adding the recommend ajaxPrefilter that is mentioned in the docs - with a little tweak to define the form.

An updated JS Fiddle: http://jsfiddle.net/aSDju/

Super sweet - I freakin' love this community. Thanks for all you input guys. I can breath easy once more.

Answer 3

This isnt an answer as such, just some comments. In 2.7, if secure forms is on, a form wont submit without an xid. Prior to 2.7 it would if youd created your own form tags. If xid is blank, you can add it manually like this

<input type="hidden" name="XID" value="{XID_HASH}" />

This answer may help too link Good luck

Answer 4

Every time you submit the form, you need to create a new XID and pass it back into the hidden input values. Essentially, each time you process the form it uses the XID token so the next time you process it without a page load, you will get that error.

It's also possible the CT devs could add some to code to reuse the last XID if an AJAX request has been detected. This is just a theory, but it could work. Below is the minimum code needed in the checkout form tag.

if(AJAX_REQUEST) 
{
    ee()->security->restore_xid();
}

For more information refer to the dev docs.

http://ellislab.com/expressionengine/user-guide/development/guidelines/security.html#handling-form-hashes-in-your-add-on