React Native Integration

Payment Gateway React Native Guide

Setting Up SDK

The React Native SDK is hosted on npm.org you can get the sdk here.

Our React Native SDK supports Android SDK version 19 and above and iOS minimum deployment target of 10.3 and above. Navigate to your project and run the following command.

npm install react-native-cashfree-pg-sdk

iOS

Add this to your application’s info.plist file.

<key>LSApplicationCategoryType</key>
<string></string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>phonepe</string>
<string>tez</string>
<string>paytmmp</string>
<string>bhim</string>
<string>credpay</string>
</array>

cd ios
pod install --repo-update

Step 1: Creating an Order

The first step in the integration is to create an Order. You can add an endpoint to your server which creates this order and integrate this server endpoint with your frontend.

Order creation must happen from your backend (as this API uses your secret key). Please do not call this directly from your mobile application.

Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.

You can find the SDKs here.

After successfully creating an order, you will receive a unique order_id and payment_session_id that you need for subsequent steps.

You can view all the complete api request and response for /orders here.

Step 2: Opening the Payment Page

Once the order is created, the next step is to open the payment page so the customer can make the payment. The React Native SDK offer below payment flow:

To complete the payment, we can follow the following steps:

Create a CFSession object.
Set payment callback.
Initiate the payment

Create a Session

This object contains essential information about the order, including the payment session ID (payment_session_id) and order ID (order_id) obtained from Step 1. It also specifies the environment (sandbox or production).

import {
  CFEnvironment,
  CFSession,
} from 'cashfree-pg-api-contract';

try {
      const session = new CFSession(
        'payment_session_id',
        'order_id',
        CFEnvironment.SANDBOX
      );
}
catch (e: any) {
      console.log(e.message);
}

Set payment callback

The SDK exposes an interface CFCallback to receive callbacks from the SDK once the payment flow ends.

onVerify(orderID: string)
onError(error: CFErrorResponse, orderID: string)

Make sure to set the callback at componentDidMount and remove the callback at componentWillUnmount as this also handles the activity restart cases and prevents memory leaks.

Always call setCallback before calling doPayment method of SDK

import {
  CFErrorResponse,
  CFPaymentGatewayService,
} from 'react-native-cashfree-pg-sdk';

export default class App extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    console.log('MOUNTED');
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        this.changeResponseText('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        this.changeResponseText(
          'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
        );
      },
    });
  }

  componentWillUnmount() {
    console.log('UNMOUNTED');
    CFPaymentGatewayService.removeCallback();
  }
}

Initiate the Payment

This object combines all the configurations into a single checkout configuration. Finally, call doWebPayment() to open the Cashfree checkout screen. This will present the user with the payment options and handle the payment process.

async _startWebCheckout() {
    try {
        const session = new CFSession(
            'payment_session_id',
            'order_Id',
            CFEnvironment.SANDBOX
        );
        console.log('Session', JSON.stringify(session));

        CFPaymentGatewayService.doWebPayment(JSON.stringify(session));

    } catch (e: any) {
        console.log(e.message);
    }
}

This flow is for merchants who wants to quickly provide UPI functionality using cashfree’s mobile SDK without handling other modes like Cards or Net banking.

try {
    // Setting theme is optional
    const theme = new CFThemeBuilder()
        .setNavigationBarBackgroundColor('#E64A19') // ios
        .setNavigationBarTextColor('#FFFFFF') // ios
        .setButtonBackgroundColor('#FFC107') // ios
        .setButtonTextColor('#FFFFFF') // ios
        .setPrimaryTextColor('#212121')
        .setSecondaryTextColor('#757575') // ios
        .build();
        
    const upiPayment = new CFUPIIntentCheckoutPayment(
        session,
        theme
    );
	CFPaymentGatewayService.doUPIPayment(upiPayment);
} catch (e: any) {
    console.log(e.message);
}

Sample Code

import * as React from 'react';
import { Component } from 'react';

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

export default class App extends Component {

 constructor() {
   super();
 }

 componentDidMount() {
   console.log('MOUNTED');
   CFPaymentGatewayService.setCallback({
     onVerify(orderID: string): void {
       this.changeResponseText('orderId is :' + orderID);
     },
     onError(error: CFErrorResponse, orderID: string): void {
       this.changeResponseText(
         'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
       );
     },
   });
 }

 componentWillUnmount() {
   console.log('UNMOUNTED');
   CFPaymentGatewayService.removeCallback();
 }

 async _startWebCheckout() {
   try {
     const session = new CFSession(
       'payment_session_id',
       'order_Id',
       CFEnvironment.SANDBOX
     );
     console.log('Session', JSON.stringify(session));
     CFPaymentGatewayService.doWebPayment(JSON.stringify(session));
   } catch (e: any) {
     console.log(e.message);
   }
 }
}

import * as React from 'react';
import { Component } from 'react';

import {
  CFErrorResponse,
  CFPaymentGatewayService,
} from 'react-native-cashfree-pg-api';

import {
  CFEnvironment,
  CFPaymentComponentBuilder,
  CFSession,
  CFThemeBuilder,
} from 'cashfree-pg-api-contract';

export default class App extends Component {

  constructor() {
    super();
  }

  componentDidMount() {
    console.log('MOUNTED');
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        this.changeResponseText('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        this.changeResponseText(
          'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
        );
      },
    });
  }

  componentWillUnmount() {
    console.log('UNMOUNTED');
    CFPaymentGatewayService.removeCallback();
  }

  async _startCheckout() {
    try {
      const session = new CFSession(
        'payment_session_id',
        'order_id',
        CFEnvironment.SANDBOX
      );
      const theme = new CFThemeBuilder()
        .setNavigationBarBackgroundColor('#E64A19')// ios
        .setNavigationBarTextColor('#FFFFFF')// ios
        .setButtonBackgroundColor('#FFC107')// ios
        .setButtonTextColor('#FFFFFF')// ios
        .setPrimaryTextColor('#212121')
        .setSecondaryTextColor('#757575')// ios
        .build();
      const upiPayment = new CFUPIIntentCheckoutPayment(
        session,
        theme
      );
      CFPaymentGatewayService.doUPIPayment(upiPayment);
    } catch (e: any) {
      console.log(e.message);
    }
  }
}

Github Sample

Sample UPI Test apk

Step 4: Confirming the Payment

Once the payment is completed, you need to confirm whether the payment was successful by checking the order status. After payment user will be redirected back to your component.

You must always verify payment status from your backend. Before delivering the goods or services, please ensure you call check the order status from your backend. Ensure you check the order status from your server endpoint.

export default class App extends Component {
  ...
  componentDidMount() {

    CFPaymentGatewayService.setCallback({
      //verify order status from backend
      onVerify(orderID: string): void {
        this.changeResponseText('orderId is :' + orderID);
      },

      onError(error: CFErrorResponse, orderID: string): void {
        this.changeResponseText(
          'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
        );
      },
    });
  }
}

To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same.

Testing

You should now have a working checkout button that redirects your customer to Cashfree Checkout.

Click the checkout button.
You’re redirected to the Cashfree Checkout payment page.

If your integration isn’t working:

Error Codes

To confirm the error returned in your android application, you can view the error codes that are exposed by the SDK.

ERROR CODES	MESSAGE
MISSING_CALLBACK	The callback is missing in the request.
ORDER_ID_MISSING	The “order_id” is missing in the request.
SESSION_OBJECT_MISSING	The “session” is missing in the request
PAYMENT_OBJECT_MISSING	The “payment” is missing in the request
ENVIRONMENT_MISSING	The “environment” is missing in the request.
ORDER_TOKEN_MISSING	The “order_token” is missing in the request.

Other Options

From our Reacr SDK version 2.0.1 onwards, you can subscribe to the analytics events generated from our Drop checkout payment flow and push it to the analytics platform of your choice directly from your application.

If you want to enable this feature in Drop Payment flow you can add the following line to your values.xml file.

<bool name="cashfree_custom_analytics_subscriber_enabled">true</bool>

javascript
CFPaymentGatewayService.setEventSubscriber({
            onReceivedEvent(eventName, map) {
                console.log('Event recieved on screen: ' +
                    eventName +
                    ' map: ' +
                    JSON.stringify(map));
            },
});

componentWillUnmount() {
        CFPaymentGatewayService.removeEventSubscriber();
}

Payments

Payment Gateway

Checkout

Flowwise

RiskShield

Other Products

Developer updates

React Native Integration

Payment Gateway React Native Guide

Setting Up SDK

iOS

Step 1: Creating an Order

Step 2: Opening the Payment Page

Create a Session

Set payment callback

Initiate the Payment

Sample Code

Step 4: Confirming the Payment

Testing

Error Codes

Other Options

Payments

Payment Gateway

Checkout

Flowwise

RiskShield

Other Products

Developer updates

​Payment Gateway React Native Guide

​Setting Up SDK

iOS

​Step 1: Creating an Order

​Step 2: Opening the Payment Page

​Create a Session

​Set payment callback

​Initiate the Payment

​Sample Code

​Step 4: Confirming the Payment

​Testing

​Error Codes

​Other Options

Payment Gateway React Native Guide

Setting Up SDK

Step 1: Creating an Order

Step 2: Opening the Payment Page

Create a Session

Set payment callback

Initiate the Payment

Sample Code

Step 4: Confirming the Payment

Testing

Error Codes

Other Options