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

# Flutter Integration

> Use the Cashfree Payment Gateway Flutter SDK to embed a WebView-based checkout in your Flutter app, supporting payments on both Android and iOS targets.

Cashfree's Flutter SDK provides a streamlined payment solution that integrates the payment gateway into your Flutter applications through a WebView-based checkout implementation, supporting both Android and iOS platforms.

## Key benefits

The Flutter SDK offers the following advantages for your payment integration:

* **Simplified integration**: Provides a pre-built SDK that delivers an optimised payment experience for Flutter applications.

* **Cross-platform support**: Seamlessly supports Android (SDK version 19+) and iOS (deployment target 11+) platforms.

* **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 do not meet the required integrity standards may be restricted from using production services.

The Flutter integration consists of three essential steps:

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

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

  <Card title="Step 3" icon="circle-check" href="/payments/online/mobile/flutter#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/J1fIqjgiMeY?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/preview/pg/mobile/hybrid" 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 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>

Web Checkout is a streamlined payment solution that integrates Cashfree's payment gateway into your Flutter app through the SDK. This implementation uses a WebView to provide a secure, feature-rich payment experience.

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.

### 1. Set up the SDK

The Flutter SDK is hosted on [pub.dev](https://pub.dev/). You can get the SDK [2.4.0+52](https://pub.dev/packages/flutter_cashfree_pg_sdk). The Flutter SDK supports Android SDK version 19 and above and iOS minimum deployment target of 11 and above.

Open your project's `pubspec.yaml` and add the following under dependencies:

```yaml theme={"dark"}
flutter_cashfree_pg_sdk: 2.4.0+52
```

#### iOS configuration

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

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

### 2. Complete the payment

To complete the payment, follow these steps:

1. Create a CFSession object.
2. Create a Web Checkout Payment object.
3. Set payment callback.
4. Initiate the payment using the payment object created.

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

```dart theme={"dark"}
try {
    var session = CFSessionBuilder().setEnvironment(environment).setOrderId(orderId).setPaymentSessionId(paymentSessionId).build();
    return session;
} on CFException catch (e) {
    print(e.message);
}
```

#### Create a web checkout payment object

Use `CFWebCheckoutPaymentBuilder` to create the payment object. This object accepts a `CFSession`, like the one created in the previous step.

```dart theme={"dark"}
var cfWebCheckout = CFWebCheckoutPaymentBuilder()
  .setSession(session!)
  .build();
```

#### Set up the callback

You need to set up callback handlers to handle events after payment processing.

```dart theme={"dark"}
void verifyPayment(String orderId) {
    print("Verify Payment");
  }

  void onError(CFErrorResponse errorResponse, String orderId) {
    print(errorResponse.getMessage());
    print("Error while making payment");
  }

var cfPaymentGatewayService = CFPaymentGatewayService();

  @override
  void initState() {
    super.initState();
    cfPaymentGatewayService.setCallback(verifyPayment, onError);
}
```

#### Sample code

```dart theme={"dark"}
class _MyAppState extends State<MyApp> {

  var cfPaymentGatewayService = CFPaymentGatewayService();

  @override
  void initState() {
    super.initState();
    cfPaymentGatewayService.setCallback(verifyPayment, onError);
  }

  void verifyPayment(String orderId) {
    print("Verify Payment");
  }

  void onError(CFErrorResponse errorResponse, String orderId) {
    print(errorResponse.getMessage());
    print("Error while making payment");
  }

  webCheckout() async {
    try {
      var session = createSession();
      var cfWebCheckout = CFWebCheckoutPaymentBuilder().setSession(session!).build();
      cfPaymentGatewayService.doPayment(cfWebCheckout);
    } on CFException catch (e) {
      print(e.message);
    }

  }

  CFSession? createSession() {
    try {
      var session = CFSessionBuilder().setEnvironment(environment).setOrderId(orderId).setPaymentSessionId(paymentSessionId).build();
      return session;
    } on CFException catch (e) {
      print(e.message);
    }
    return null;
  }
}
```

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

After the customer completes the payment, you must confirm the payment status. Once the payment finishes, the user redirects back to your activity.

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

You should now have a working checkout button that redirects your customer to Cashfree payment page. If your integration isn’t working:

1. Open the Network tab in your browser’s developer tools.
2. Click the button and check the console logs.
3. Use `console.log(session)` inside your button click listener to confirm the correct error returned.

## Error codes

To confirm the error returned in your 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.                                                                                                                         |
  | CARD\_EMI\_TENURE\_MISSING     | The "emi\_tenure" is missing or invalid (It has to be greater than 0).                                                                                             |
  | INVALID\_UPI\_APP\_ID\_SENT    | The id sent is invalid. The value has to be one of the following: "tez://","phonepe://","paytm://","bhim://. Please refer the note in CFUPI class for more details |
  | INVALID\_PAYMENT\_OBJECT\_SENT | The payment object that is set does not match any payment mode. Please set the correct payment mode and try again.                                                 |
  | WALLET\_OBJECT\_MISSING        | The CFWallet object is missing in the request                                                                                                                      |
  | NETBANKING\_OBJECT\_MISSING    | The CFNetbanking object is missing in the request.                                                                                                                 |
  | UPI\_OBJECT\_MISSING           | The CFUPI object is missing in the request.                                                                                                                        |
  | CARD\_OBJECT\_MISSING          | The CFCard object is missing in the request.                                                                                                                       |
  | INVALID\_WEB\_DATA             | The url seems to be corrupt. Please reinstantiate the order.                                                                                                       |
  | 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.                                                                                                                      |
  | CHANNEL\_MISSING               | The "channel" is missing in the request.                                                                                                                           |
  | CARD\_NUMBER\_MISSING          | The "card\_number" is missing in the request.                                                                                                                      |
  | CARD\_EXPIRY\_MONTH\_MISSING   | The "card\_expiry\_mm" is missing in the request.                                                                                                                  |
  | CARD\_EXPIRY\_YEAR\_MISSING    | The "card\_expiry\_yy" is missing in the request.                                                                                                                  |
  | CARD\_CVV\_MISSING             | The "card\_cvv" is missing in the request.                                                                                                                         |
  | UPI\_ID\_MISSING               | The "upi\_id" is missing in the request                                                                                                                            |
  | WALLET\_CHANNEL\_MISSING       | The "channel" is missing in the wallet payment request                                                                                                             |
  | WALLET\_PHONE\_MISSING         | The "phone number" is missing in the wallet payment request                                                                                                        |
  | NB\_BANK\_CODE\_MISSING        | The "bank\_code" 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/latest/orders/get">Get Order API</a></li>
    <li><a href="/docs/payments/online/mobile/misc/cashfree_integrity">Cashfree Integrity</a></li>
    <li><a href="https://pub.dev/packages/flutter_cashfree_pg_sdk" target="_blank">Flutter SDK on pub.dev</a></li>
  </ul>
</div>