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

# React Native Integration

> Integrate the Cashfree Payment Gateway React Native SDK to add web checkout and UPI Intent payment flows to your React Native iOS and Android apps.

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](https://merchant.cashfree.com/merchants/signup).
* Log in to the [Merchant Dashboard](https://merchant.cashfree.com/auth/login) and generate an **App ID** and **Secret Key**. Learn how to [generate API keys](/api-reference/authentication#generate-api-keys).
* Ensure your application complies with Cashfree's [Integrity standards](/payments/online/mobile/misc/cashfree_integrity). 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:

<CardGroup cols={3}>
  <Card title="Step 1" icon="money-bill-wave" href="/payments/online/mobile/react-native#step-1-create-an-order-server-side">
    Create an order
  </Card>

  <Card title="Step 2" icon="desktop" href="/payments/online/mobile/react-native#step-2-open-the-payment-page-client-side">
    Open the payment page
  </Card>

  <Card title="Step 3" icon="circle-check" href="/payments/online/mobile/react-native#step-3-confirm-the-payment-server-side">
    Confirm the payment
  </Card>
</CardGroup>

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

## Step 1: Create an order <Badge color="green">Server-side</Badge>

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.

<Note>Create orders through your server as this API requires your secret key. Don't call it directly from your mobile application.</Note>

##### API request for creating an order

Here's a sample request for creating an order using your desired backend language. Cashfree offers backend [SDKs](/api-reference/payments/sdk#payment-sdk) to simplify the integration process.

<CodeGroup>
  ```javascript javascript theme={"dark"}
  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 theme={"dark"}
  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={"dark"}
  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={"dark"}
  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={"dark"}
  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={"dark"}
  \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={"dark"}
  curl --location 'https://sandbox.cashfree.com/pg/orders' \
  --header 'X-Client-Secret: {{clientKey}}' \
  --header 'X-Client-Id: {{clientId}}' \
  --header 'x-api-version: 2025-01-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: Open the payment page <Badge color="orange">Client-side</Badge>

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](https://www.npmjs.com/). You can [download the latest SDK version 2.4.0 from npm](https://www.npmjs.com/package/react-native-cashfree-pg-sdk). 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:

<CodeGroup>
  ```npm npm theme={"dark"}
  npm install react-native-cashfree-pg-sdk
  ```

  ```yarn yarn theme={"dark"}
  yarn add react-native-cashfree-pg-sdk
  ```

  ```expo expo theme={"dark"}
  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 configuration

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

```shell theme={"dark"}
<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>
  <string>simplypayupi</string>
  <string>whatsapp</string>
</array>
```

For iOS, run the following commands:

```bash theme={"dark"}
cd ios
pod install --repo-update
```

### 2. Select a payment flow

The React Native SDK offers the following payment flows:

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

  <Accordion title="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 colour coding and fonts.
  </Accordion>
</AccordionGroup>

### 3. Complete the payment

To complete the payment, follow these steps:

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

```typescript theme={"dark"}
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:

```typescript theme={"dark"}
onVerify(orderID: string)
onError(error: CFErrorResponse, orderID: string)
```

<Tip>Set the callback at componentDidMount and remove the callback at componentWillUnmount, as this also handles the activity restart cases and prevents memory leaks.</Tip>

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

```typescript theme={"dark"}
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">
    Use `doWebPayment()` to open the Cashfree checkout screen. This will present the user with the payment options and handle the payment process.

    ```typescript theme={"dark"}
    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);
        }
    }
    ```
  </Accordion>

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

    ```typescript theme={"dark"}
    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

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

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

  <Accordion title="UPI Intent Checkout">
    ```typescript theme={"dark"}
    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>

#### Sample GitHub code

You can explore a working integration example on GitHub:

[GitHub Sample](https://github.com/cashfree/react-native-cashfree-pg-sdk/blob/427286cc024c473f6c18ec4107d4071b12b3dcf5/example/src/App.tsx#L230)

[Sample UPI Test apk](/payments/online/mobile/misc/cashfree_upi_simulator_apk#cashfree-upi-intent-simulator-apk)

<Note>This SDK is compatible with the Expo framework. For a sample implementation, see the [Expo Sample](https://github.com/kishan-cashfree/Expo-RN_Cashfree_SDK) on GitHub.</Note>

## Step 3: Confirm the payment <Badge color="green">Server-side</Badge>

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.

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

```javascript theme={"dark"}
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={"dark"}
  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={"dark"}
  cashfree
  	.PGFetchOrder("<order_id>")
  	.then((response) => {
  		console.log("Order fetched successfully:", response.data);
  	})
  	.catch((error) => {
  		console.error("Error:", error.response.data.message);
  	});
  ```

  ```php php theme={"dark"}
  $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={"dark"}
  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 theme={"dark"}
  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 theme={"dark"}
  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 theme={"dark"}
  curl --request GET \
       --url https://sandbox.cashfree.com/pg/orders/{order_id} \
       --header 'accept: application/json' \
       --header 'x-api-version: 2025-01-01'
       --header 'x-client-id: "YOUR APP ID GOES HERE"'
       --header 'x-client-secret: "YOUR SECRET KEY GOES HERE'
  ```
</CodeGroup>

## Testing

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

1. Click the checkout button.
2. 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.

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

<div
  className="callout info"
  style={{
backgroundColor: 'light-dark(#f9f7fd, #2d1b4e)',
borderColor: 'light-dark(#cdbaef, #6930ca)',
color: 'light-dark(#000000, #ffffff)'
}}
>
  <p style={{fontSize: '1.3em', fontWeight: '500', marginBottom: '16px'}}>Affiliate partner program</p>

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

  <p>Join the <a href="https://partner.cashfree.com/partner-ui/authentication/signup?source-action=Affiliate%20Program%20LP&action=Sign%20Up&button-id=StartNow_CashfreeAffiliatePartnerProgram">Cashfree affiliate partner program</a> and get rewarded every time your clients use Cashfree.</p>

  <p>**What you get:**</p>

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

  <p>**What your clients get:**</p>

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

  <p>Get started today. <a href="https://partner.cashfree.com/partner-ui/authentication/signup?source-action=Affiliate%20Program%20LP&action=Sign%20Up&button-id=StartNow_BecomeAPartner">Become a partner now</a>.</p>
</div>

<snippet>snippets/related-topics-loader.mdx</snippet>

<div class="hidden" data-table-of-contents="bottom">
  <p class="mt-4 font-medium flex items-center gap-2 related-docs-heading">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="w-4 h-4">
      <path d="M3 4h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3z" />

      <path d="M21 4h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z" />
    </svg>

    <span>Related topics</span>
  </p>

  <ul>
    <li><a href="/docs/api-reference/payments/latest/orders/create">Create Order API</a></li>
    <li><a href="/docs/api-reference/payments/sdk#payment-sdk">Payment SDKs</a></li>
    <li><a href="/docs/payments/online/mobile/misc/cashfree_upi_simulator_apk">UPI Intent Simulator APK</a></li>
  </ul>
</div>