---
page_source: https://juspay.io/sea/docs/express-checkout-sdk-global/react-native/base-sdk-integration/rendering-the-checkout-screen
page_title: Rendering the Checkout Screen
---


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

Each process SDK call takes a specific JSON Object as argument. This argument is also known as process payload.

> **Note**
> * All the below process SDK calls(mentioned in step 4.1 and 4.2) 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.1. Process Payloads


[List payment methods process SDK](https://juspay.io/sea/docs/express-checkout-sdk-global/android/base-sdk-integration/1-list-payment-methods) call provides a list of all the payment methods available for your account, allowing you to display the available payment options on the payment page.

> **Warning**
> If a static list of payment methods is maintained to display on the payment page, and those payment methods are not enabled on Juspay’s dashboard, the transaction will fail at Juspay’s end without being initiated to the underlying gateways or processors.






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


During the checkout page rendering, saved cards and linked wallets must be displayed. To retrieve this information, the respective [process SDK calls](https://juspay.io/sea/docs/express-checkout-sdk-global/react-native/base-sdk-integration/2-retrieving-info-on-payment-options) (based on the integrated payment methods) need to be made.


| Process Call | Purpose |
|---|---|
| Card - List Saved | List the cards stored for a user |
| Card - Info | Fetch the card details on the bin input |




## Sample Code Snippets:
### Step 4.2: Process SDK Calls for Rendering Checkout Page:

#### Process Call Code Snippet:

```process call
if (hyperInstance.isInitialised()){
    hyperInstance.process(processPayload);
}
```

### Sample Payloads:

#### Get Payment Methods:
```plaintext
                    {
  "requestId": "6fd3bb9a-4583-42f5-a16c-71109906e1f3",
  "service": "in.juspay.hyperapi",
  "payload": {
    "action": "getPaymentMethods"
  }
}
```

#### Cards - List Saved:
```plaintext
                    {
  "requestId": "6fd3bb9a-4583-42f5-a16c-71109906e1f3",
  "service": "in.juspay.hyperapi",
  "payload": {
    "action": "cardList",
    "clientAuthToken": "tkn_0e37edc631d647fdb606ab48ccfc4213"
  }
}
```

#### UPI - Get Available Apps:
```plaintext
                    {
  "requestId": "6fd3bb9a-4583-42f5-a16c-71109906e1f3",
  "service": "in.juspay.hyperapi",
  "payload": {
    "action": "upiTxn",
    "getAvailableApps": true,
    "showLoader": true
  }
}
```

#### Wallets - Refresh All:
```plaintext
{
    "requestId": "6fd3bb9a-4583-42f5-a16c-71109906e1f3",
    "service": "in.juspay.hyperapi",
    "payload": {
        "action": "refreshWalletBalances",
        "clientAuthToken": "tkn_0e37edc631d647fdb606ab48ccfc4213",
        "showLoader": true
    }
}
```

#### Wallets - Eligibility:
```plaintext
{
    "requestId": "7b6b21a3-0148-4188-98de-eb2ff3f862f5",
    "service": "in.juspay.hyperapi",
    "payload": {
        "action": "eligibility",
        "amount": "1.00",
        "data": {
            "wallets": [
                {
                    "customerId": "test_customer",
                    "mobile": "7338513562",
                    "checkType": [
                        "simpl"
                    ]
                }
            ],
            "cards": []
        },
        "clientAuthToken": "tkn_0e37edc631d647fdb606ab48ccfc4213",
        "showLoader": true
    }
}
```

#### isDeviceready:
```plaintext
{
    "requestId": "7b6b21a3-0148-4188-98de-eb2ff3f862f5",
    "service": "in.juspay.hyperapi",
    "payload": {
        "action": "isDeviceReady",
        "sdkPresent": "ANDROID_GOOGLEPAY"
    }
}
```