---
page_title: 4. Rendering the Checkout Screen
product: EC Headless
platform: Android
page_source: https://juspay.io/in/docs/ec-headless/android/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
In order to render the payment methods on the checkout screen, merchant app needs to make multiple `process` SDK calls(as mentioned in `Step 4.2`). Once the checkout screen is rendered users can proceed with the transactions.
### Step 4.1. Process Payloads
Each process SDK call takes a specific JSON Object as argument. This is known as the process payload. Sample payloads for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_ on the [payload samples](https://juspay.io/in/docs/ec-headless/android/payloads/display-payment-options) page.
#### Code Snippets: -
#### Java Code Snippet:
```java
if (hyperInstance.isInitialised()){
hyperInstance.process(processPayload);
}
```
### Step 4.2 Process SDK Calls for rendering Checkout Page
Based on the required payment methods, rendering the checkout page requires the following process SDK calls from the merchant application
| Process Call | Purpose |
|---|---|
| Get Payment Methods | List all the available payment methods |
| Card - List Saved | List the cards stored for a user |
| UPI - Get Available Apps | List of Active UPI Apps |
| Wallet - Refresh All | Fetch latest balance for linked wallets |
| Eligibility - Wallets | Fetch Eligible BNPL/Consumer Finance options |
| Is Device Ready | Check eligibility for PhonePe and GooglePay in-App Flow |
On the [payload samples](https://juspay.io/in/docs/ec-headless/android/payloads/display-payment-options) page, sample request and response for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_
> **Note**
> * 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.
---
## Complete Code Reference
The following code files are referenced in the steps above:
### CheckoutActivity.java
```
{
//block:start:process-sdk-call
if (hyperInstance.isInitialised()){
hyperInstance.process(processPayload);
}
//block:end:process-sdk-call
// block:start:create-hyper-callback
private HyperPaymentsCallbackAdapter createHyperPaymentsCallbackAdapter() {
return new HyperPaymentsCallbackAdapter() {
@Override
public void onEvent(JSONObject jsonObject, JuspayResponseHandler responseHandler) {
Intent redirect = new Intent(CheckoutActivity.this, ResponsePage.class);
redirect.putExtra("responsePayload", jsonObject.toString());
System.out.println(jsonObject);
try {
String event = jsonObject.getString("event");
if (event.equals("hide_loader")) {
// Hide Loader
dialog.hide();
}
else if (event.equals("initiate_result")) {
boolean error = jsonObject.optBoolean("error");
JSONObject innerPayload = jsonObject.optJSONObject("payload");
String status = innerPayload.optString("status");
if (status.equals("success")) {
// Initiate was successful, handle accordingly (call Process)
} else {
// Initiate failed, handle accordingly (call initiate() again)
}
}
// Handle Process Result
// This case will reach once the Hypercheckout screen closes
// block:start:handle-process-result
else if (event.equals("process_result")) {
boolean error = jsonObject.optBoolean("error");
JSONObject innerPayload = jsonObject.optJSONObject("payload");
String status = innerPayload.optString("status");
if (!error) {
switch (status) {
case "charged":
// Successful Transaction
// check order status via S2S API
redirect.putExtra("status", "OrderSuccess");
startActivity(redirect);
break;
case "cod_initiated":
redirect.putExtra("status", "CODInitiated");
startActivity(redirect);
break;
}
} else {
switch (status) {
case "backpressed":
// user back-pressed from PP without initiating transaction
break;
case "user_aborted":
// user initiated a txn and pressed back
// check order status via S2S API
Intent successIntent = new Intent(CheckoutActivity.this, ResponsePage.class);
redirect.putExtra("status", "UserAborted");
startActivity(redirect);
break;
case "pending_vbv":
redirect.putExtra("status", "PendingVBV");
startActivity(redirect);
break;
case "authorizing":
// txn in pending state
// check order status via S2S API
redirect.putExtra("status", "Authorizing");
startActivity(redirect);
break;
case "authorization_failed":
redirect.putExtra("status", "AuthorizationFailed");
startActivity(redirect);
break;
case "authentication_failed":
redirect.putExtra("status", "AuthenticationFailed");
startActivity(redirect);
break;
case "api_failure":
redirect.putExtra("status", "APIFailure");
startActivity(redirect);
break;
// txn failed
// check order status via S2S API
}
}
}
// block:end:handle-process-result
} catch (Exception e) {
// merchant code...
}
}
};
}
// block:end:create-hyper-callback
//block:start:onBackPressed
@Override
public void onBackPressed() {
boolean handleBackpress = hyperServicesHolder.onBackPressed();
if(!handleBackpress) {
super.onBackPressed();
}
}
//block:end:onBackPressed
/*
Optional Block
These functions are only supposed to be implemented in case if you are overriding
onActivityResult or onRequestPermissionsResult Life cycle hooks
- onActivityResult
- Handling onActivityResult hook and passing data to HyperServices Instance, to handle App Switch
@Override
public void onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
// block:start:onActivityResult
// If super.onActivityResult is available use following:
// super.onActivityResult(requestCode, resultCode, data);
// In case super.onActivityResult is NOT available please use following:
// if (data != null) {
// hyperServices.onActivityResult(requestCode, resultCode, data);
// }
// block:end:onActivityResult
// Rest of your code.
}
- onRequestPermissionsResult
- Handling onRequestPermissionsResult hook and passing data to HyperServices Instance, to OTP reading permissions
@Override
public void onRequestPermissionsResult(requestCode: Int, permissions: Array, grantResults: IntArray) {
// block:start:onRequestPermissionsResult
// If super.onRequestPermissionsResult is available use following:
// super.onRequestPermissionsResult(requestCode, permissions, grantResults);
// In case super.onActivityResult is NOT available please use following:
// hyperServices.onRequestPermissionsResult(requestCode, permissions, grantResults);
// block:end:onRequestPermissionsResult
}
*/
}
```
---
## See Also
- [3. Initialize SDK](https://juspay.io/in/docs/ec-headless/android/base-sdk-integration/initiating-sdk)
- [5. Making a Payment](https://juspay.io/in/docs/ec-headless/android/base-sdk-integration/making-a-payment)