Rails 7集成Stripe无法跳转至支付表单，请求协助分析日志

问题概述 #

使用rack-cors的Rails 7应用，点击支付按钮提交请求后，后台日志显示请求正常完成（200 OK），但前端未跳转到Stripe支付表单页面。

核心问题与修复方案 #

1. 前端JS语法错误（直接导致跳转失效） #

原create.js.erb存在多余的闭合括号，导致JS执行报错，中断redirectToCheckout逻辑。同时代码中冗余获取按钮元素但未使用，可直接移除。

修正后的create.js.erb代码：

var stripe = Stripe("<%= Rails.application.credentials[:stripe][:public] %>");

stripe.redirectToCheckout({
  sessionId: "<%= @session.id %>"
}).then(function (result) {
  // 可选：添加错误提示，便于排查前端问题
  if (result.error) {
    alert(result.error.message);
  }
});

2. 确认Stripe官方JS脚本已加载 #

页面必须引入Stripe v3版本的JS脚本，否则Stripe对象会未定义。在应用布局文件（如app/views/layouts/application.html.erb）的<head>或<body>末尾添加：

<script src="https://js.stripe.com/v3/"></script>

3. 验证Stripe会话创建有效性 #

虽然后台日志返回200，但可添加日志确认会话是否成功生成，同时修正控制器中line_items的哈希写法（避免Ruby语法歧义）：

class CheckoutsController < ApplicationController
  def create
    @session = Stripe::Checkout::Session.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            product: 'prod_Miva1sJtJ29QeC',
            unit_amount: 500,
            currency: 'usd',
          },
          quantity: 1,
        }
      ],
      mode: 'payment',
      success_url: "https://2679755d58ba4a3b92a39174d8656a87.vfs.cloud9.us-east-1.amazonaws.com",
      cancel_url: "https://2679755d58ba4a3b92a39174d8656a87.vfs.cloud9.us-east-1.amazonaws.com",
    })
    # 添加日志确认会话ID
    Rails.logger.info "生成的Stripe会话ID：#{@session.id}"
    respond_to do |format|
      format.js
    end
  end
end

4. 确认CORS配置无冲突 #

从日志看CORS响应头正常，但可检查config/initializers/cors.rb配置，确保允许当前域名的跨域请求：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://2679755d58ba4a3b92a39174d8656a87.vfs.cloud9.us-east-1.amazonaws.com'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

内容的提问来源于stack exchange，提问作者bad-reputation