React Native集成Cashfree支付时出现api Request Failed错误

问题 #

我在React Native应用中集成Cashfree支付功能，按官方文档编写代码后，支付界面能正常弹出，但完成支付后出现如下错误：

exception is : {"status":"FAILED","message":"api Request Failed","code":"request_failed","type":"api_error"}
orderId is :021ff160-f4b0-493a-aa46-23596ee686e3
 LOG  reason: "{\"error\":\"{\\\"status\\\":\\\"FAILED\\\",\\\"message\\\":\\\"api Request Failed\\\",\\\"code\\\":\\\"request_failed\\\",\\\"type\\\":\\\"api_error\\\"}\",\"orderID\":\"021ff160-f4b0-493a-aa46-23596ee686e3\"}"
 LOG  errorString :{"status":"FAILED","message":"api Request Failed","code":"request_failed","type":"api_error"}
 LOG  errorStringObject :[object Object]
 LOG  exception is : {"status":"FAILED","message":"api Request Failed","code":"request_failed","type":"api_error"}
orderId is :021ff160-f4b0-493a-aa46-23596ee686e3

集成代码如下：

import {
  CFPaymentGatewayService,
  CFErrorResponse,
} from 'react-native-cashfree-pg-sdk';
import {
  CFDropCheckoutPayment,
  CFEnvironment,
  CFPaymentComponentBuilder,
  CFPaymentModes,
  CFSession,
  CFThemeBuilder,
} from 'cashfree-pg-api-contract';


export default function PaymentComponent() {

  const SANDBOX_ENVIRONMENT = CFEnvironment.SANDBOX;

  useEffect(() => {
    console.log('MOUNTED');
    CFPaymentGatewayService.eventSubscriber = {
      onReceivedEvent(eventName: string, map: Map<string, string>): void {
        console.log(
          'Event recieved on screen: ' +
            eventName +
            ' map: ' +
            JSON.stringify(map),
        );
      },
    };
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        console.log('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        console.log(
          'exception is : ' +
            JSON.stringify(error) +
            '\norderId is :' +
            orderID,
        );
      },
    });

    return () => {
      console.log('UNMOUNTED');
      CFPaymentGatewayService.removeCallback();
      CFPaymentGatewayService.eventSubscriber = {
        onReceivedEvent(eventName: string, map: Map<string, string>): void {
          console.log(
            `Event received on screen: ${eventName} with map: ${JSON.stringify(
              map,
            )}`,
          );
        },
      };
    };
  }, []);

  const startCheckout = useCallback(async () => {
    try {
      const session = new CFSession(
        session_id,
        order_id,
        CFEnvironment.SANDBOX,
      );
      const paymentModes = new CFPaymentComponentBuilder()
        .add(CFPaymentModes.CARD)
        .add(CFPaymentModes.UPI)
        .add(CFPaymentModes.NB)
        .add(CFPaymentModes.WALLET)
        .add(CFPaymentModes.PAY_LATER)
        .build();
      const theme = new CFThemeBuilder()
        .setNavigationBarBackgroundColor('#E64A19')
        .setNavigationBarTextColor('#FFFFFF')
        .setButtonBackgroundColor('#FFC107')
        .setButtonTextColor('#FFFFFF')
        .setPrimaryTextColor('#212121')
        .setSecondaryTextColor('#757575')
        .build();
      const dropPayment = new CFDropCheckoutPayment(
        session,
        paymentModes,
        theme,
      );
      CFPaymentGatewayService.doPayment(dropPayment);
    } catch (e: any) {
      console.log(e.message);
    }
  }, []);

}

startCheckout函数已绑定到按钮点击事件，不清楚该错误的产生原因。

可能的原因及解决方法 #

• Session ID无效或不匹配：session_id必须通过Cashfree服务端API生成，且与传入的order_id严格对应。如果session_id过期、格式错误或和订单不匹配，会导致支付后的验证请求失败。解决：重新生成有效session_id，确保和订单绑定一致。
• 环境参数不一致：生成session_id时使用的环境（沙箱/生产）必须和前端配置的CFEnvironment.SANDBOX一致，混用环境会触发API请求失败。解决：确认服务端和前端环境统一，沙箱环境仅使用Cashfree沙箱的密钥和API。
• 缺少服务端验证流程：前端onVerify回调只是触发验证通知，Cashfree要求必须在服务端调用订单验证API确认支付状态，仅前端日志打印会导致后续流程中断。解决：在服务端实现订单验证逻辑，收到onVerify通知后调用Cashfree的验证接口，获取真实订单状态。
• SDK版本冲突：react-native-cashfree-pg-sdk和cashfree-pg-api-contract版本不兼容会导致API请求异常。解决：升级两个依赖到官方推荐的最新稳定版本，确保版本匹配。
• 网络请求被拦截：应用支付完成后无法访问Cashfree的验证API，可能是设备网络受限、代理拦截或缺少网络权限。解决：检查设备网络连接，确保应用有网络访问权限，关闭可能拦截请求的代理工具。
• 订单状态异常：登录Cashfree沙箱后台，查看对应order_id的详细状态，确认订单是否存在金额错误、重复发起等问题。解决：根据后台订单状态调整前端或服务端的订单生成逻辑。

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