Rails表单JS回调提交时plan_id始终传最后一个值的问题

你遇到的这个问题，本质是服务器端ERB渲染和客户端JS执行的时机不匹配导致的。

当ERB在服务器循环生成页面时，你写在token回调里的<%= index %>，会被最后一次循环的index值（也就是最后一个表单的索引）全部替换掉。举个例子，如果你有4个表单，循环结束后index是3，那么所有的$("form#elm-<%= index%>")都会变成$("form#elm-3")——不管你点哪个"Select Plan"按钮，Stripe回调都会提交最后一个表单，自然params[:plan_id]永远是最后一个的值。

我们需要把表单的关联逻辑从服务器端渲染，改成客户端点击时动态获取，这样每个按钮都能准确找到自己对应的表单。

步骤1：修改视图代码，给按钮加表单ID的标识 #

<% @plans.each.with_index do | plan,index | %>
  <%= form_tag('/billings/subscription_checkout', id: "elm-#{index}", method: :post) do %>
    <input name="plan_id" type="hidden" value="<%= plan.code %>">
  <% end %>
  <!-- 用data属性存储对应表单的ID -->
  <a data-form-id="elm-<%= index %>" class="selectPlan">Select Plan</a>
<% end %>

步骤2：重写JS逻辑，点击按钮时初始化对应表单的Stripe Handler #

$(document).ready(function() {
  $('.selectPlan').click(function(e) {
    e.preventDefault();
    
    // 1. 获取当前按钮对应的表单ID和表单元素
    const targetFormId = $(this).data('form-id');
    const $targetForm = $(`#${targetFormId}`);
    
    // 2. 针对当前表单初始化Stripe Checkout Handler
    const handler = StripeCheckout.configure({
      key: "<%= Rails.configuration.stripe[:publishable_key] %>",
      image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
      currency: 'usd',
      token: function(token) {
        // 3. 给当前表单添加stripeToken并提交
        $targetForm.append($("<input type='hidden' name='stripeToken' />").val(token.id));
        $targetForm.submit();
      }
    });

    // 可选：可以在这里根据当前plan设置Checkout的展示信息，比如金额、名称
    const planId = $targetForm.find('[name="plan_id"]').val();
    handler.open({
      name: '你的应用名称',
      description: `订阅套餐：${planId}`,
      // 如果需要动态金额，可以给表单或按钮加data-amount属性，比如data-amount="999"
      // amount: $(this).data('amount')
    });

    // 页面回退时关闭Checkout，避免内存泄漏
    window.addEventListener('popstate', function() {
      handler.close();
    });
  });
});

为什么这个方案能解决问题？ #

现在每个"Select Plan"按钮被点击时，都会动态获取自己对应的表单，而不是依赖服务器渲染时固定的index值。Stripe的token回调也只会操作当前点击按钮对应的表单，自然就能提交正确的plan_id了。

• 可以给按钮或表单添加data-amount、data-plan-name等属性，让Stripe Checkout的弹窗展示更贴合当前套餐的信息。
• 每次使用完Stripe Handler后记得销毁，避免多次点击导致的内存泄漏问题。

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