---
page_title: 2. Initialize SDK
product: Hypercheckout
platform: React Native
page_source: https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/initiating-sdk
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


# 2. Initiating the SDK



To initialise the SDK, client needs to call the `initiate` SDK function. The initiate function call boots up the Hypercheckout SDK and makes it ready for all other operations

Follow the below steps to make an initiate SDK call

> **Error**
> Initiate is to be called on render of the homescreen. Not following this will lead to increased Hypercheckout latency.




### Step 2.1. Import HyperSDK


Import the HyperSDK namespace to get access to HyperServices class in your code



#### Code Snippets: -

#### Functional Code Snippet:

```functional
import HyperSdkReact from 'hyper-sdk-react';
```

#### Class Code Snippet:

```class
import HyperSdkReact from 'hyper-sdk-react';
```



### Step 2.2. Create an instance of HyperServices


The Hypercheckout SDK exposes the `HyperServices` class. Create an object of this class for all upcoming operations



#### Code Snippets: -

#### Functional Code Snippet:

```functional
HyperSdkReact.createHyperServices();
```

#### Class Code Snippet:

```class
HyperSdkReact.createHyperServices();
```



### Step 2.3. Create Initiate payload


Initiate takes two parameters as input. One of the parameter is a JSON object referred as `InitiatePayload`. This payload contains certain key value pairs used by the SDK to perform a successful initiate

Refer to the following table for information about the description and sample payload.


### Payload
- **RequestId**:
  - Description: Unique uuid-v4 string
  - Value: $requestId
  - Tags: String, Mandatory
- **Service**:
  - Description: Value: in.juspay.hyperpay
  - Tags: String, Mandatory
- **Payload**:
  - Description: Parameters
  - Value:
    - **Action**:
      - Description: Value: initiate
      - Tags: String, Mandatory
    - **MerchantId**:
      - Description: Unique merchant id shared during onboarding
      - Tags: String, Mandatory
    - **ClientId**:
      - Description: Unique Client id shared during onboarding
      - Tags: String, Mandatory
    - **Environment**:
      - Description: Environment to be used for the session. Accepted value is “production” / “sandbox“.
      - Tags: String, Mandatory
  - Tags: JSON, Mandatory




#### Code Snippets: -

#### Functional Code Snippet:

```functional
const initiate_payload = {
      requestId: uuid.v4(),
      service: 'in.juspay.hyperpay',
      payload: {
        action: 'initiate',
        merchantId: '<MERCHANT_ID>',
        clientId: '<CLIENT_ID>',
        XRoutingId: '<X_ROUTING_ID>',
        environment: 'production',
      },
    };
```

#### Class Code Snippet:

```class
const initiate_payload = {
      requestId: uuid.v4(),
      service: 'in.juspay.hyperpay',
      payload: {
        action: 'initiate',
        merchantId: '<MERCHANT_ID>',
        clientId: '<CLIENT_ID>',
        XRoutingId: '<X_ROUTING_ID>',
        environment: 'production',
      },
    };
```



### Step 2.4. Call initiate


The final step is to call the `Initiate`function

The initiate method takes stringified `InitiatePayload` as argument. Use the functions created in the above steps to create the parameters

> **Warning**
> Initiate is a fire-and-forget call. For every HyperService instance you should **call initiate only once.** 





#### Code Snippets: -

#### Functional Code Snippet:

```functional
HyperSdkReact.initiate(JSON.stringify(initiate_payload));
```

#### Class Code Snippet:

```class
HyperSdkReact.initiate(JSON.stringify(initiate_payload));
```


---

## Complete Code Reference

The following code files are referenced in the steps above:

### App.js

```
import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import Homescreen from './screens/Homescreen';
import Checkout from './screens/Checkout';
import Success from './screens/Success';
import Failure from './screens/Failure';
//block:start:import-hyper-sdk

import HyperSdkReact from 'hyper-sdk-react';

//block:end:import-hyper-sdk
import uuid from 'react-native-uuid';
import { NativeEventEmitter, NativeModules } from 'react-native';

const App = () => {
  useEffect(() => {
    // block:start:create-hyper-services-instance

    HyperSdkReact.createHyperServices();
    
    // block:end:create-hyper-services-instance

    // Creating initiate payload JSON object
    // block:start:create-initiate-payload

    const initiate_payload = {
      requestId: uuid.v4(),
      service: 'in.juspay.hyperpay',
      payload: {
        action: 'initiate',
        merchantId: '<MERCHANT_ID>',
        clientId: '<CLIENT_ID>',
        XRoutingId: '<X_ROUTING_ID>',
        environment: 'production',
      },
    };

    // block:end:create-initiate-payload

    // Calling initiate on hyperService instance to boot up payment engine.
    // block:start:initiate-sdk

    HyperSdkReact.initiate(JSON.stringify(initiate_payload));
    
    // block:end:initiate-sdk
  }, []);

  // block:start:event-handling-initiate
  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
    const eventListener = eventEmitter.addListener('HyperEvent', resp => {
      const data = JSON.parse(resp);
      const event = data.event || '';
      switch (event) {
        case 'initiate_result':
          // logging the initiate result
          console.log('Initiate result', data);
          break;
        default:
          console.log(data);
      }
    });
    return () => {
      eventListener.remove();
    };
  }, []);
  // block:end:event-handling-initiate

  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Homescreen}
          options={{title: 'Home'}}
        />
        <Stack.Screen
          name="Checkout"
          component={Checkout}
          options={{title: 'Checkout'}}
        />
        <Stack.Screen
          name="Success"
          component={Success}
          options={{title: 'Success'}}
        />
        <Stack.Screen
          name="Failure"
          component={Failure}
          options={{title: 'Failure'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

```

### App.js

```
import React from 'react';
import {createAppContainer, createStackNavigator} from 'react-navigation';

import Homescreen from './screens/Homescreen';
import Checkout from './screens/Checkout';
import Success from './screens/Success';
import Failure from './screens/Failure';
//block:start:import-hyper-sdk

import HyperSdkReact from 'hyper-sdk-react';

//block:end:import-hyper-sdk
import uuid from 'react-native-uuid';
import {NativeEventEmitter, NativeModules} from 'react-native';

const RootStack = createStackNavigator({
  Home: Homescreen,
  Success: Success,
  Failure: Failure,
  Checkout: Checkout,
});

const AppContainer = createAppContainer(RootStack);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stack: null,
    };
  }

  componentDidMount() {
    // block:start:create-hyper-services-instance
    HyperSdkReact.createHyperServices();
    // block:end:create-hyper-services-instance
    const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
    eventEmitter.addListener('HyperEvent', resp => {
      const data = JSON.parse(resp);
      const event = data.event || '';
      switch (event) {
        case 'initiate_result':
          // logging the initiate result
          console.log('Initiate result', data);
          break;
        default:
          console.log(data);
      }
    });

    // Creating initiate payload JSON object
    // block:start:create-initiate-payload
    const initiate_payload = {
      requestId: uuid.v4(),
      service: 'in.juspay.hyperpay',
      payload: {
        action: 'initiate',
        merchantId: '<MERCHANT_ID>',
        clientId: '<CLIENT_ID>',
        XRoutingId: '<X_ROUTING_ID>',
        environment: 'production',
      },
    };
    // block:end:create-initiate-payload

    // Calling initiate on hyperService instance to boot up payment engine.
    // block:start:initiate-sdk
    HyperSdkReact.initiate(JSON.stringify(initiate_payload));
    // block:end:initiate-sdk
  }

  render() {
    return <AppContainer />;
  }
}

export default App;

```


---

## See Also

- [1. Getting SDK](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/getting-sdk)
- [3. Open Hypercheckout Screen](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/open-hypercheckout-screen)