> ## Documentation Index
> Fetch the complete documentation index at: https://cashfreepayments-d00050e9-theme-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Integration

> Learn more about integrating Cashfree SDK in your react native app

<Warning>
  ### Cashfree's integrity standards

  Before proceeding with the SDK integration, please ensure that your application complies with Cashfree's Integrity. Applications that don't meet the required integrity standards may be restricted from using production services.

  For further guidance, refer to the [Cashfree Integrity](https://www.cashfree.com/docs/payments/online/mobile/misc/cashfree_integrity).
</Warning>

### Setting up SDK

The React Native SDK is hosted on [npm](https://www.npmjs.com/). You can get the latest sdk 2.2.5 [here](https://www.npmjs.com/package/react-native-cashfree-pg-sdk).<br />
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:

<CodeGroup>
  ```npm npm
  npm install react-native-cashfree-pg-sdk
  ```

  ```yarn yarn
  yarn add react-native-cashfree-pg-sdk
  ```

  ```expo expo
  npx expo install react-native-cashfree-pg-sdk
  npx expo install expo-dev-client
  npx expo prebuild  //mandatory for expo
  npx expo run:android
  npx expo run:ios
  ```
</CodeGroup>

##### iOS

Add this to your application's `info.plist` file.

```shell
<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>
```

```shell
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.

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

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](/api-reference/payments/sdk#payment-sdk).

<CodeGroup>
  ```javascript javascript
  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);
  		});
  }
  ```

  ```python python
  from cashfree_pg.models.create_order_request import CreateOrderRequest
  from cashfree_pg.api_client import Cashfree
  from cashfree_pg.models.customer_details import CustomerDetails


  Cashfree.XClientId = {Client ID}
  Cashfree.XClientSecret = {Client Secret Key}
  Cashfree.XEnvironment = Cashfree.XSandbox
  x_api_version = "2023-08-01"

  def create_order():
          customerDetails = CustomerDetails(customer_id="123", customer_phone="9999999999")
          createOrderRequest = CreateOrderRequest(order_amount=1, order_currency="INR", customer_details=customerDetails)
          try:
              api_response = Cashfree().PGCreateOrder(x_api_version, createOrderRequest, None, None)
              print(api_response.data)
          except Exception as e:
              print(e)
  ```

  ```java java
  import com.cashfree.*;

  Cashfree.XClientId = {Client Key};
  Cashfree.XClientSecret = {Client Secret Key};
  Cashfree.XEnvironment = Cashfree.SANDBOX;

  static void createOrder() {
    CustomerDetails customerDetails = new CustomerDetails();
    customerDetails.setCustomerId("123");
    customerDetails.setCustomerPhone("9999999999");

    CreateOrderRequest request = new CreateOrderRequest();
    request.setOrderAmount(1.0);
    request.setOrderCurrency("INR");
    request.setCustomerDetails(customerDetails);
    try {
      Cashfree cashfree = new Cashfree();
      ApiResponse<OrderEntity> response = cashfree.PGCreateOrder("2023-08-01", request, null, null, null);
      System.out.println(response.getData().getOrderId());

    } catch (ApiException e) {
      throw new RuntimeException(e);
    }
  }
  ```

  ```go go
  import (
    cashfree "github.com/cashfree/cashfree-pg/v3"
  )

  func createOrder() {

  clientId := {Client ID}
  clientSecret := {Client Secret Key}
  cashfree.XClientId = &clientId
  cashfree.XClientSecret = &clientSecret
  cashfree.XEnvironment = cashfree.SANDBOX

  request := cashfree.CreateOrderRequest{
  		OrderAmount: 1,
  		CustomerDetails: cashfree.CustomerDetails{
  			CustomerId:    "1",
  			CustomerPhone: "9999999999",
  		},
  		OrderCurrency: "INR",
  		OrderSplits:   []cashfree.VendorSplit{},
  	}
  	version := "2023-08-01"
  	response, httpResponse, err := cashfree.PGCreateOrder(&version, &request, nil, nil, nil)
  	if err != nil {
  		fmt.Println(err.Error())
  	} else {
  		fmt.Println(httpResponse.StatusCode)
  		fmt.Println(response)
      }
  }
  ```

  ```csharp csharp
  using cashfree_pg.Client;
  using cashfree_pg.Model;

  Cashfree.XClientId = {Client ID};
  Cashfree.XClientSecret = {Client Secret Key};
  Cashfree.XEnvironment = Cashfree.PRODUCTION;
  var cashfree = new Cashfree();
  var xApiVersion = "2023-08-01";

  void CreateOrder() {
      var customerDetails = new CustomerDetails("123", null, "9999999999");
      var createOrdersRequest = new CreateOrderRequest(null, 1.0, "INR", customerDetails);
      try {
          // Create Order
          var result = cashfree.PGCreateOrder(xApiVersion, createOrdersRequest, null, null, null);
          Console.WriteLine(result);
          Console.WriteLine(result.StatusCode);
          Console.WriteLine((result.Content as OrderEntity));
      } catch (ApiException e) {
          Console.WriteLine("Exception when calling PGCreateOrder: " + e.Message);
          Console.WriteLine("Status Code: " + e.ErrorCode);
          Console.WriteLine(e.StackTrace);
      }
  }
  ```

  ```php php
  \Cashfree\Cashfree::$XClientId = "<x-client-id>";
  \Cashfree\Cashfree::$XClientSecret = "<x-client-secret>";
  \Cashfree\Cashfree::$XEnvironment = Cashfree\Cashfree::$SANDBOX;

  $cashfree = new \Cashfree\Cashfree();

  $x_api_version = "2023-08-01";
  $create_orders_request = new \Cashfree\Model\CreateOrdersRequest();
  $create_orders_request->setOrderAmount(1.0);
  $create_orders_request->setOrderCurrency("INR");
  $customer_details = new \Cashfree\Model\CustomerDetails();
  $customer_details->setCustomerId("123");
  $customer_details->setCustomerPhone("9999999999");
  $create_orders_request->setCustomerDetails($customer_details);

  try {
      $result = $cashfree->PGCreateOrder($x_api_version, $create_orders_request);
      print_r($result);
  } catch (Exception $e) {
      echo 'Exception when calling PGCreateOrder: ', $e->getMessage(), PHP_EOL;
  }
  ```

  ```bash curl
  curl --location 'https://sandbox.cashfree.com/pg/orders' \
  --header 'X-Client-Secret: {{clientKey}}' \
  --header 'X-Client-Id: {{clientId}}' \
  --header 'x-api-version: 2023-08-01' \
  --header 'Content-Type: application/json' \
  --header 'Accept: application/json' \
  --data-raw '{
    "order_amount": 10.10,
    "order_currency": "INR",
    "customer_details": {
      "customer_id": "USER123",
      "customer_name": "joe",
      "customer_email": "joe.s@cashfree.com",
      "customer_phone": "+919876543210"
    },
    "order_meta": {
      "return_url": "https://b8af79f41056.eu.ngrok.io?order_id=order_123"
    }
  }'
    }

  }'
  ```
</CodeGroup>

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](/api-reference/payments/latest/orders/create).

### 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:

<AccordionGroup>
  <Accordion title="Web Checkout">
    In this flow, SDK provides a webview based checkout implementation to facilitate a quick integration with our payment gateway. Your customers can fill in the necessary details in the web page and complete the payment.
    This mode also handles all the business logic and UI Components to make the payment smooth and easy to use.
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    This flow is for merchants who wants to quickly provide UPI Intent functionality using cashfree's mobile SDK. In this flow, SDK provides a pre-built native Android screen to facilitate a quick integration with our payment gateway. Your customers will see a list of UPI apps installed in 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 the merchant to customize the UI in terms of color coding, fonts.
  </Accordion>
</AccordionGroup>

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

1. Create a `CFSession` object.
2. Set `payment callback`.
3. 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).

```typescript
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.

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

<Note>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.</Note>

<Tip>Always call setCallback before calling doPayment method of SDK</Tip>

```typescript
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

<AccordionGroup>
  <Accordion title="Web Checkout">
    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.

    ```typescript
    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);
        }
    }
    ```
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    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.

    ```typescript
    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);
    }
    ```
  </Accordion>
</AccordionGroup>

#### Sample Code

<AccordionGroup>
  <Accordion title="Web checkout">
    ```typescript
    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);
       }
     }
    }
    ```
  </Accordion>

  <Accordion title="UPI Intent Checkout">
    ```typescript
    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);
        }
      }
    }
    ```
  </Accordion>
</AccordionGroup>

[Github Sample](https://github.com/cashfree/react-native-cashfree-pg-sdk/blob/abedee6133ec53fb306a0e72cde6cc0be7468565/example/App.tsx)

[Sample UPI Test apk](/payments/online/mobile/misc/cashfree_upi_simulator_apk#cashfree-upi-intent-simulator-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.

<Note>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.</Note>

```javascript
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.

<CodeGroup>
  ```go golang
  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)
  }
  ```

  ```javascript javascript
  cashfree
  	.PGFetchOrder("<order_id>")
  	.then((response) => {
  		console.log("Order fetched successfully:", response.data);
  	})
  	.catch((error) => {
  		console.error("Error:", error.response.data.message);
  	});
  ```

  ```php php
  $x_api_version = "2023-08-01";
  try {
      $response = $cashfree->PGFetchOrder($x_api_version, "<order_id>");
      print_r($response);
  } catch (Exception $e) {
      echo 'Exception when calling PGFetchOrder: ', $e->getMessage(), PHP_EOL;
  }
  ```

  ```java java
  import com.cashfree.*;
  //other code

  try {
      Cashfree.XClientId = "<x-client-id>";
      Cashfree.XClientSecret = "<x-client-secret>";
      Cashfree.XEnvironment = Cashfree.SANDBOX;

      Cashfree cashfree = new Cashfree();
      String xApiVersion = "2023-08-01";

      ApiResponse<OrderEntity> responseFetchOrder = cashfree.PGFetchOrder(xApiVersion, "<order_id>", null, null, null);
      System.out.println(response.getData().getOrderId());
  } catch (ApiException e) {
      throw new RuntimeException(e);
  }
  ```

  ```python python
  from cashfree_pg.models.create_order_request import CreateOrderRequest
  from cashfree_pg.api_client import Cashfree
  from cashfree_pg.models.customer_details import CustomerDetails
  from cashfree_pg.models.order_meta import OrderMeta

  Cashfree.XClientId = "<x-client-id>"
  Cashfree.XClientSecret = "<x-client-secret>"
  Cashfree.XEnvironment = Cashfree.SANDBOX
  x_api_version = "2023-08-01"

  try:
      api_response = Cashfree().PGFetchOrder(x_api_version, "order_3242X4jQ5f0S9KYxZO9mtDL1Kx2Y7u", None)
      print(api_response.data)
  except Exception as e:
      print(e)

  ```

  ```csharp csharp
  using cashfree_pg.Client;
  using cashfree_pg.Model;

  Cashfree.XClientId = "<x-client-id>";
  Cashfree.XClientSecret = "<x-client-secret>";
  Cashfree.XEnvironment = Cashfree.SANDBOX;
  var cashfree = new Cashfree();
  var xApiVersion = "2023-08-01";

  try {
      var result = cashfree.PGFetchOrder(xApiVersion, "<order_id>>", null, null);
      Console.WriteLine(result);
      Console.WriteLine(result.StatusCode);
      Console.WriteLine((result.Content as OrderEntity));
  } catch (ApiException e) {
      Console.WriteLine("Exception when calling PGFetchOrder: " + e.Message);
      Console.WriteLine("Status Code: " + e.ErrorCode);
      Console.WriteLine(e.StackTrace);
  }
  ```

  ```bash curl
  curl --request GET \
       --url https://sandbox.cashfree.com/pg/orders/{order_id} \
       --header 'accept: application/json' \
       --header 'x-api-version: 2023-08-01'
       --header 'x-client-id: "YOUR APP ID GOES HERE"'
       --header 'x-client-secret: "YOUR SECRET KEY GOES HERE'
  ```
</CodeGroup>

### Testing

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

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

If your integration isn’t working:

### Error codes

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

<Accordion title="Error Codes">
  | 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. |    |
</Accordion>

### Other options

<AccordionGroup>
  <Accordion title="(Optional) Enable logging to debugging issues">
    If you are facing trouble while making a payment, you can take a look at the SDK **debug logs** to try and identify the issue. To enable SDK logging add the following to your **values.xml** file.

    `<integer name="cashfree_pg_logging_level">3</integer>`

    Following are the Logging levels.

    * VERBOSE = 2
    * DEBUG = 3
    * INFO = 4
    * WARN = 5
    * ERROR = 6
    * ASSERT = 7
  </Accordion>

  <Accordion title="(Optional) Disable Quick Checkout in Payment Page">
    If you want to disable quick checkout flow in Drop Payment flow you can add the following to your `values.xml` file.

    `<bool name="cf_quick_checkout_enabled">false</bool>`
  </Accordion>

  <Accordion title="(Optional) Add Custom Analytics subscriber">
    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 javascript
    CFPaymentGatewayService.setEventSubscriber({
                onReceivedEvent(eventName, map) {
                    console.log('Event recieved on screen: ' +
                        eventName +
                        ' map: ' +
                        JSON.stringify(map));
                },
    });

    componentWillUnmount() {
            CFPaymentGatewayService.removeEventSubscriber();
    }
    ```
  </Accordion>
</AccordionGroup>

<Note>This SDK is compatible with expo framework.
[Expo Sample](https://github.com/kishan-cashfree/Expo-RN_Cashfree_SDK)</Note>

<div className="callout info">
  ### 💻 Quick dev-to-dev talk

  You clearly care about building better payment experiences for your clients, here's a quick tip: Earn additional income doing exactly what you’re doing now!

  Join the [Cashfree Affiliate Partner Program](https://partner.cashfree.com/partner-ui/authentication/signup?utm_source=dev%20docs\&utm_medium=dev%20doc\&utm_campaign=signup) and get rewarded every time your clients use Cashfree.

  What’s in it for you?

  * Earn up to 0.25% commission on every transaction
  * Be more than a dev - be the trusted fintech partner for your clients
  * Get a dedicated partner manager, your go-to expert

  What’s in it for your clients?

  * Instant activation, go live in minutes.
  * Industry-best success rate across all payment modes.
  * Effortlessly accept international payments in 140+ currencies

  Ready to push to prod? 👉 [Become a Partner now](https://partner.cashfree.com/partner-ui/authentication/signup?utm_source=dev%20docs\&utm_medium=dev%20doc\&utm_campaign=signup)
</div>