React Native Integration

Payment Gateway React Native Guide

Pre-built native UI screen to facilitate a quick integration with our payment gateway. This mode handles all the business logic and UI Components to make the payment smooth and easy to use. The SDK allows the merchant to customize the UI in many aspects.

Setting Up SDK

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.

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 allows you to:

Either open a checkout page with all payment methods (cards, UPI, Net Banking and Wallets).
Or only provide a UPI Intent payment where a customer will only pay using the UPI app installed on their phone.

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.

public void onVerify(String orderID) public void onError(CFErrorResponse cfErrorResponse, String orderID)

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.

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 (session, payment modes, and theme) 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);
    }
}

UPI Intent Object (Optional)

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 {
    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 {
  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 _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);
    }
  }
}

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.

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

Ensure you check the order status from your server endpoint.

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

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

UPI Intent Object (Optional)

Sample Code

Step 4: Confirming the Payment

Testing

Error Codes

Other Options

Payments

Payment Gateway

Checkout

Flowwise

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

​UPI Intent Object (Optional)

​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

UPI Intent Object (Optional)

Sample Code

Step 4: Confirming the Payment

Testing

Error Codes

Other Options