---
page_source: https://juspay.io/sea/docs/hyper-checkout-sea/react-native/base-sdk-integration/open-hypercheckout-screen
page_title: 3. Open Hypercheckout Screen
---


# 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 payment 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/react-native/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: -

#### Functional Code Snippet:

```functional
//Get process payload from server after session API S2S call
    useEffect(() => {
        setProcessPayload({
            "requestId":"dbba45aaf8dc408da474b7943b9e1d9f",
            "service":"in.juspay.hyperpay",
            "payload":{
               "clientId":"<CLIENT_ID>",
               "amount":"10.0",
               "merchantId":"acmecorp",
               "clientAuthToken":"tkn_adbf808e1d2b4d95b41144d0960b5a7e",
               "clientAuthTokenExpiry":"2022-01-24T17:40:22Z",
               "environment":"production",
               "action":"paymentPage",
               "customerId":"dummyCustId",
               "currency":"INR",
               "customerPhone":"9876543210",
               "customerEmail":"dummyemail@gmail.com",
               "orderId":"yourUniqueOrderId"
            }
        });
    }, [])
```

#### Class Code Snippet:

```class
// Note: Session API should only be called from merchant's server. Don't call it from client app
// -----------------------------------------------------------------
const makePaymentRequest = (total) => {
  var myHeaders = new Headers();

  // API Key Should never be used from client side, it should always be stored securely on server.
  // And all the API calls requiring API key should always be done from server
  myHeaders.append(
    "Authorization",
    `Basic ${encode("<YOUR_API_KEY>")}`
  );
  myHeaders.append("x-merchantid", "<MERCHANT_ID>");
  myHeaders.append("Content-Type", "application/json");

  var raw = JSON.stringify({
    order_id: `test-${getRandomNumber()}`,
    amount: total,
    customer_id: "9876543201",
    customer_email: "test@mail.com",
    customer_phone: "9876543201",
    payment_page_client_id: "<CLIENT_ID>",
    action: "paymentPage",
    return_url: "<return_url>",
    description: "Complete your payment",
    first_name: "John",
    last_name: "wick"
  });

  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };

  fetch("https://api.juspay.in/session", requestOptions)
    .then((response) => response.json())
    .then((result) => {
      // block:start:process-sdk
      HyperSdkReact.process(JSON.stringify(result.sdk_payload));
      // block:end:process-sdk
    })
    .catch((error) => console.log("error", error));
};
```



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

#### Functional Code Snippet:

```functional
const startPayment = () => {
        HyperSdkReact.process(JSON.stringify(processPayload))
    }
```

#### Class Code Snippet:

```class
HyperSdkReact.process(JSON.stringify(result.sdk_payload));
```


> **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/react-native/resources/test-resources)page for more details.