使用Javascript和Ruby集成Stripe时的动态价格显示异常问题

1. 先确认请求是否真的到达后端 #

后端puts无输出，大概率是请求没进到后端，或者请求本身有问题：

• 打开浏览器DevTools的Network标签，触发表单提交，查看/create-checkout-session请求的状态：
  • 要是404：检查后端路由定义是否正确，比如Ruby on Rails里得写post '/create-checkout-session', to: 'checkout#create'，别写错路径。
  • 要是403/500：十有八九是跨域问题，Webflow前端和Ruby后端域名不一样的话，得在后端配置CORS。比如Rails里用rack-cors gem，允许Webflow域名的OPTIONS和POST请求。
• 检查请求的Content-Type，必须设为application/json，而且要把参数用JSON.stringify()转成字符串再发，不能用默认的表单格式。

2. 验证前端传递的参数是否正确 #

就算请求到了后端，参数传错也会导致价格/名称不生效：

• 在Network标签里看请求的Payload，确认price（或者你定义的参数名）和项目名称是不是计算后的正确值。
• 检查JS里的取值逻辑，确保表单提交时拿到的是最新的动态值，比如：

  document.querySelector('#your-form-id').addEventListener('submit', async (e) => {
    e.preventDefault();
    // 从DOM里取最新计算的价格和名称
    const finalPrice = document.querySelector('#dynamic-price').textContent;
    const finalName = document.querySelector('#dynamic-item-name').textContent;
    // 转成Stripe要求的最小单位（比如美元要乘100，按分算）
    const stripeAmount = parseInt(finalPrice) * 100;
  
    const res = await fetch('/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        amount: stripeAmount,
        item_name: finalName
      })
    });
  
    const session = await res.json();
    // 跳转Stripe结账页
    stripe.redirectToCheckout({ sessionId: session.id });
  });
  

3. 检查后端Stripe会话创建逻辑 #

如果请求确实到了后端（可以把puts换成Rails.logger.info(params.inspect)，生产环境puts可能看不到输出），重点看这几点：

• 确认能正确拿到前端参数，比如params[:amount]和params[:item_name]是不是存在，有没有类型错误（Stripe要求价格是整数）。
• 创建会话时，必须把动态参数传入price_data里，别用固定的Stripe Price ID，不然价格不会变：

  # Ruby后端示例（Rails）
  def create
    session = Stripe::Checkout::Session.create({
      payment_method_types: ['card'],
      line_items: [{
        price_data: {
          currency: 'usd',
          product_data: {
            name: params[:item_name] # 用前端传的动态名称
          },
          unit_amount: params[:amount].to_i # 用前端传的动态价格（分）
        },
        quantity: 1
      }],
      mode: 'payment',
      success_url: 'https://your-webflow-site.com/success',
      cancel_url: 'https://your-webflow-site.com/cancel'
    })
  
    render json: { id: session.id }
  end
  

4. 确认前端跳转逻辑 #

拿到后端返回的会话ID后，要确保正确调用stripe.redirectToCheckout({ sessionId: session.id })，别不小心覆盖了会话数据。

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