如何在WooCommerce结账页选中支付方式时显示自定义支付字段？

核心问题修正 #

你不需要在构造函数里手动调用payment_fields()——这个方法是WooCommerce自动触发的，当结账页面渲染支付选项时，会为每个启用的网关自动调用该方法输出字段。之前手动调用导致表单跑到页面顶部，就是因为时机不对。

正确的网关实现代码 #

以下是完整的自定义网关类，实现选中支付方式时显示额外字段（支持自带信用卡表单或自定义字段）：

class Custom_Payment_Gateway extends WC_Payment_Gateway {

    public function __construct() {
        $this->id = 'custom_gateway'; // 你的网关唯一ID
        $this->method_title = '自定义支付网关';
        $this->method_description = ''; // 留空，用字段替代描述
        $this->supports = array(
            'products',
            'credit_card_form' // 如果需要信用卡字段，保留这行；不需要则删除
        );
        
        // 初始化后台设置
        $this->init_form_fields();
        $this->init_settings();
        
        // 前端显示的标题和描述
        $this->title = $this->get_option( 'title' );
        
        // 绑定后台设置保存钩子
        add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
    }

    // 后台设置字段（可选）
    public function init_form_fields() {
        $this->form_fields = array(
            'enabled' => array(
                'title'       => '启用/禁用',
                'label'       => '启用自定义支付网关',
                'type'        => 'checkbox',
                'default'     => 'no'
            ),
            'title' => array(
                'title'       => '支付方式标题',
                'type'        => 'text',
                'description' => '用户在结账页面看到的支付方式名称',
                'default'     => '自定义支付',
                'desc_tip'    => true,
            ),
        );
    }

    // 输出支付字段（WooCommerce自动调用）
    public function payment_fields() {
        echo '<div class="custom-payment-container">';
        
        // 选项1：使用WooCommerce自带的信用卡表单（需在supports中添加'credit_card_form'）
        if ( $this->supports( 'credit_card_form' ) ) {
            $this->credit_card_form();
        } 
        // 选项2：自定义字段（替换成你需要的字段）
        else {
            echo '<p class="form-row form-row-wide">';
            echo '<label for="custom_payment_field">' . __( '请填写额外信息', 'woocommerce' ) . '<span class="required">*</span></label>';
            echo '<input type="text" class="input-text" name="custom_payment_field" id="custom_payment_field" required />';
            echo '</p>';
        }
        
        echo '</div>';
    }

    // 处理支付逻辑（必填）
    public function process_payment( $order_id ) {
        $order = wc_get_order( $order_id );
        
        // 标记订单为处理中（根据你的业务逻辑调整）
        $order->update_status( 'processing', __( '自定义支付网关已确认订单', 'woocommerce' ) );
        
        // 扣减库存
        wc_reduce_stock_levels( $order_id );
        
        // 清空购物车
        WC()->cart->empty_cart();
        
        // 返回成功跳转
        return array(
            'result' => 'success',
            'redirect' => $this->get_return_url( $order )
        );
    }
}

// 注册网关到WooCommerce
add_action( 'plugins_loaded', 'register_custom_payment_gateway' );
function register_custom_payment_gateway() {
    if ( ! class_exists( 'WC_Payment_Gateway' ) ) return;
    
    add_filter( 'woocommerce_payment_gateways', 'add_custom_gateway_to_list' );
    function add_custom_gateway_to_list( $gateways ) {
        $gateways[] = 'Custom_Payment_Gateway';
        return $gateways;
    }
}

关键注意事项 #

1. 字段显示时机：WooCommerce默认会把payment_fields()输出的内容包裹在支付选项的容器里，当用户选中该支付方式时，自带的JS会自动显示这个容器（默认隐藏），不需要额外写JS控制。
2. 替代描述文本：把构造函数里的method_description设为空，这样默认只显示支付方式标题，选中后直接显示字段，达到"替代描述"的效果。
3. 字段验证：如果需要验证自定义字段，添加以下钩子：

add_action( 'woocommerce_checkout_process', 'validate_custom_payment_fields' );
function validate_custom_payment_fields() {
    if ( isset( $_POST['payment_method'] ) && $_POST['payment_method'] === 'custom_gateway' ) {
        if ( empty( $_POST['custom_payment_field'] ) ) {
            wc_add_notice( __( '请填写额外信息', 'woocommerce' ), 'error' );
        }
    }
}

最后步骤 #

1. 将代码添加到你的主题functions.php或自定义插件中。
2. 进入WooCommerce后台 → 设置 → 支付，找到"自定义支付网关"并启用。
3. 保存设置后，前往结账页面测试选中该支付方式时的字段显示效果。

内容的提问来源于stack exchange，提问作者Newbie Swift Coder