iframe中Stripe身份验证return_url失效及监听Done按钮咨询

问题根源 #

你遇到的return_url不跳转问题，是因为浏览器的同源策略限制：Stripe的重定向验证页面和你的应用域名不同，在iframe中运行时，Done按钮触发的跳转行为会被浏览器拦截，而独立页面不受此限制。

关于监听iframe内Done按钮的可行性 #

直接监听iframe内的Done按钮点击完全不可行。由于跨域限制，你的应用无法访问iframe内的DOM元素，也无法监听跨域页面的事件，浏览器会直接阻止这类操作。

推荐替代方案 #

方案1：改用Stripe Identity嵌入组件（最优解） #

Stripe提供了原生的嵌入组件，无需iframe，直接在你的页面中集成验证流程，还能通过SDK直接监听完成事件：

1. 前端引入Stripe依赖：

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

2. 初始化组件并监听事件：

const stripe = Stripe('你的Stripe公钥');
const verificationComponent = stripe.identityVerification({
  clientSecret: '从后端获取的verification_session.client_secret'
});

// 监听验证完成事件，触发你的API调用
verificationComponent.on('completed', async () => {
  try {
    await fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ user_id: 当前用户ID })
    });
    // 验证完成后跳转
    window.location.href = '/?success';
  } catch (err) {
    // 处理错误
    console.error('API调用失败:', err);
  }
});

// 将组件挂载到页面指定容器
verificationComponent.mount('#verification-container');

3. 后端代码调整（返回client_secret而非url）：

def verification_next
    verification_session = Stripe::Identity::VerificationSession.create(
      {
        type:       'document',
        metadata:   {
          user_id: current_user&.id,
        },
        options:{
          document: {
            require_matching_selfie: true
          }
        }
        # 嵌入组件无需设置return_url
      }
    )

    render json: { client_secret: verification_session.client_secret }
  end

方案2：通过Webhook或轮询监听验证状态（兼容重定向方式） #

如果必须保留重定向模式，可通过后端监听VerificationSession的状态变化：

• Webhook方式（推荐）：在Stripe控制台配置identity.verification_session.verified事件的Webhook端点，当用户完成验证后，Stripe会主动调用你的后端接口，你可以在接口中标记用户验证状态，前端可通过轮询或WebSocket获取状态后触发跳转。
• 前端轮询方式：前端每隔几秒调用后端接口，后端通过Stripe::Identity::VerificationSession.retrieve(session_id)查询状态，当状态变为verified时，执行API调用和跳转。

总结 #

跨域限制直接阻断了iframe内按钮监听的可能，优先选择嵌入组件方案，既符合安全规范又能直接控制流程；若坚持重定向模式，Webhook是最可靠的后端触发方式。

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