---
page_title: 3. Open Hypercheckout Screen
product: Hypercheckout
platform: Cordova
page_source: https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/open-hypercheckout-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



Once the Hypercheckout screen is opened, your users can proceed with the transactions. Opening the Hypercheckout screen requires a Server-to-Server request from Merchant to Juspay. The response of this should be forwarded to the Hypercheckout SDK in order to open the Hypercheckout screen.

> **Warning**
> This step should be done only once the final payable amount is available




### Step 3.1. Fetch Process Payload


The `process` function takes a JSONObject as argument. This argument is also known as process payload.

In order to fetch process payload following steps should be followed: Make a request from Client to your Server with necessary order parameters Your server should call [Juspay's Session API](/hyper-checkout/cordova/base-sdk-integration/session)(Server-to-Server call) Session API will respond with a JSON object which contains process payload inside `sdk_payload` key Forward the `sdk_payload` from your server to client



#### Code Snippets: -

#### Javascript Code Snippet:

```javascript
//Fetching the process payload from your server. Please refer to the session API section of docs to know more.
      async function getProcessSDKPayload() {
        var serverResponse = await fetch("https://your_server_endpoint/");
        return serverResponse;
      }
```



### Step 3.2. Call Process Function


Pass the JSON inside `sdk_payload` obtained in `Step 3.1`, to `process`SDK``function`.`

Process is to be called on the same instance of HyperService using which initiate was called.



#### Code Snippets: -

#### Javascript Code Snippet:

```javascript
var processPayload = await fetch getProcessSDKPayload();

hyperSDKRef.process(processPayload);
```


> **Warning**
> As soon as you sign up with Juspay, we set you up with a Dummy PG automatically. Using this Dummy PG, you can run test transactions with a pre-configured set of cards. You may also configure the test credentials of the gateway and use the respective test cards for completing the transaction journey. Please refer to the [Test Resources](/hyper-checkout/cordova/resources/test-resources)page for more details.



---

## Complete Code Reference

The following code files are referenced in the steps above:

### snippets.txt

```
//block:start:add-merchant-config-android

clientId = <clientId> shared by Juspay Team

//block:end:add-merchant-config-android


//block:start:create-hyper-services-instance

hyperSDKRef = cordova.plugins.HyperSDKPlugin

//block:end:create-hyper-services-instance


//block:start:create-initiate-payload

//Function to generate random requestId 
function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}


function createInitiatePayload() {
    return {
        requestId: uuidv4(),
        service: "in.juspay.hyperpay",
        payload: {
            action: "initiate",
            merchantId: "<your_merchant_id>",
            clientId: "<your_client_id>",
            xRoutingId: "<x_routing_id>",
            environment: "production"
        }
    };
}

//block:end:create-initiate-payload


//block:start:create-hyper-callback

var hyperSDKCallback = function (response) {
  try {
    const data = JSON.parse(resp);
    var event = data.event || '';

    switch (event) {
      case "show_loader": {
        // Show some loader here
        
      }
      break;
      case "hide_loader": {
        // Hide Loader

      }
      break;
      case "initiate_result": {
        // Get the payload
      
        let payload = parsedData["payload"];
        console.log("initiate result: ", parsedData)
      }
      break;

      //block:start:handle-process-result
      
      case "process_result": {
        // Get the payload
        
        let payload = parsedData["payload"];
        console.log("process result: ", parsedData)
        const error = data.error || false;
        const innerPayload = data.payload || {};
        const status = innerPayload.status || '';
        const pi = innerPayload.paymentInstrument || '';
        const pig = innerPayload.paymentInstrumentGroup || '';

        if (!error) {
            // txn success, status should be "charged"

            //block:start:check-order-status

            // call orderStatus once to verify (false positives)

            //block:end:check-order-status

            //block:start:display-payment-status

            //Naivgate to success page

            //block:end:display-payment-status
        } else {
            const errorCode = data.errorCode || '';
            const errorMessage = data.errorMessage || '';
            switch (status) {
                case 'backpressed':
                    // user back-pressed from PP without initiating any txn
                    break;
                case 'user_aborted':
                    // user initiated a txn and pressed back
                    // poll order status
                    // navigate back
                    break;
                case 'pending_vbv':
                case 'authorizing':
                    // txn in pending state
                    // poll order status until backend says fail or success
                    break;
                case 'authorization_failed':
                case 'authentication_failed':
                case 'api_failure':
                    // txn failed
                    // poll orderStatus to verify (false negatives)
                    //block:start:display-payment-status

                    //navigate to failure page

                    //block:end:display-payment-status
                    break;
                case 'new':
                    // order created but txn failed
                    // very rare for V2 (signature based)
                    // also failure
                    // poll order status
                    
                    //navigate to failure page
                    break;
                default:
                    // unknown status, this is also failure
                    // poll order status
                    
                    //navigate to failure page
            }
            // if txn was attempted, pi and pig would be non-empty
            // can be used to show in UI if you are into that
            // errorMessage can also be shown in UI
        }
        break;


      }
      break;

      //block:end:handle-process-result

      default:
        //Error handling

        let payload = parsedData;
        console.log("process result: ", payload)
      break;
    }
  } catch (error) {
    //Error handling
    console.log(error);
  }
}

//block:end:create-hyper-callback


//block:start:initiate-sdk

hyperSDKRef.initiate(JSON.stringify(createInitiatePayload()), hyperSDKCallback);

//block:end:initiate-sdk


// block:start:fetch-process-payload

    //Fetching the process payload from your server. Please refer to the session API section of docs to know more.
      async function getProcessSDKPayload() {
        var serverResponse = await fetch("https://your_server_endpoint/");
        return serverResponse;
      }
// block:end:fetch-process-payload


//block:start:process-sdk

var processPayload = await fetch getProcessSDKPayload();

hyperSDKRef.process(processPayload);

//block:end:process-sdk
```


---

## See Also

- [2. Initialize SDK](https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/initiating-sdk)
- [4. Handle Payment Response](https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/handle-payment-response)