---
page_title: 1. Initialize SDK
product: Hypercheckout
platform: iFrame Web
page_source: https://juspay.io/in/docs/hyper-checkout/iframe-web/base-sdk-integration/initialize-sdk
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---
# 1. 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
### Step 1.1. Substep
> **Note**
> 1. Call the initiation script ahead of displaying the payment page.
> 2. Ensure that the script is placed on the page where the payment page will be shown.
#### Code Snippets: -
#### HTML Code Snippet:
```html
// Calling the initiation script ahead of displaying the payment page.
const script = document.createElement('script');
script.src = 'https://payments.juspay.in/payment-page/HyperServices.js';
script.setAttribute('clientId', 'yourClientId');
script.setAttribute('service', 'in.juspay.hyperpay');
document.body.appendChild(script);
```
### Step 1.1. Loading the SDK
In order to use Hypercheckout, the very first step is to add the following `div` to your webpage. The payment page will be rendered within this `div`. You can style the `div` according to your design preferences.
#### HTML Code Snippet:
```html
```
#### Code Snippets: -
#### HTML Code Snippet:
```html
Juspay Integration
```
### Step 1.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: -
#### HTML Code Snippet:
```html
let hyperServicesObject;
```
### Step 1.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
- Tags: String, Mandatory
- **HyperSDKDiv**:
- Description: Pass the value as “HyperSDKDiv“
- Tags: String, Mandatory
- **IntegrationType**:
- Description: Pass the value as “iframe“
- Tags: String, Mandatory
- Tags: JSON, Mandatory
### Step 1.4 Create CallbackHandler
During its lifecycle, SDK emits multiple events to communicate about the transaction status. Create a function like `hyperCallbackHandler` to receive all these events
This callback handler is passed as the second argument to the initiate call.
#### Code Snippets: -
#### HTML Code Snippet:
```html
// Callback handler for HyperServices events
function hyperCallbackHandler(eventData) {
try {
if (eventData) {
const eventJSON = typeof eventData === 'string' ? JSON.parse(eventData) : eventData;
const event = eventJSON.event;
// Check for event key
if (event == "initiate_result") {
// Handle initiate result here
console.log("Initiate Result:", eventJSON);
} else if (event == "process_result") {
// Handle process result here
console.log("Process Result:", eventJSON);
} else if (event == "user_event") {
// Handle Payment Page events
console.log("User Event:", eventJSON);
} else {
console.log("Unhandled event", event, " Event data", eventData);
}
} else {
console.log("No data received in event", eventData);
}
} catch (error) {
console.log("Error in hyperSDK response", error);
}
}
```
### Step 1.5. Call initiate
The final step is to call the `Initiate`function.
#### Code Snippets: -
#### HTML Code Snippet:
```html
async function initiateJuspayPayment() {
try {
// Check if HyperServices is loaded
if (window.HyperServices) {
hyperServicesObject = new window.HyperServices();
// Call the initiate function with the callback handler
hyperServicesObject.initiate({
"requestId": generateRandomRequestId(),
"service": "in.juspay.hyperpay",
"payload": {
"action": "initiate",
"hyperSDKDiv": "HyperSDKDiv",
"integrationType": "iframe",
"environment": "production", // Update sandbox for sandbox environment
"merchantId": "", // Update this to your merchant ID
"clientId": "" // Update this to your client ID
}
}, hyperCallbackHandler);
} else {
console.error('HyperServices script not loaded');
}
} catch (error) {
console.error('Error:', error.message);
// Handle error as needed
}
}
```
---
## Complete Code Reference
The following code files are referenced in the steps above:
### index.html
```
Juspay Integration
```
### index.html
```
Juspay Integration
```
---
## See Also
- [Webhooks](https://juspay.io/in/docs/hyper-checkout/iframe-web/base-sdk-integration/webhooks)
- [2. Open Hypercheckout Screen](https://juspay.io/in/docs/hyper-checkout/iframe-web/base-sdk-integration/open-hypercheckout-screen)