React Native Integration

Cashfree’s React Native SDK provides a payment solution that integrates the payment gateway into your React Native applications, supporting both Android (SDK version 19+) and iOS (deployment target 10.3+) platforms. The SDK offers multiple checkout flows including web checkout and UPI Intent checkout.

Key benefits

The React Native SDK offers the following advantages for your payment integration:

Multiple checkout flows: Provides web checkout and UPI Intent checkout options to suit different integration needs.
Cross-platform support: Seamlessly supports both Android and iOS platforms from a single codebase.
Secure and compliant: Securely handles payment processing with built-in security measures managed by the SDK.

Prerequisites

Ensure you complete the following tasks before starting the integration:

Create a Cashfree Merchant Account.
Log in to the Merchant Dashboard and generate an App ID and Secret Key. Learn how to generate API keys.
Ensure your application complies with Cashfree’s Integrity standards. Applications that don’t meet the required integrity standards may be restricted from using production services.

The React Native integration consists of three essential steps:

Step 1

Create an order

Step 2

Open the payment page

Step 3

Confirm the payment

The step-by-step guide for each step of the integration process is as follows:

Step 1: Create an order Server-side

To integrate the Cashfree Payment Gateway, you must first create an order. Complete this step before you process any payments. Configure an endpoint on your server to handle order creation. You can’t call this API from the client-side.

Create orders through your server as this API requires your secret key. Don’t call it directly from your mobile application.

API request for creating an order

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

import { Cashfree, CFEnvironment } from "cashfree-pg";

const cashfree = new Cashfree(
	CFEnvironment.PRODUCTION,
	"{Client ID}",
	"{Client Secret Key}"
);

function createOrder() {
	var request = {
		order_amount: "1",
		order_currency: "INR",
		customer_details: {
			customer_id: "node_sdk_test",
			customer_name: "",
			customer_email: "example@gmail.com",
			customer_phone: "9999999999",
		},
		order_meta: {
			return_url:
				"https://test.cashfree.com/pgappsdemos/return.php?order_id=order_123",
		},
		order_note: "",
	};

	cashfree
		.PGCreateOrder(request)
		.then((response) => {
			var a = response.data;
			console.log(a);
		})
		.catch((error) => {
			console.error("Error setting up order request:", error.response.data);
		});
}

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: Open the payment page Client-side

Once the order is created, the next step is to open the payment page so the customer can make the payment.

1. Set up the SDK

The React Native SDK is hosted on npm. You can download the latest SDK version 2.2.6 here. The React Native SDK supports Android SDK version 19 and above and iOS minimum deployment target of 10.3 and above.

npm, Yarn, or Expo

Navigate to your project and run the following command:

npm install react-native-cashfree-pg-sdk

iOS configuration

To provide UPI payments on iOS, enable the following permissions in your app. Add this to your application’s info.plist file:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>amazonpay</string>
	<string>upi</string>
	<string>credpay</string>
	<string>bhim</string>
	<string>paytmmp</string>
	<string>phonepe</string>
	<string>tez</string>
	<string>navipay</string>
	<string>mobikwik</string>
	<string>myairtel</string>
	<string>popclubapp</string>
	<string>super</string>
	<string>kiwi</string>
</array>

For iOS, run the following commands:

cd ios
pod install --repo-update

2. Select a payment flow

The React Native SDK offers the following payment flows:

Web Checkout

In this flow, the SDK provides a webview-based checkout implementation to facilitate a quick integration with the payment gateway. Your customers can fill in the necessary details in the web page and complete the payment. This mode handles all the business logic and UI components to make the payment smooth and easy to use.Your customers are presented with a familiar web interface where they can enter their payment details and complete their transaction seamlessly. All payment logic, UI components, and security measures are managed by the SDK, eliminating the need for complex custom implementation.

UPI Intent Checkout

This flow is for merchants who want to provide UPI Intent functionality using Cashfree’s mobile SDK. In this flow, the SDK provides a pre-built native Android screen to facilitate integration with the payment gateway. Your customers see a list of UPI apps installed on their phone which they can select to initiate payment. This mode handles all the business logic and UI components to make the payment smooth and easy to use. The SDK allows you to customise the UI in terms of color coding and fonts.

3. Complete the payment

To complete the payment, follow these steps:

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

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 up the payment callback

The SDK exposes a CFCallback interface to receive callbacks from the SDK once the payment flow ends. The callback supports two methods:

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

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 the doPayment method of the 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

Web Checkout

Use 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(session);

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

UPI Intent Checkout

Use doUPIPayment() to provide UPI functionality using Cashfree’s mobile SDK without handling other modes like cards or net banking. You can optionally customise the theme by creating a CFThemeBuilder object.

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

Complete code examples demonstrating the implementation of both Web Checkout and UPI Intent Checkout flows are shown below:

Web checkout

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(session);
   } catch (e: any) {
     console.log(e.message);
   }
 }
}

UPI Intent Checkout

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

Sample GitHub code

You can explore a working integration example on GitHub: GitHub Sample Sample UPI Test apk

This SDK is compatible with the Expo framework. For a sample implementation, see the Expo Sample on GitHub.

Step 3: Confirm the payment Server-side

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

You must always verify payment status from your server. Before delivering the goods or services, ensure you check the order status from your server and verify it 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.

version := "2023-08-01"
response, httpResponse, err := cashfree.PGFetchOrder(&version, "<order_id>", nil, nil, nil)
if err != nil {
	fmt.Println(err.Error())
} else {
	fmt.Println(httpResponse.StatusCode)
	fmt.Println(response)
}

Testing

After you integrate the checkout functionality, verify that it opens the Cashfree-hosted payment page. Follow these steps to test:

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

Error codes

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

Show error codes

The following are some of 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.

Affiliate partner program

As a developer building payment experiences for your clients, you can earn additional income while providing them with industry-leading payment solutions.

Join the Cashfree affiliate partner program and get rewarded every time your clients use Cashfree.

What you get:

Earn up to 0.25% commission on every transaction.
Become a trusted fintech partner for your clients.
Access to a dedicated partner manager for expert support.

What your clients get:

Instant activation and go live in minutes.
Industry-best success rate across all payment modes.
Effortless acceptance of international payments in 140+ currencies.

Get started today. Become a partner now.

Payments

Payment Gateway

Checkout

International Payments

Flowwise

RiskShield

Subscription

Other Products

Developer updates

React Native Integration

Key benefits

Prerequisites

Step 1

Step 2

Step 3

Step 1: Create an order Server-side

API request for creating an order

Step 2: Open the payment page Client-side

1. Set up the SDK

npm, Yarn, or Expo

iOS configuration

2. Select a payment flow

3. Complete the payment

Create a session

Set up the payment callback

Initiate the payment

Sample code

Sample GitHub code

Step 3: Confirm the payment Server-side

Testing

Error codes

Payments

Payment Gateway

Checkout

International Payments

Flowwise

RiskShield

Subscription

Other Products

Developer updates

​Key benefits

​Prerequisites

Step 1

Step 2

Step 3

​Step 1: Create an order Server-side

API request for creating an order

​Step 2: Open the payment page Client-side

​1. Set up the SDK

npm, Yarn, or Expo

​iOS configuration

​2. Select a payment flow

​3. Complete the payment

​Create a session

​Set up the payment callback

​Initiate the payment

​Sample code

​Sample GitHub code

​Step 3: Confirm the payment Server-side

​Testing

​Error codes

Key benefits

Prerequisites

Step 1: Create an order Server-side

Step 2: Open the payment page Client-side

1. Set up the SDK

iOS configuration

2. Select a payment flow

3. Complete the payment

Create a session

Set up the payment callback

Initiate the payment

Sample code

Sample GitHub code

Step 3: Confirm the payment Server-side

Testing

Error codes