---
page_title: 4. HyperSDK Events
product: Hypercheckout
platform: Capacitor
page_source: https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/hypersdk-events
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


### **HyperSDK Events** 




### Step 1.1. Listen to events from HyperSDK


HyperSDK Native Module will be emitting all the relevant events to JS via `notifyListeners` and JavaScript modules can then register to receive events by invoking `addListener` on the `HyperServices` Plugin instance with the event name `'HyperEvent'`. The listener will return a `JSON` response.

The following events should be handled here:

* show_loader: To show a loader for the processing state.
* hide_loader: To hide the previously shown loader.
* initiate_result: Result of initiate done in [step-2.](https://docs.juspay.in/hyper-checkout/capacitor/base-sdk-integration/initialize-sdk)
* process_result: Result of the process operation done in [step-3.](https://docs.juspay.in/hyper-checkout/capacitor/base-sdk-integration/rendering-the-checkout-screen)



#### Code Snippets: -

#### Capacitor Code Snippet:

```capacitor
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;
   }
});
```



### Step 1.1. Android Hardware Back-Press Handling


HyperSDK internally uses an android fragment for opening the bank page and will need the control to hardware back press when the bank page is active. This can be done by invoking `addEventListener` on the `backButton` provided by React Capacitor.

If the blocking asynchronous call `HyperServices.onBackPressed()` returns true, `HyperSDK` will handle the back press, else merchant can handle itFollowing are the Life cycle events which SDK needs



#### Code Snippets: -

#### Capacitor Code Snippet:

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

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

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


---

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

- [3. Rendering the Checkout Screen](https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/rendering-the-checkout-screen)
- [5. Handling Payment Response](https://juspay.io/in/docs/hyper-checkout/capacitor/base-sdk-integration/handling-payment-response)