I'm currently integrating cashfree into my react native app for processing payments.
Here is a snippet of the code I'm using:
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 received 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) +
'\nOrder ID 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);
}
}, []);
}
Upon clicking the button, the cashfree payment screen appears, but after completing the payment, I encounter this error:
Exception is : {"status":"FAILED","message":"API Request Failed","code":"request_failed","type":"api_error"}
Order ID 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"}
Order ID is :021ff160-f4b0-493a-aa46-23596ee686e3
The startCheckout function is triggered upon button click.
I am unsure why this error is occurring, as I have followed the guidelines provided by cashfree in their documentation.