WooCommerce中Stripe信用卡输入框加载后消失问题求助

为啥会出这问题 #

• WooCommerce的结账页#payment容器会在订单变动（比如用优惠券、改购物车商品）时动态重建DOM，如果Stripe元素初始化后没盯着这个变化，就会被新生成的DOM给覆盖掉。
• 那个偶现的「选择器对应2个DOM元素」错误，说白了就是页面里有俩一样的目标容器，大概率是WooCommerce动态渲染时旧DOM没清干净，Stripe挂到旧元素上，之后旧元素被删了，输入框自然就没了。

具体怎么修 #

1. 让Stripe的目标容器独一无二 #

改支付网关的模板（比如payment-method.php），给容器加个唯一ID，避免重复：

<!-- 替换原来的容器，用uniqid生成唯一标识 -->
<div id="stripe-card-element-<?php echo uniqid(); ?>" class="stripe-card-element"></div>

或者在插件初始化时用PHP生成唯一ID，保证每次渲染的容器都不一样。

2. 监听WooCommerce支付区域更新，重新初始化Stripe #

WooCommerce有个updated_checkout事件，支付区域动态更新后会触发。把main.js里的Stripe初始化逻辑包成函数，页面加载和事件触发时都执行：

// 封装Stripe初始化逻辑
function setupStripeCardElement() {
    // 先清掉已有的Stripe元素，避免重复挂载
    const stripeContainers = document.querySelectorAll('.stripe-card-element');
    stripeContainers.forEach(container => {
        if (container.querySelector('.StripeElement')) {
            container.innerHTML = '';
        }
    });

    // 初始化Stripe（替换成你的公钥）
    const stripe = Stripe('your-publishable-key');
    const elements = stripe.elements();

    // 找到当前选中的支付方式对应的Stripe容器，避免匹配多个
    const activeMethod = document.querySelector('.woocommerce-payment-method:checked');
    if (!activeMethod) return;

    const cardContainer = activeMethod.querySelector('.stripe-card-element');
    if (!cardContainer) return;

    // 创建并挂载卡片输入框
    const cardElement = elements.create('card');
    cardElement.mount(cardContainer);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', setupStripeCardElement);

// 支付区域更新时重新初始化
document.body.addEventListener('updated_checkout', setupStripeCardElement);

3. 修正插件渲染逻辑，避免重复输出容器 #

检查自定义Stripe网关插件的代码，在payment_fields()方法里，确保只在当前支付方式启用时输出容器：

public function payment_fields() {
    // 未启用则直接返回，不输出内容
    if (get_option('woocommerce_' . $this->id . '_enabled') !== 'yes') return;

    echo '<div class="stripe-payment-fields">';
    echo '<div class="stripe-card-element"></div>';
    echo '</div>';
}

4. 清除重复DOM元素 #

检查payment.php及相关模板，不要重复引入支付方式模板代码。WooCommerce默认会循环渲染所有启用的支付方式，不要在自定义代码里额外重复输出Stripe支付区域。

验证修复效果 #

1. 打开结账页，确认Stripe输入框正常显示。
2. 应用优惠券、修改购物车商品数量，触发支付区域刷新，检查输入框是否依然存在。
3. 打开浏览器控制台，确认没有「选择器对应2个DOM元素」的错误提示。

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