WooCommerce订单提交前添加隐藏input传递token的实现问题

问题背景 #

WooCommerce开发场景下，需要在订单提交前向结账表单插入承载支付卡token的隐藏input字段，将token传递到订单处理端，常规e.preventDefault()拦截原生form submit事件的方案不生效。

初始失效代码 #

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);
});

测试阶段代码 #

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;
}
});

测试结论 #

• 事件回调返回false时，提交动作被拦截，隐藏字段可正常插入表单DOM
• 事件回调返回true时，隐藏字段虽能插入DOM，但不会随表单提交，根本原因是WooCommerce在checkout_place_order事件触发前就已经完成了表单数据序列化，临时插入的字段不会被收集到请求参数中
• 最初设想的「先插字段返回false拦截，再重新触发提交返回true」逻辑，会因为返回false后流程中断无法执行后续触发操作，无法走通

可行实现方案 #

WooCommerce结账流程没有绑定原生form的submit事件，所有提交逻辑、表单序列化都是通过jQuery自定义事件实现，原生事件拦截的时机完全不匹配，根据token生成场景选以下方案即可：

方案1：提前预置字段，提交时赋值（推荐，无兼容问题） #

不需要拦截提交流程，页面加载时就把隐藏字段插入表单，提交触发时只更新字段值，完全对齐WooCommerce的序列化时机：

jQuery(function($){
    const $checkoutForm = $('#form-checkout');
    // 页面加载完成即插入隐藏字段
    const $tokenField = $('<input>', {
        type: 'hidden',
        name: 'token',
        id: 'payment-token'
    }).appendTo($checkoutForm);

    // 绑定结账提交事件，在WooCommerce序列化数据前更新token
    $checkoutForm.on('checkout_place_order', function(){
        // 替换为实际的token获取逻辑
        const payToken = 'test';
        $tokenField.val(payToken);
        return true;
    });
});

方案2：拦截后异步取token，带标记重提 #

如果token需要在提交瞬间异步生成（比如调用支付SDK取临时token），加一个注入标记避免无限循环拦截，第一次拦截拿到token后再触发提交：

jQuery(function($){
    const $checkoutForm = $('#form-checkout');
    let hasInjectToken = false;

    $checkoutForm.on('checkout_place_order', function(){
        // 已完成token注入，直接放行提交
        if(hasInjectToken) {
            hasInjectToken = false;
            return true;
        }

        // 执行token生成逻辑，支持异步
        // 示例为同步逻辑，异步场景把后续逻辑放到回调里即可
        const payToken = 'test';
        
        // 插入或更新token字段
        if($('#payment-token').length) {
            $('#payment-token').val(payToken);
        } else {
            $('<input>', {
                type: 'hidden',
                name: 'token',
                id: 'payment-token',
                value: payToken
            }).appendTo($checkoutForm);
        }

        hasInjectToken = true;
        // 调用jQuery的submit方法触发WooCommerce绑定的提交逻辑，不要用原生DOM的submit方法
        $checkoutForm.submit();
        
        // 第一次提交拦截
        return false;
    });
});

避坑说明 #

• 不要用原生addEventListener绑定form的submit事件，和WooCommerce的jQuery事件触发顺序不匹配，无法在序列化前修改表单
• 重提时禁止调用原生DOM的submit()方法，会跳过所有jQuery绑定的WooCommerce结账逻辑，导致提交流程异常
• 不需要修改WooCommerce核心文件，所有逻辑放在主题自定义js或者支付网关的前端js文件里即可生效

内容的提问来源于stack exchange，提问作者Broder s