React集成第三方支付：检测Iframe内POST跳转完成支付流的方案

前端侧正确判断支付完成的方式 #

你现在靠iframe加载次数判断的方案确实不严谨——支付过程中服务商页面可能有多次跳转加载，很容易误触发或者漏判。下面是几种更可靠的方案：

1. 跨域通信（PostMessage）推荐优先用这个 #

如果支付服务商允许，让后端在处理returnUrl的接口里，给返回的页面加一段JS代码，主动给父页面（你的React页面）发消息。

比如后端处理完支付回调后，返回的页面里嵌入这段代码：

// 后端返回的页面中嵌入的代码
window.parent.postMessage({
  type: 'PAYMENT_FINISHED',
  orderId: '你的订单ID',
  status: 'SUCCESS' // 或FAILED，仅做前端提示用，最终以后端校验为准
}, 'https://你的前端域名'); // 明确指定父页面域名，防止恶意消息

然后你的React前端监听这个消息：

useEffect(() => {
  const handlePaymentMsg = (event) => {
    // 先校验消息来源，必须是可信域名（支付服务商或你的后端域名）
    const trustedOrigins = ['https://支付服务商域名', 'https://你的后端域名'];
    if (!trustedOrigins.includes(event.origin)) return;

    if (event.data.type === 'PAYMENT_FINISHED') {
      // 关键：不要直接信前端传来的状态，必须调用后端接口校验订单真实状态
      checkPaymentStatus(event.data.orderId).then(res => {
        setShowPaymentIframe(false); // 关闭iframe
        if (res.status === 'SUCCESS') {
          navigate('/thank-you'); // 跳转到感谢页
        } else {
          setPaymentError('支付失败，请重试');
        }
      });
    }
  };

  window.addEventListener('message', handlePaymentMsg);
  return () => window.removeEventListener('message', handlePaymentMsg);
}, []);

2. 轮询后端订单状态 #

如果服务商不支持PostMessage，就用轮询，但要优化逻辑：

• 等iframe加载完支付页面后再开始轮询，不是靠加载次数判断
• 控制轮询间隔（比如3-5秒一次）和最大次数（比如10次，避免无限轮询）

React代码示例：

useEffect(() => {
  let intervalId;
  if (showPaymentIframe) {
    intervalId = setInterval(async () => {
      const res = await checkPaymentStatus(currentOrderId);
      // 拿到明确的支付结果就停止轮询
      if (res.status === 'SUCCESS' || res.status === 'FAILED') {
        clearInterval(intervalId);
        setShowPaymentIframe(false);
        res.status === 'SUCCESS' ? navigate('/thank-you') : setPaymentError('支付失败，请重试');
      }
    }, 3000);
  }
  return () => clearInterval(intervalId);
}, [showPaymentIframe, currentOrderId]);

3. 监听iframe URL变化仅适合同域场景 #

如果支付完成后iframe跳转到的是你自己域名下的页面，可尝试监听iframe的URL变化，但跨域时浏览器会限制访问，所以这个方法局限性大：

useEffect(() => {
  const iframe = document.getElementById('payment-iframe');
  if (!iframe) return;

  const checkUrl = () => {
    try {
      const iframeUrl = iframe.contentWindow.location.href;
      if (iframeUrl.includes('/payment-result')) {
        checkPaymentStatus(currentOrderId).then(res => {
          // 处理支付结果逻辑
        });
      }
    } catch (e) {
      // 跨域访问被阻止，直接忽略
    }
  };

  const intervalId = setInterval(checkUrl, 1000);
  return () => clearInterval(intervalId);
}, [currentOrderId]);

前端-后端-支付服务商完整数据流 #

1. 初始化支付 #

• 用户点击「立即支付」，React前端调用后端创建订单接口，传订单金额、商品信息等
• 后端生成唯一订单ID，将订单状态设为「待支付」，然后调用支付服务商的预下单接口，拿到支付页面URL
• 后端把支付页面URL和订单ID返回给前端，前端渲染iframe，src设为这个URL

2. 用户完成支付 #

• 用户在iframe内完成支付操作，支付服务商处理支付请求
• 支付结束后，服务商根据配置的returnUrl，发起POST请求到后端的支付结果回调接口

3. 后端处理回调 #

• 后端接收服务商的POST请求，先验签必须做！防止伪造请求，确认订单金额、状态等信息匹配
• 更新订单状态为「支付成功」或「支付失败」，给服务商返回HTTP 200成功响应
• 如果用PostMessage方案，后端生成一个临时页面（包含发消息的JS代码），然后重定向到这个页面；不用的话返回空页面或提示即可

4. 前端确认结果 #

• PostMessage方案：iframe加载后端的临时页面后，给父页面发消息，前端收到后调用后端查询订单状态接口，确认真实状态后关闭iframe、跳转页面
• 轮询方案：前端在iframe加载后持续轮询后端的查询订单状态接口，拿到明确结果后处理后续逻辑

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