---
page_title: Integration Architecture
product: Hypercheckout
platform: Flutter
page_source: https://juspay.io/in/docs/hyper-checkout/flutter/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 



[Video](https://youtu.be/chRiaPJOAiU)



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

### Mermaid code for the above image

```mermaid
sequenceDiagram
  autonumber
  participant MA as Merchant App
  participant MS as Merchant Server
  participant SDK as Juspay SDK
  participant JS as Juspay Server

  rect rgb(225, 245, 238)
    Note over MA,JS: Stage 1 — User opens merchant app
    MA->>SDK: Initiate Payments Page SDK API (fire & forget async)
    Note right of SDK: SDK Initiated
  end

  rect rgb(250, 238, 218)
    Note over MA,JS: Stage 2 — User is making a payment
    MA->>MS: Forward order details
    MS->>JS: Session API (server-to-server)
    JS-->>MS: Respond with sdk_payload
    MS-->>MA: Forward sdk_payload
    MA->>SDK: Process Payments Page SDK API
    SDK->>JS: Display payment methods
    SDK->>JS: Link/unlink cards & wallets
    SDK->>JS: Offers discovery & application
    SDK->>JS: Transaction creation
    SDK-->>MA: Process Response (on payment complete)
    MA->>MS: Fetch order status (S2S call)
    MS->>JS: Order Status API (server-to-server)
    JS-->>MS: Respond with Order Status
    MS-->>MA: Forward Order Status
    Note left of MA: Display order status to user
  end
```



---

## See Also

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