如何在多个模态框中正确显示Stripe Elements支付组件

嘿，我一眼就看出问题出在哪了！你现在的代码里只创建了一个Stripe Card Element实例，然后试图把它挂载到所有匹配[id^=card-element-]的元素上——但Stripe的Element实例只能绑定到单个DOM元素上，所以只有第一个元素能成功挂载，后面的模态框自然就显示不了支付表单啦。另外还有个隐藏坑：你在ERB里嵌套了两层<form>标签，这会导致HTML结构无效，也可能干扰Stripe的正常工作。

下面是分步解决方案：

第一步：修复HTML嵌套表单问题 #

先把ERB里的内层表单去掉，保留外层的form_tag就够了，Stripe支付逻辑我们用JS来处理。修改后的ERB代码如下：

<% @plan.each do |plan| %> 
<div class="modal fade" id="payModal-<%= plan.id %>" tabindex="-1" role="dialog" aria-labelledby="payModalLabel" aria-hidden="true" > 
<div class="modal-dialog" role="document"> 
<div class="modal-content checkoutPlan"> 
<h2>Subscribe to <%= plan.name %> plan!</h2> 
<div class="price"> 
<h4>$<%= plan.amount / 100 %>/mo</h4> 
<p>Billed Monthly</p> 
</div> 
<%= form_tag(subscriptions_path, method: 'post', id: "payment-form-#{plan.id}") do %> 
<div class="stripe"> 
<%= hidden_field_tag 'plan_id', plan.id %>
<div class="form-row"> 
<label for="card-element-<%= plan.id %>"> Enter your payment details security <i class="fas fa-lock"></i> </label> 
<div id="card-element-<%= plan.id %>"> 
<!-- A Stripe Element will be inserted here. --> 
</div> 
<!-- Used to display form errors. --> 
<div id="card-errors-<%= plan.id %>" role="alert"></div> 
</div> 
<button type="submit">Submit Payment</button> 
</div> 
<% end %> 
</div> 
</div> 
</div> 
<% end %>

这里做了三个关键调整：

• 移除了内层的<form>标签，避免嵌套表单的无效结构
• 给每个支付表单设置了唯一ID payment-form-#{plan.id}，方便后续JS精准绑定事件
• 给每个错误提示框设置了唯一ID card-errors-<%= plan.id %>，防止多个模态框共用错误提示导致混乱

第二步：修改Stripe.js，为每个模态框创建独立的Card Element #

现在需要遍历所有的card-element-*元素，为每个元素单独创建Card Element实例，这样每个模态框的支付表单都能正常显示。修改后的JS代码：

// 先定义Stripe Element的样式（根据你的需求调整）
const style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// 初始化Stripe（记得替换成你的发布密钥）
const stripe = Stripe('pk_test_your_publishable_key');
const elements = stripe.elements();

// 遍历所有card-element元素，为每个创建独立的Card Element
document.querySelectorAll('[id^=card-element-]').forEach(element => {
  // 提取当前套餐的ID
  const planId = element.id.replace('card-element-', '');
  // 创建新的Card Element实例
  const card = elements.create('card', { style: style });
  // 挂载到当前元素
  card.mount(`#card-element-${planId}`);

  // 获取对应的错误提示框
  const displayError = document.getElementById(`card-errors-${planId}`);
  // 监听卡片输入的实时错误
  card.addEventListener('change', function(event) {
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // 绑定表单提交事件
  const form = document.getElementById(`payment-form-${planId}`);
  form.addEventListener('submit', async function(event) {
    event.preventDefault();

    // 创建Stripe支付方式
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: card,
    });

    if (error) {
      // 显示错误信息
      displayError.textContent = error.message;
    } else {
      // 将支付方式ID添加到表单中，提交到后端
      const paymentMethodInput = document.createElement('input');
      paymentMethodInput.type = 'hidden';
      paymentMethodInput.name = 'payment_method_id';
      paymentMethodInput.value = paymentMethod.id;
      form.appendChild(paymentMethodInput);
      // 提交表单
      form.submit();
    }
  });
});

这里的核心思路是：每个模态框的支付表单都拥有独立的Card Element实例，这样就不会出现挂载冲突的问题了。同时每个表单都绑定了自己的提交逻辑，确保支付流程能正常触发。

最后要注意的小细节 #

• 确保你已经在页面中正确引入了Stripe.js：<script src="https://js.stripe.com/v3/"></script>
• 后端需要接收payment_method_id和plan_id这两个参数，完成订阅创建或者支付处理的逻辑

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