> ## Documentation Index
> Fetch the complete documentation index at: https://telr-docs.cashfree.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Integration

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

## Payment Gateway React Native Guide

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

### Setting Up SDK

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

```shell theme={null}
npm install react-native-cashfree-pg-sdk
```

##### iOS

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

```shell theme={null}
<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 theme={null}
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. Telr offers backend SDKs to simplify the integration process.

You can find the SDKs [here](/api-reference/payments/sdk#payment-sdk).

<CodeGroup>
  ```javascript javascript theme={null}
  import { Cashfree } from "cashfree-pg";

  Cashfree.XClientId = {Client ID};
  Cashfree.XClientSecret = {Client Secret Key};
  Cashfree.XEnvironment = Cashfree.Environment.PRODUCTION;

  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("2023-08-01", request).then((response) => {
      var a = response.data;
      console.log(a)
    })
      .catch((error) => {
        console.error('Error setting up order request:', error.response.data);
      });
  }
  ```

  ```python python theme={null}
  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 theme={null}
  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 theme={null}
  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 theme={null}
  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 theme={null}
  \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 theme={null}
  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 theme={null}
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 theme={null}
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 theme={null}
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 Telr checkout screen. This will present the user with the payment options and handle the payment process.

    ```typescript theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
    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 theme={null}
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 theme={null}
  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 theme={null}
  let version = "2023-08-01"
  Telr.PGFetchOrder(version, "<order_id>").then((response) => {
      console.log('Order fetched successfully:', response.data);
  }).catch((error) => {
      console.error('Error:', error.response.data.message);
  });

  ```

  ```php php theme={null}
  $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 theme={null}
  import com.cashfree.*;
  //other code

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

      Telr cashfree = new Telr();
      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 theme={null}
  from cashfree_pg.models.create_order_request import CreateOrderRequest
  from cashfree_pg.api_client import Telr
  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 = Telr.SANDBOX
  x_api_version = "2023-08-01"

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

  ```

  ```csharp csharp theme={null}
  using cashfree_pg.Client;
  using cashfree_pg.Model;

  Cashfree.XClientId = "<x-client-id>";
  Cashfree.XClientSecret = "<x-client-secret>";
  Cashfree.XEnvironment = Telr.SANDBOX;
  var cashfree = new Telr();
  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 theme={null}
  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 Telr Checkout.

1. Click the checkout button.
2. You’re redirected to the Telr 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 theme={null}
    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 not compatible with expo framework.
[Open issues](https://github.com/cashfree/react-native-cashfree-pg-sdk/issues)</Note>