Safepay支付网关成功交易后无法重定向至Next.js应用

以下是针对支付成功后无法重定向回应用的排查方向和解决方案：

• 核对SDK初始化与控制台的重定向URL一致性
  确保在前端初始化Safepay SDK或服务端创建支付会话时，传递的successUrl/success_url、cancelUrl/cancel_url参数，与Safepay商户控制台配置的URL完全一致——包括协议（http/https）、域名、端口（localhost环境）和路径，不能有任何拼写或格式差异。
  前端初始化示例：

  const initSafepayCheckout = () => {
    const safepay = new window.Safepay({
      apiKey: process.env.NEXT_PUBLIC_SAFEPAY_API_KEY,
      environment: process.env.NEXT_PUBLIC_SAFEPAY_ENV,
      successUrl: 'http://localhost:3000/api/payment/success',
      cancelUrl: 'http://localhost:3000/api/payment/cancel'
    });
    // 发起结账流程逻辑
  };
  

• 检查Webhook配置与处理逻辑
  Safepay部分场景下需要Webhook确认交易状态后才触发重定向。先确认控制台中Webhook URL配置正确，再确保Next.js的Webhook端点能正常响应：

  1. 必须验证Safepay的请求签名，防止伪造请求；
  2. 端点需返回200状态码，否则Safepay会认为回调失败，可能终止重定向流程。
     Webhook端点示例：

  // app/api/payment/webhook/route.js
  export async function POST(request) {
    const payload = await request.json();
    // 实现签名验证逻辑
    const isSignatureValid = verifySafepaySignature(payload, process.env.SAFEPAY_WEBHOOK_SECRET);
    if (!isSignatureValid) return new Response('Invalid signature', { status: 403 });
  
    // 处理交易状态更新
    if (payload.status === 'successful') {
      // 记录交易数据等业务逻辑
    }
    return new Response('OK', { status: 200 });
  }
  

• 排查浏览器重定向拦截机制
  如果使用Safepay弹窗式结账，浏览器可能因“非用户主动触发”拦截重定向：

  • 确保结账流程由用户主动点击按钮触发，避免在页面加载、异步回调等场景自动唤起结账；
  • 可尝试改用Safepay内嵌式结账组件，降低被拦截概率。

• 查看Safepay交易日志
  登录Safepay商户控制台，进入对应交易的详情页，查看重定向日志或回调记录，是否存在URL不可达、签名错误等明确报错，根据日志定位具体问题。

• 确认服务端会话创建逻辑
  如果通过服务端创建支付会话，检查请求Safepay API时是否正确传递了重定向URL参数，且会话创建返回的响应中包含正确的重定向配置。
  服务端创建会话示例：

  // app/api/payment/create/route.js
  export async function POST(request) {
    const { amount } = await request.json();
    const res = await fetch('https://api.getsafepay.com/v1/payments', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SAFEPAY_SECRET_KEY}`
      },
      body: JSON.stringify({
        amount,
        currency: 'PKR',
        success_url: 'http://localhost:3000/api/payment/success',
        cancel_url: 'http://localhost:3000/api/payment/cancel',
        // 其他必填参数
      })
    });
    const data = await res.json();
    return Response.json(data);
  }
  

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