For the dear life of me I cannot figure out how to the prevent the Woocommerce order submit process to allow a card token to be added as hidden input before the form is submitted to be able to post it to order received. The standard e.preventDefault(); does not work here.

var form = jQuery("#form-checkout"); 

form.addEventListener("submit", function (event) {
 event.preventDefault();

// Add token to the form
    var tokenInput = document.createElement("input");
    tokenInput.setAttribute("name", "token");
    tokenInput.setAttribute("type", "hidden");
    tokenInput.setAttribute("value", "test");

    form.appendChild(tokenInput);
});

Code that gets close:

var form = jQuery("#form-checkout"); 

form.on('checkout_place_order', function() {
    
    // Add token to the form
    var tokenInput = document.createElement("input");
    tokenInput.setAttribute("name", "token");
    tokenInput.setAttribute("type", "hidden");
    tokenInput.setAttribute("id", "token");
    tokenInput.setAttribute("value", "test");

    form.appendChild(tokenInput);

if(jQuery("#token").length > 0) {

return true;

} else {

return false;
}
});

When returned false, submit is prevented and the field gets added. When returned true, field also gets added but nothing gets posted. This is probably because the field is added after submit but before the ajax call.

The only way I can think of is to first add the field -> return false -> then excute the function again with true. But ofcourse after false nothing runs. What would be a way to approach this? (any help is appreciated)