React Native集成Cashfree支付的4个技术问题咨询

当前支付集成流程 #

1. 设置支付回调 #

useEffect(() => {
  const onVerify = (orderId: string) => {
    console.log("Payment verified:", orderId);
    // Handle successful payment
  };

  const onError = (error: any, orderId: string) => {
    console.error("Payment failed:", error, orderId);
    // Handle payment error
  };

  CFPaymentGatewayService.setCallback({
    onVerify,
    onError,
  });

  return () => {
    CFPaymentGatewayService.removeCallback();
  };
}, []);

2. 通过Supabase边缘函数创建Cashfree订单 #

客户端调用代码

const { data, error } = await supabase.functions.invoke('create-payment', {
      body: {
        order_id: customerDetails.order_id,
        amount,
        details: customerDetails.details
      }
    })

Supabase边缘函数核心代码

const orderRequest = {
  order_id: order_id,
  order_currency: "INR",
  order_amount: amount.toString(),
  customer_details: details,
  order_meta: {
    return_url: CASHFREE_WEBHOOK_URL
  }
}

console.log('Calling Cashfree API with payload:', orderRequest);

const response = await fetch(`${CASHFREE_API_URL}`, {
  method: 'POST',
  headers: {
    'x-client-id': CASHFREE_APP_ID,
    'x-client-secret': CASHFREE_SECRET_KEY,
    'x-api-version': '2023-08-01',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(orderRequest)
})

3. 初始化支付会话并发起支付 #

const dropPayment = new CFDropCheckoutPayment(
  session,
  paymentModes,
  theme
)

return CFPaymentGatewayService.doPayment(dropPayment)

技术问题解答 #

1. 测试卡号4111 1111 1111 1111支付报错 #

• 改用Cashfree Sandbox专属测试卡：通用4111测试卡不兼容Cashfree环境，需使用官方提供的测试卡号，比如4000 0000 0000 0002（支付成功场景）、4000 0000 0000 0010（支付失败场景）。
• 规范输入格式：卡号输入纯数字（不要带空格），搭配对应测试CVV（如123）、有效期（如12/30）。
• 排查错误码：查看Cashfree Sandbox后台日志或边缘函数日志，根据具体错误码（如INVALID_CARD、AUTH_FAILED）对照官方文档定位问题。

2. return_url对应的Supabase边缘函数未被调用 #

• 验证URL可用性：确认Supabase边缘函数的公网URL（格式为https://<project-ref>.functions.supabase.co/<function-name>）可正常访问，无IP白名单或防火墙限制。
• 检查Cashfree后台配置：在Cashfree Sandbox后台将该return_url添加到允许列表，并开启支付完成事件的通知权限。
• 查看日志排查：检查Supabase边缘函数的请求日志，确认是否有请求进入；同时查看Cashfree后台的Webhook日志，排查是否存在请求发送失败（如超时、4xx/5xx状态码）。
• 核对API参数：确认order_meta中使用的是return_url而非notify_url（部分API版本参数名不同），且URL为完整HTTPS格式。

3. 模拟器仅显示UPI ID输入，无UPI应用选择按钮 #

是的，这是模拟器限制导致的：
Cashfree的UPI应用选择依赖设备上已安装的UPI应用（如Paytm、PhonePe），模拟器默认无此类应用，因此仅支持UPI ID输入；如需测试应用跳转功能，必须使用安装了UPI应用的真实物理设备。

4. 支付完成后的订单状态校验逻辑选择 #

建议两者结合，以Webhook为主，客户端回调为辅：

• Webhook（return_url）：这是最可靠的校验方式，Cashfree会主动推送支付结果到边缘函数，不受客户端状态（如APP崩溃、网络中断）影响。在边缘函数中校验订单状态后，更新Supabase数据库内的订单数据，并执行后续业务逻辑（如发货通知、积分发放）。
• onVerify回调：仅作为客户端即时反馈，用于给用户显示支付成功UI，但不要依赖它更新核心业务数据。可在回调中调用Supabase接口查询数据库内的最新订单状态，确保客户端UI与服务端数据一致。

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