ReactJS集成PayU Hosted Checkout后如何获取支付响应

PayU的支付响应不会直接返回给前端组件，因为它采用服务器到服务器（S2S）的回调机制，或者通过跳转URL携带参数。以下是两种可行的实现方案：

方案1：后端接收回调 + 前端轮询/实时同步 #

1. 配置PayU回调URL：在PayU商户后台设置你的后端接口（比如/api/payu/webhook）作为支付结果的接收地址。
2. 后端处理回调：后端接口接收PayU发送的POST请求，验证签名后将支付状态（成功/失败）、交易ID等信息存入数据库或缓存。
3. 前端查询结果：发起支付后，前端通过轮询后端的状态查询接口，或使用WebSocket监听状态变化，获取最终支付结果。

React代码示例（轮询实现） #

import { useEffect, useState } from 'react';

const PaymentStatusChecker = ({ orderId }) => {
  const [status, setStatus] = useState('pending');

  useEffect(() => {
    const fetchStatus = async () => {
      try {
        const response = await fetch(`/api/payment/status?orderId=${orderId}`);
        const data = await response.json();
        setStatus(data.status);
        
        // 状态确定后停止轮询
        if (data.status === 'success' || data.status === 'failure') {
          clearInterval(pollInterval);
        }
      } catch (err) {
        console.error('查询支付状态失败:', err);
      }
    };

    // 每3秒查询一次
    const pollInterval = setInterval(fetchStatus, 3000);
    // 首次立即查询
    fetchStatus();

    return () => clearInterval(pollInterval);
  }, [orderId]);

  return (
    <div>
      {status === 'pending' && <p>正在确认支付结果...</p>}
      {status === 'success' && <p className="text-green-600">支付成功！</p>}
      {status === 'failure' && <p className="text-red-600">支付失败，请重试</p>}
    </div>
  );
};

方案2：利用PayU跳转URL携带参数 #

1. 设置跳转地址：在你嵌入的PayU HTML表单中，添加success_url和failure_url字段，值为你的前端页面（比如/payment-result）。
2. 解析URL参数：支付完成后，PayU会跳转到你设置的页面，并在URL查询参数中携带status、txnid、amount等信息，前端直接解析这些参数即可。

React代码示例（解析URL参数） #

import { useLocation } from 'react-router-dom';

const PaymentResultPage = () => {
  const location = useLocation();

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const paymentStatus = params.get('status');
    const transactionId = params.get('txnid');
    const paidAmount = params.get('amount');

    if (paymentStatus) {
      // 处理结果：更新状态、显示提示、请求后端验证等
      console.log(`支付状态: ${paymentStatus}, 交易ID: ${transactionId}`);
      
      // 务必调用后端接口验证参数合法性，防止伪造
      fetch(`/api/payment/verify?txnId=${transactionId}`)
        .then(res => res.json())
        .then(verifiedData => {
          if (verifiedData.isValid) {
            // 验证通过，执行后续逻辑
          } else {
            // 参数被篡改，处理异常
          }
        });
    }
  }, [location.search]);

  return (
    <div className="container mx-auto p-4">
      {/* 根据支付状态渲染对应UI */}
    </div>
  );
};

关键注意事项 #

• 必须后端验证：无论哪种方案，都要在后端验证PayU回调或跳转参数的签名，不能仅信任前端数据，避免恶意伪造支付成功的情况。
• 签名验证逻辑：PayU会提供签名生成规则，后端需要根据返回的参数+商户密钥重新生成签名，与PayU返回的hash字段对比，确认数据未被篡改。

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