Ruby on Rails对接Stripe API时第二个商品结账按钮失效问题求助

问题根因 #

你这个问题是两个错误叠加导致的：

1. HTML ID重复：循环渲染商品按钮时，所有按钮都写死了id="checkout-button"，而HTML规范要求ID全局唯一，document.getElementById('checkout-button')永远只会返回页面里第一个出现的对应ID元素，也就是第一个商品的结账按钮。
2. 前端逻辑完全颠倒：create.js.erb里的逻辑是「请求成功后给按钮新增点击事件」，而不是「请求成功后直接跳转支付页」。你点一次按钮发请求拿到支付会话ID之后，还要再点一次按钮才会触发跳转动作。

刚好两个问题叠加就复现了你说的现象：

• 第一次点第二个商品的按钮，发请求拿到第二个商品的支付会话ID，返回的JS给第一个按钮绑定了对应跳转逻辑，所以这次点击没有任何跳转反应；
• 接下来你点第一个商品的按钮，触发刚才绑定的跳转事件，就正常跳转到支付页了。

修复方案 #

1. 修改商品索引页按钮代码 #

删掉固定ID即可，不需要额外配置ID：

<%=button_to 'Buy Now', checkout_create_path, params: {id: product.id, price: product.price, stripe_price_id: product.stripe_price_id}, class: 'btn btn-primary', remote: true %>

2. 重写create.js.erb逻辑 #

拿到会话ID后直接跳转，不需要额外绑定点击事件，顺便删除原代码里的语法错误（then外部访问result变量会直接抛错）：

var stripe = Stripe("<%= Rails.application.credentials[:stripe][:public] %>");
stripe.redirectToCheckout({
  sessionId: '<%= @session.id %>'
}).then(function (result) {
  if (result.error) {
    console.log(result.error.message);
  }
});

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