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

# Web Integration

> Integrate Cashfree's prebuilt, PCI compliant hosted web checkout to accept 120+ payment methods on your site while keeping branding and UX in your control.

Cashfree’s web checkout offers merchants a secure, pre-built, and user-friendly interface that supports a wide variety of payment methods, enhancing the transaction experience for both merchants and customers.

## Key benefits

Web checkout provides the following advantages for your payment integration:

* **Simplified checkout**: Provides a pre-built, easy-to-use checkout page that delivers an optimised payment experience. It accepts payments from over 120 payment methods easily and securely.

* **Secure and PCI compliant**: Securely collects payment details and submits them directly to Cashfree servers, removing the need for Payment Card Industry Data Security Standard (PCI DSS) compliance requirements at the merchant’s end.

* **Personalised**: Customise your payment methods, branding, and various other elements to align seamlessly with your company's specific theme.

## 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/merchants/pg/developers/api-keys) and generate an **App ID** and **Secret Key**. Learn how to [generate API keys](/api-reference/authentication#generate-api-keys).
* Whitelist your website domain for integration. Learn more about [domain whitelisting](/payments/online/go-live/whitelist).

The web checkout integration consists of three essential steps:

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

  <Card title="Step 2" icon="desktop" href="/payments/online/web/redirect#step-2:-open-the-checkout-page-client-side">
    Open the checkout page
  </Card>

  <Card title="Step 3" icon="circle-check" href="/payments/online/web/redirect#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:

<div class="hidden mb-4" data-table-of-contents="top">
  <iframe height="150" width="100%" class="shadow-2xl rounded-md" src="https://www.youtube.com/embed/T2-u92DetqU?si=U20hGR8CW0gkPaId&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

  <a href="https://www.cashfree.com/devstudio/#cf-checkout" target="_blank" class="inline-flex items-center justify-center mt-4 p-4 w-full text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
    <span class="flex items-center gap-2">
      Try it in DevStudio

      <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 4H20M20 4V10M20 4L12 12" stroke="#33363F" stroke-width="2" />

        <path d="M11 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
      </svg>
    </span>
  </a>
</div>

## 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 cannot call this API from the client-side.

<Note>Create orders through your backend as this API requires your secret key. Do not call it directly from the client-side.</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 checkout page <Badge color="orange">Client-side</Badge>

<Warning>
  You must [whitelist your domain](/payments/online/go-live/whitelist) with Cashfree before you start this step.
</Warning>

### 1. Include JS SDK in your client code

Include our JavaScript SDK in your client-side code to integrate the Cashfree checkout.

<CodeGroup>
  ```javascript CDN theme={"dark"}
  <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
  ```

  ```javascript NPM theme={"dark"}
  npm install @cashfreepayments/cashfree-js
  ```
</CodeGroup>

### 2. Initialise the SDK

Initialise the SDK using the `Cashfree()` function. You can use one of two modes:

* `sandbox`: Use this for a test environment.
* `production`: Use this for your live environment.

<CodeGroup>
  ```javascript CDN theme={"dark"}
  const cashfree = Cashfree({
      mode:"sandbox" //or production
  });
  ```

  ```javascript NPM theme={"dark"}
  const cashfree = await load({
  	mode: "sandbox" //or production
  });
  //This load function returns a Promise that resolves with a newly created Cashfree object once Cashfree.js has loaded. If you call load in a server environment it will resolve to null.
  ```
</CodeGroup>

### 3. Open Cashfree checkout

Use the `cashfree.checkout()` method to open the checkout page. Use the following parameters with this method:

* `paymentSessionId`: The ID you receive from the create order response.
* `redirectTarget` (optional): This parameter determines how the checkout page opens. Use one of the following values:

| Property value    | Description                                                     |
| ----------------- | --------------------------------------------------------------- |
| `_self` (default) | Opens the payment link in the same frame as it was clicked.     |
| `_blank`          | Opens the payment link in a new window or tab.                  |
| `_top`            | Opens the linked document in the full body of the window.       |
| `_modal`          | Opens the payment link in a pop-up window on the current page.  |
| DOM element       | Opens the payment link directly within a specified DOM element. |

### Checkout variants

Cashfree supports the following checkout variants:

* **Redirect checkout**: Use for `redirectTarget` values `_self`, `_blank`, or `_top`.
* **Popup checkout**: Use for `redirectTarget` value `_modal`.
* **Inline checkout**: Use for `redirectTarget` as a DOM element.

<Note>
  The integration approach varies for pop-up and inline checkout. You must manage the promise that `cashfree.checkout()` returns to execute additional code after the payment attempt.
</Note>

<CodeGroup>
  ```javascript Redirect - javascript {14,15,16,17,18,19,20,21,22,23,24,25} theme={"dark"}
  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Cashfree Checkout Integration</title>
          <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
      </head>
      <body>
          <div class="row">
              <p>Click below to open the checkout page in the current tab</p>
              <button id="renderBtn">Pay Now</button>
          </div>
          <script>
              const cashfree = Cashfree({
                  mode: "production",
              });
              document.getElementById("renderBtn").addEventListener("click", () => {
                  let checkoutOptions = {
                      paymentSessionId: "your-payment-session-id",
                      redirectTarget: "_self",
                  };
                  cashfree.checkout(checkoutOptions);
              });
          </script>
      </body>
  </html>
  ```

  ```javascript Redirect - React {4,5,6,7,8,9,10,11,12,13,14,15,16,17,18} theme={"dark"}
  import { load } from "@cashfreepayments/cashfree-js";

  function Checkout() {
    let cashfree;
    var initializeSDK = async function () {
      cashfree = await load({
        mode: "production",
      });
    };
    initializeSDK();

    const doPayment = async () => {
      let checkoutOptions = {
        paymentSessionId: "your-payment-session-id",
        redirectTarget: "_self",
      };
      cashfree.checkout(checkoutOptions);
    };

    return (
      <div class="row">
        <p>Click below to open the checkout page in the current tab</p>
        <button type="submit" class="btn btn-primary" id="renderBtn" onClick={doPayment}>
          Pay Now
        </button>
      </div>
    );
  }
  export default Checkout;
  ```

  ```javascript Popup - JavaScript {15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41} theme={"dark"}
  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Cashfree Checkout Integration</title>
          <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
      </head>
      <body>
          <div class="row">
              <p>Click below to open the checkout page in a pop-up </p>
              <button id="renderBtn">Pay Now</button>
          </div>
          <script>
              const cashfree = Cashfree({
                  mode: "production",
              });
              document.getElementById("renderBtn").addEventListener("click", () => {
                  let checkoutOptions = {
                      paymentSessionId: "your-payment-session-id",
                      redirectTarget: "_modal",
                  };
                  cashfree.checkout(checkoutOptions).then((result) => {
                      if(result.error){
                          // This will be true whenever the user clicks on the close icon inside the modal or any error happens during the payment
                          console.log("User has closed the popup or there is some payment error, Check for Payment Status");
                          console.log(result.error);
                      }
                      if(result.redirect){
                          // This will be true when the payment redirection page can't be opened in the same window
                          // This is an exceptional case only when the page is opened inside an inAppBrowser
                          // In this case the customer will be redirected to the return URL once payment is completed
                          console.log("Payment will be redirected");
                      }
                      if(result.paymentDetails){
                          // This will be called whenever the payment is completed irrespective of transaction status
                          console.log("Payment has been completed, Check for Payment Status");
                          console.log(result.paymentDetails.paymentMessage);
                      }
                  });
              });
          </script>
      </body>
  </html>
  ```

  ```javascript Popup - React {4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35} theme={"dark"}
  import { load } from "@cashfreepayments/cashfree-js";

  function Checkout() {
    let cashfree;
    var initializeSDK = async function () {
      cashfree = await load({
        mode: "production",
      });
    };
    initializeSDK();

    const doPayment = async () => {
      let checkoutOptions = {
        paymentSessionId: "your-payment-session-id",
        redirectTarget: "_modal",
      };
      cashfree.checkout(checkoutOptions).then((result) => {
        if (result.error) {
          // This will be true whenever the user clicks on the close icon inside the modal or any error happens during the payment
          console.log("User has closed the popup or there is some payment error, Check for Payment Status");
          console.log(result.error);
        }
        if (result.redirect) {
          // This will be true when the payment redirection page can't be opened in the same window
          // This is an exceptional case only when the page is opened inside an inAppBrowser
          // In this case the customer will be redirected to the return URL once payment is completed
          console.log("Payment will be redirected");
        }
        if (result.paymentDetails) {
          // This will be called whenever the payment is completed irrespective of transaction status
          console.log("Payment has been completed, Check for Payment Status");
          console.log(result.paymentDetails.paymentMessage);
        }
      });
    };

    return (
      <div class="row">
        <p>Click below to open the checkout page in a pop-up </p>
        <button type="submit" class="btn btn-primary" id="renderBtn" onClick={doPayment}>
          Pay Now
        </button>
      </div>
    );
  }
  export default Checkout;
  ```

  ```javascript Inline - Javascript {16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46} theme={"dark"}
  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Cashfree Checkout Integration</title>
          <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
      </head>
      <body>
          <div class="row">
              <p>Click below to open the checkout page here</p>
              <button id="renderBtn">Pay Now</button>
              <div id="cf_checkout"></div>
          </div>
          <script>
              const cashfree = Cashfree({
                  mode: "production",
              });
              document.getElementById("renderBtn").addEventListener("click", () => {
                  let checkoutOptions = {
                      paymentSessionId: "your-payment-session-id",
                      redirectTarget: document.getElementById("cf_checkout"),
                      appearance: {
                          width: "425px",
                          height: "700px",
                      },
                  };
                  cashfree.checkout(checkoutOptions).then((result) => {
                      if(result.error){
                          // This will be true when there is any error during the payment
                          console.log("There is some payment error, Check for Payment Status");
                          console.log(result.error);
                      }
                      if(result.redirect){
                          // This will be true when the payment redirection page can't be opened in the same window
                          // This is an exceptional case only when the page is opened inside an inAppBrowser
                          // In this case the customer will be redirected to the return URL once payment is completed
                          console.log("Payment will be redirected");
                      }
                      if(result.paymentDetails){
                          // This will be called whenever the payment is completed irrespective of transaction status
                          console.log("Payment has been completed, Check for Payment Status");
                          console.log(result.paymentDetails.paymentMessage);
                      }
                  });
              });
          </script>
      </body>
  </html>
  ```

  ```javascript Inline - React {4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39} theme={"dark"}
  import { load } from "@cashfreepayments/cashfree-js";

  function Checkout() {
      let cashfree;
      var initializeSDK = async function () {          
          cashfree = await load({
              mode: "production"
          });
      }
      initializeSDK();

      const doPayment = async () => {
          let checkoutOptions = {
              paymentSessionId: "your-payment-session-id",
              redirectTarget: document.getElementById("cf_checkout"),
              appearance: {
                  width: "425px",
                  height: "700px",
              },
          };
          cashfree.checkout(checkoutOptions).then((result) => {
              if(result.error){
                  // This will be true when there is any error during the payment
                  console.log("There is some payment error, Check for Payment Status");
                  console.log(result.error);
              }
              if(result.redirect){
                  // This will be true when the payment redirection page can't be opened in the same window
                  // This is an exceptional case only when the page is opened inside an inAppBrowser
                  // In this case the customer will be redirected to the return URL once payment is completed
                  console.log("Payment will be redirected");
              }
              if(result.paymentDetails){
                  // This will be called whenever the payment is completed irrespective of transaction status
                  console.log("Payment has been completed, Check for Payment Status");
                  console.log(result.paymentDetails.paymentMessage);
              }
          });
      };

      return (
          <div class="row">
              <p>Click below to open the checkout page here</p>
              <button type="submit" class="btn btn-primary" id="renderBtn" onClick={doPayment}>
                  Pay Now
              </button>
              <div id="cf_checkout"></div>
          </div>
      );
  }
  export default Checkout;
  ```
</CodeGroup>

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

After the customer completes the payment, you must confirm the payment status.

### Redirect checkout

When the payment process finishes, the user redirects to the return URL you provided when you created the order (Step 1). If you do not provide a return URL, customers redirect to a default Cashfree page.

<Note>
  We recommend that you provide a return URL while creating an order. This will improve the overall user experience by ensuring your customers don’t land on
  broken or duplicated pages. Also, remember to add context of the order in your return URL so that you can identify the order once the customer has returned to
  this URL.
</Note>

### Popup and inline checkout

When the payment process finishes, the `cashfree.checkout()` function returns a promise. You must handle this promise to process the payment response.

### Order status verification

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>

<Note>
  Always verify the order status before you deliver services to the customer. You can use the [Get Order API](/api-reference/payments/latest/orders/get) for this. An order is successful when the `order_status` is `PAID`.
</Note>

## Testing

After you integrate the checkout button, verify that it opens the Cashfree-hosted payment page. If the integration does not work, follow these steps to troubleshoot:

1. Open the **Network** tab in your browser developer tools.
2. Click the pay button and check the console logs.
3. Ensure you pass the correct environment and `payment_session_id`.
4. Use `console.log()` in your button click listener to confirm that you pass data correctly.

<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/latest/orders/get">Get Order API</a></li>
    <li><a href="/docs/payments/online/go-live/whitelist">Domain Whitelisting</a></li>
    <li><a href="/docs/api-reference/payments/sdk#payment-sdk">Payment SDKs</a></li>
  </ul>
</div>