---
page_title: 3. Rendering the Checkout Screen
product: Hypercheckout
platform: Capacitor
page_source: https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/rendering-the-checkout-screen
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


## 3. Open Hypercheckout Screen




### Step 1.1. Substep


Opening payment page requires you to call the process SDK API with process payload as input. It should not be called on an HyperSDK instance which has not been initiated. To verify if an instance is initiated, kindly refer to check SDK **isInitialised**  section under [code snippets](https://docs.juspay.in/payment-page-enterprise/android/resources/code-snippets).

Once the payment page is opened, users can proceed with the transactions.

Pass the sdk_payload from the [Session API](https://docs.juspay.in/hyper-checkout/capacitor/base-sdk-integration/session) (s2s backend call) response as the processPayload.


#### Sample Process Payload Code Snippet:

```sample process payload
{
    "requestId": "12398b5571d74c3388a74004bc24370c",
    "service": "in.juspay.hyperpay",
    "payload": {
        "clientId": "yourClientId",
        "amount": "1.0",
        "merchantId": "yourMerchantId",
        "clientAuthToken": "tkn_xxxxxxxxxxxxxxxxxxxxx",
        "clientAuthTokenExpiry": "2022-03-12T20:29:23Z",
        "environment": "production",
        "options.getUpiDeepLinks": "true",
        "lastName": "wick",
        "action": "paymentPage",
        "customerId": "testing-customer-one",
        "returnUrl": "https://shop.merchant.com",
        "currency": "INR",
        "firstName": "John",
        "customerPhone": "9876543210",
        "customerEmail": "test@mail.com",
        "orderId": "testing-order-one",
        "description": "Complete your payment"
    }
}
```




#### Code Snippets: -

#### Capacitor Code Snippet:

```capacitor
await HyperServices.process(processPayload);
```


---

## Complete Code Reference

The following code files are referenced in the steps above:

### payment_page.js

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

  import { App } from '@capacitor/app';

  .........
  .........

  App.addListener('backButton', async (data) => {
    const { onBackPressed } = await HyperServices.onBackPressed();
    if (!onBackPressed) {
      window.history.back();
    }
  });
    // block:end:onBackPressed


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

  await HyperServices.process(processPayload);
  // block:end:process-sdk
}

// Listen to events from HyperSDK
// block:start:callbacklistener
HyperServices.addListener('HyperEvent', async (data) => {
   var event = data["event"];
   switch (event) {
      case "show_loader": {
         // Show a loader
      }
      break;
      case "hide_loader": {
         // Hide Loader
      }
      break;
      case "initiate_result": {
         // Initiate api response
      }
      break;
      case "process_result": {
         // Process result
      }
      break;
      default:
         let payload = data["payload"];
         console.log("process result: ", payload)
      break;
   }
});
// block:end:callbacklistener

```


---

## See Also

- [2. Initialize SDK](https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/initialize-sdk)
- [4. HyperSDK Events](https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/hypersdk-events)