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


# 1. Open Hypercheckout Screen



To open the Hypercheckout screen, make a Server-to-Server request to Juspay. The response contains the payment link which is used to render the Hypercheckout screen in user's browser.

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




### Step 1.1. Create Session on Juspay server


Once an order has been created at the merchant's end, trigger the 'Session' API to fetch the Hypercheckout screen’s link

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/web/base-sdk-integration/session)(Server-to-Server call) Session API will respond with a JSON object which contains the Hypercheckout screen’s url inside `payment_links` key



#### Code Snippets: -

#### HTML Code Snippet:

```html
function startPayments() {
        var requestPayload = JSON.stringify({
          amount: "1.0",
        });
        var requestOptions = {
          method: "POST",
          headers: {
            Authorization: "Basic <merchant api auth token>",
            "Content-Type": "application/json",
          },
          body: requestPayload,
        };

        fetch("https://api.<merchantwebsite>.com/makePayment", requestOptions)
          .then((response) => response.json())
          .then((result) => {
            //block:start:open-payment-page

            // Redirecting to payment link which is received from merchant server after Session API S2S call
            window.location.replace(result.link);


            // OR
            // Opening the Hypercheckout screen in an iframe
            /* 
            var paymentPageDiv = window.querySelector("#juspayDiv");
            var juspayIframe = document.createElement("iframe");
            juspayIframe.src = result.link;
            juspayIframe.setAttribute("allow", "payment *;");

            JUSPAY Hypercheckout needs a minimum width of 700px to open the Hypercheckout screen on web,
            on iframe widths less than 700px mobile web Hypercheckout screen will open
            
            juspayIframe.width = "1000";     // Set the width and height as per your requirements, for mobile try to
            juspayIframe.height = "920";     // keep the width as auto, so it will take entire width of the frame provided.
            paymentPageDiv.appendChild(juspayIframe);
            */

            //block:end:open-payment-page
          })
          .catch((error) => console.log("error", error));
      }
```



### Step 1.2. Open the Hypercheckout screen


Depending on the use case, open the payment url received inside an iFrame or redirect the user to a fresh page**Instruction for Iframe Integration -** If you are opening the payment page in an Iframe please make sure to add attribute `allow="payment *;"` to the iframe, not adding this attribute might affect the UPI intent transactions.**Example:** <iframe allow="payment *;" src="https://api.juspay.in/orders/ordeh_0651e605d……./payment-page"></iframe>



#### Code Snippets: -

#### HTML Code Snippet:

```html
// Redirecting to payment link which is received from merchant server after Session API S2S call
            window.location.replace(result.link);


            // OR
            // Opening the Hypercheckout screen in an iframe
            /* 
            var paymentPageDiv = window.querySelector("#juspayDiv");
            var juspayIframe = document.createElement("iframe");
            juspayIframe.src = result.link;
            juspayIframe.setAttribute("allow", "payment *;");

            JUSPAY Hypercheckout needs a minimum width of 700px to open the Hypercheckout screen on web,
            on iframe widths less than 700px mobile web Hypercheckout screen will open
            
            juspayIframe.width = "1000";     // Set the width and height as per your requirements, for mobile try to
            juspayIframe.height = "920";     // keep the width as auto, so it will take entire width of the frame provided.
            paymentPageDiv.appendChild(juspayIframe);
            */
```


> **Warning**
> Do not open the payment url received as a Webview within your android or iOS application. UPI intent will not be supported in such an integration. 



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