---
page_title: Integration Architecture
product: Hypercheckout
platform: iFrame Web
page_source: https://juspay.io/in/docs/hyper-checkout/iframe-web/overview/integration-architecture
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


# Integration Architecture 



![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hypercheckout-web/Payment%20Page%20Integration%20via%20SDK%20(web)%20-%20Flow%20Diagram.png)

### Mermaid code for the above image

```mermaid
sequenceDiagram
    autonumber
    participant MW as Merchant Website
    participant MS as Merchant Server
    participant SDK as Juspay SDK
    participant JS as Juspay Server

    Note over MW,JS: Stage 1 — User is making a payment

    MW->>SDK: Step 1 — Calls Initiate Payments Page SDK API (fire & forget async)
    Note right of SDK: SDK Initiated

    MW->>MS: Website forwards order related details
    MS->>JS: Step 2 — Calls Session API with related parameters
    JS-->>MS: Order Created
    JS-->>MS: Responds with sdk_payload
    MS-->>MW: Fetches sdk_payload and forwards to Merchant Website

    MW->>SDK: Step 3 — Calls Process Payments Page SDK API
    SDK->>JS: Displays Hypercheckout Screen
    JS-->>SDK: Displaying Payment Methods
    JS-->>SDK: Linking Cards / Wallets
    JS-->>SDK: Offers Discovery / Application
    JS-->>SDK: Unlinking Cards / Wallets
    JS-->>SDK: Transaction Creation
    SDK-->>MW: After payment completion, SDK forwards Process Response to Merchant Website


    MW->>MS: Calls Merchant Server to fetch order status via S2S Call
    MS->>JS: Step 4 — Calls Order Status API to check order status
    JS-->>MS: Request Received
    JS-->>MS: Responds with Order Status
    MS-->>MW: Forwards Order Status response to Merchant Website

    Note left of MW: Step 5 — Merchant Website displays order status to user
```



---

## See Also

- [Studio FAQs](https://juspay.io/in/docs/hyper-checkout/capacitor/faqs/studio-faqs)
- [Pre-Requisites](https://juspay.io/in/docs/hyper-checkout/iframe-web/overview/pre-requisites)