---
page_title: 1. Getting SDK
product: Hypercheckout
platform: Cordova
page_source: https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/getting-sdk
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


# 1. Getting the SDK



In order to use Hypercheckout, the very first step is to install the Hypercheckout SDK into your application and add proper configurations. Following sections describe how to complete above steps


### 1.1. Installing Cordova Plugin




### Step 1.1.a. Install Cordova Plugin via NPM 


Run command `cordova plugin add hyper-sdk-plugin` in your Cordova project folder.




### 1.2. Installing Compile Dependency



The minimum version of **cordova-android**  supported with HyperSDK is **10.0.0**  which uses androidx and AppCompatActivity.


### Step 1.2.a. Edit MerchantConfig.txt


Open `MerchantConfig.txt` file inside the `platforms/android/app/` directory of your project. Change client id to the one provided by the JUSPAY team. The MerchantConfig.txt contains a clientId which helps the plugin to download assets specific to your application.



#### Code Snippets: -

#### Javascript Code Snippet:

```javascript
clientId = <clientId> shared by Juspay Team
```



### 1.3. Installing Compile Dependency - iOS



Follow the below steps


### Step 1.3.a. Add MerchantConfig.txt


Create a .txt file named `MerchantConfig.txt` inside the `platforms/ios` directory of your project. Add `clientId = your_client_id`to this file.

The MerchantConfig.txt contains a clientId which helps the plugin to download assets specific to your application.



#### Code Snippets: -

#### Javascript Code Snippet:

```javascript
clientId = <clientId> shared by Juspay Team
```


---

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

- [Webhooks](https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/webhooks)
- [2. Initialize SDK](https://juspay.io/in/docs/hyper-checkout/cordova/base-sdk-integration/initiating-sdk)