---
page_title: Process
product: UPI TPAP SDK
platform: React Native
page_source: https://juspay.io/in/docs/upi-tpap-sdk/react-native/interaction-with-sdk/process
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/upi-tpap-sdk/llms.txt
---


## Process




###   Call Process


This API should be triggered for all operations required from the HyperSDK. This API can be triggered any number of times based on requirements or app flow structure.

> **Warning**
> 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 initiated in code





#### Code Snippets: -

#### Functional Code Snippet:

```functional
{"success":false,"message":"Failed to fetch snippet"}
```

#### Class Code Snippet:

```class
callProcess() {
    if(HyperSdkReact.isInitialised()) {
      HyperSdkReact.process(JSON.stringify(this.state.processPayload));
    }
  }
```


The process operation can be related to:

* [Get Session token](../ui-process-payloads/inapp-ui#1.-Get-Session-Token)
* [UPI Onboarding and Payment flow](../ui-process-payloads/inapp-ui#3.-UPI-Onboarding-and-Payment)
* [UPI Profile management section](../ui-process-payloads/management#1.-UPI-Profile-Management)

---

## Complete Code Reference

The following code files are referenced in the steps above:

### Checkout.js

```
import React, {useEffect, useState} from 'react'
import HyperSdkReact from 'hyper-sdk-react';
import { BackHandler, Button, NativeEventEmitter, NativeModules, ScrollView, Text } from 'react-native';

export default function Checkout({navigation}) {
    const [processPayload, setProcessPayload] = useState({});

    //Setting event listener to check for process result
    // block:start:event-handling-process

    useEffect(() => {
        const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
        const eventListener = eventEmitter.addListener('HyperEvent', (resp) => {
            const data = JSON.parse(resp);
            const event = data.event || '';
            switch (event) {
                // block:start:show-loader
                case 'show_loader':
                  // Show some Loader
                  break;
                // block:end:show-loader

                // block:start:hide-loader
                case 'hide_loader':
                  // Hide Loader
                  break;
                // block:end:hide-loader

                // block:start:initiate-result
                case 'initiate_result':
                  // logging the initiate result
                  console.log('Initiate result', data);
                  break;
                // block:end:initiate-result

                // block:start:process-result
                case 'process_result':
                  // logging the initiate result
                  console.log('Process result', data);
                  break;
                // block:end:process-result

                // block:start:log-stream
                case 'log_stream':
                  // print data
                  console.log(data);
                  break;
                // block:end:log-stream

                // block:start:session-expiry
                case 'session_expiry':
                  // Handle Session Expiry
                  break;
                // block:end:session-expiry
            }
        });
        return () => {
            eventListener.remove();
        }
    }, [])

    // block:end:event-handling-process

    // block:start:fetch-process-payload

    //Get process payload from server after session API S2S call
    useEffect(() => {
        setProcessPayload({
            "requestId":"dbba45aaf8dc408da474b7943b9e1d9f",
            "service":"in.juspay.hyperapi",
            "payload":{
               "action":"upiCheckPermission"
            }
        });
    }, [])

    // block:end:fetch-process-payload

    //Handling hardware backpress inside payment page
    // block:start:handle-hardware-backpress

    useEffect(() => {
        BackHandler.addEventListener('hardwareBackPress', () => {
            return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed();
        });
        return () => {
            BackHandler.removeEventListener('hardwareBackPress', () => null);
        }
    }, [])

    // block:end:handle-hardware-backpress

    // block:start:process-sdk

    const callProcess = () => {
        if(HyperSdkReact.isInitialised()) {
            HyperSdkReact.process(JSON.stringify(processPayload))
        }
    }

    // block:end:process-sdk

    // block:start:terminate

    const terminate = () => {
        HyperSdkReact.terminate()
    }

    // block:end:terminate

    return (
        <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            contentContainerStyle={{alignItems: 'center', justifyContent: 'space-around', height: "100%"}}
        >
            <Text>Initialized automatically on this screen</Text>
            <Button onPress={()=>callProcess()} title="Process"></Button>
        </ScrollView>
    )
}
```

### Checkout.js

```
{"success":false,"message":"Failed to fetch snippet"}
```


---

## See Also

- [Initiating the SDK](https://juspay.io/in/docs/upi-tpap-sdk/react-native/interaction-with-sdk/initiating-the-sdk)
- [Handle SDK Response](https://juspay.io/in/docs/upi-tpap-sdk/react-native/interaction-with-sdk/handle-sdk-response)