WooCommerce结账区块自定义支付字段POST传值失败问题

问题核心：WooCommerce Blocks（区块式结账）采用REST API提交订单数据，传统表单字段不会自动被包含在API请求中，必须通过支付方法的专属API来传递自定义字段值。

步骤1：修改JS代码，收集并传递自定义字段值 #

在注册支付方式的对象中添加processPayment方法，用于收集用户输入的字段值，并将其附加到付款请求数据中：

// Register the payment method
const Paythen_Block_Gateway = {
    name: 'paythen',
    label: paythenlabel,
    content: createElement(createPaythenContent),
    edit: createElement(createPaythenContent),
    canMakePayment: () => true,
    ariaLabel: paythenlabel,
    supports: {
        features: paythensettings.supports,
    },
    // 新增：处理支付时收集自定义字段
    processPayment: (paymentRequestData) => {
        // 收集分期选择框/输入框的值
        const instalmentInput = document.getElementById('customer_instalment');
        if (instalmentInput) {
            paymentRequestData.extensions.paythen = {
                customer_instalment: instalmentInput.value,
            };
        }
        // 收集支付选项单选按钮的值
        const selectedPayment = document.querySelector('input[name="separate_payment"]:checked');
        if (selectedPayment) {
            paymentRequestData.extensions.paythen = paymentRequestData.extensions.paythen || {};
            paymentRequestData.extensions.paythen.separate_payment = selectedPayment.value;
        }
        // 返回修改后的请求数据
        return paymentRequestData;
    },
};

步骤2：修改PHP代码，从REST API扩展数据中获取字段值 #

区块结账的自定义数据会放在payment_request的extensions参数里，需要通过对应的钩子获取并保存到订单元数据：

兼容区块+传统结账的实现 #

替换原有保存元数据的代码，同时支持区块结账（REST API）和传统短代码结账：

add_action('woocommerce_checkout_create_order', 'save_paythen_option_order_meta', 20, 2);

function save_paythen_option_order_meta($order, $data) {
    $paythen_data = [];
    
    // 区块结账：从REST扩展参数获取
    if (isset($_REQUEST['extensions']) && is_array($_REQUEST['extensions'])) {
        $paythen_data = $_REQUEST['extensions']['paythen'] ?? [];
    } 
    // 传统结账：从POST参数获取
    else {
        $paythen_data = [
            'customer_instalment' => $_POST['customer_instalment'] ?? '',
            'separate_payment' => $_POST['separate_payment'] ?? ''
        ];
    }

    // 保存分期数据
    if (!empty($paythen_data['customer_instalment'])) {
        $order->update_meta_data('_customer_instalment', sanitize_text_field($paythen_data['customer_instalment']));
    }
    // 保存支付选项数据
    if (!empty($paythen_data['separate_payment'])) {
        $order->update_meta_data('_separate_payment', sanitize_text_field($paythen_data['separate_payment']));
    }

    $order->save();
}

额外验证步骤 #

1. 打开浏览器开发者工具，切换到网络标签；
2. 提交订单时，找到process_checkout的POST请求；
3. 查看请求体中的extensions字段，确认是否包含paythen及对应字段值，以此排查数据是否成功传递。

内容的提问来源于stack exchange，提问作者Semal Vora