"api Request Failed" when using cashfree in react native

Question

I am trying to use cashfree in my react native app for payment.

Below is my code:

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);
    }
  }, []);

}

On click on button, cashfree payment screen is coming, but after doing payment I am getting error:

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

startCheckout is called on click of button.

I am not sure why this error is coming, as I have followed cashfree documents and did as it is mentioned in it

Answer 1

Please upgrade the version of react-native-cashfree-pg-sdk to "2.0.2". It is a standard practice to use the latest versions of any SDK, as the APIs supporting the backends of these sdks tend to change along with the sdk update.