---
page_title: 4. Rendering the Checkout Screen
product: EC Headless
platform: Flutter
page_source: https://juspay.io/in/docs/ec-headless/flutter/base-sdk-integration/rendering-the-checkout-screen
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/ec-headless/llms.txt
---


## 4. Rendering the Checkout Screen



Once the checkout page is opened, your users can proceed with the transactions. Rendering the checkout page requires multiple `process` SDK calls from the merchant application.


### Step 4.1. Process Payloads


Each process SDK call takes a specific JSON Object as argument. This argument is also known as process payload. Sample payloads for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_  on the [payload samples](https://docs.juspay.in/ec-headless/flutter/payloads/displaying-payment-options) page.



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
await widget.hyperSDK.process(processPayload, hyperSDKCallbackHandler);
```



### Step 4.2. Process SDK Calls for Rendering Checkout Page


Rendering the checkout page requires the following process SDK calls from the merchant application -

1. Get Payment Methods
2. Card - List Saved
3. UPI - Get Available Apps
4. Wallet - Refresh All
5. Eligibility - Wallets
6. Is Device Ready

> **Warning**
> * All these process SDK calls can be made in parallel
> * Process SDK call is to be made on the same instance of HyperService using which initiate API was triggered. It should not be called on an HyperSDK instance which has not been initiated.






### Step 4.3. Consume SDK Response


Parse and consume the SDK response for the process SDK calls listed in step 4.2. The SDK responds with the following respectively -

1. Available Payment methods
2. User Stored Cards
3. List of Active UPI Apps
4. Updated Wallet Balances
5. Eligible Paylater/Postpaid wallets
6. Eligibility for in-app flow in PhonePe & GooglePay

Sample response for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_  on the [payload samples](https://docs.juspay.in/ec-headless/flutter/payloads/displaying-payment-options) page.



---

## Complete Code Reference

The following code files are referenced in the steps above:

### payment_page.dart

```
{
  // Overriding onBackPressed to handle hardware backpress
  // block:start:onBackPressed

    onWillPop: () async {
      if (Platform.isAndroid) {
        var backpressResult = await widget.hyperSDK.onBackPress();

        if (backpressResult.toLowerCase() == "true") {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    }
    // block:end:onBackPressed


  // Calling process on hyperSDK to open the checkout screen
  // block:start:process-sdk

  await widget.hyperSDK.process(processPayload, hyperSDKCallbackHandler);
  // block:end:process-sdk
}

// Define handler for callbacks from hyperSDK
// block:start:callback-handler

void hyperSDKCallbackHandler(MethodCall methodCall) {
  switch (methodCall.method) {
    case "hide_loader":
      setState(() {
        showLoader = false;
      });
      break;
    case "process_result":
      var args = {};

      try {
        args = json.decode(methodCall.arguments);
      } catch (e) {
        print(e);
      }

      var error = args["error"] ?? false;

      var innerPayload = args["payload"] ?? {};

      var status = innerPayload["status"] ?? " ";
      var pi = innerPayload["paymentInstrument"] ?? " ";
      var pig = innerPayload["paymentInstrumentGroup"] ?? " ";

      if (!error) {
        switch (status) {
          case "charged":
            {
              // block:start:check-order-status
              // Successful Transaction
              // check order status via S2S API
              // block:end:check-order-status
              setState(() {
                paymentSuccess = true;
                paymentFailed = false;
              });
            }
            break;
          case "cod_initiated":
            {
              // User opted for cash on delivery option displayed on the checkout screen
            }
            break;
        }
      } else {
        var errorCode = args["errorCode"] ?? " ";
        var errorMessage = args["errorMessage"] ?? " ";
        switch (status) {
          case "backpressed":
            {
              // user back-pressed from PP without initiating any txn
              setState(() {
                paymentFailed = true;
                paymentSuccess = false;
              });
            }
            break;
          case "user_aborted":
            {
              // user initiated a txn and pressed back
              // check order status via S2S API
            }
            break;
          case "pending_vbv":
            {}
            break;
          case "authorizing":
            {
              // txn in pending state
              // check order status via S2S API
            }
            break;
          case "authorization_failed":
            {}
            break;
          case "authentication_failed":
            {}
            break;
          case "api_failure":
            {
              // txn failed
              // check order status via S2S API
            }
            break;
          case "new":
            {
              // order created but txn failed
              // check order status via S2S API
            }
            break;
        }
      }
  }
}
// block:end:callback-handler

```


---

## See Also

- [3. Initialize SDK](https://juspay.io/in/docs/ec-headless/flutter/base-sdk-integration/initiating-sdk)
- [5. Making a Payment](https://juspay.io/in/docs/ec-headless/flutter/base-sdk-integration/making-a-payment)