# ashiskumar-1999/dodo-checkout architecture

> Architecture diagram of the GitHub repository ashiskumar-1999/dodo-checkout, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ashiskumar-1999/dodo-checkout
- Repository: https://github.com/ashiskumar-1999/dodo-checkout

## Overview

Dodo-checkout combines a demo storefront, an embeddable browser SDK, and an isolated checkout app. A shopper browses and searches the demo catalog, then starts checkout from a product card. The SDK validates the checkout URL, opens an iframe, and exchanges initialization and result messages with the checkout app; the app simulates payment and returns a success result to the storefront callback. The checkout page also manages form validation and modal behavior. Payment processing is simulated, with no processor or persistent order store connected. Checkout-page details are based on a partial source excerpt; other capabilities are included where documented.

Main entry points: [`demo-Site/app/page.tsx`](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/app/page.tsx) (Storefront page), [`sdk/index.ts`](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/sdk/index.ts) (Checkout SDK), [`checkout/app/page.tsx`](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/checkout/app/page.tsx) (Checkout page), [`demo-Site/components/ProductCard.tsx`](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/ProductCard.tsx) (Product card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Demo storefront"]
  node_catalog["Product catalog<br/>[products.ts]"]
  node_storefront_page["Storefront page<br/>[page.tsx]"]
  node_product_card["Product card<br/>[ProductCard.tsx]"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
  node_search["Product search<br/>[SearchBar.tsx]"]
  node_storefront_layout["Storefront layout<br/>[layout.tsx]"]
end

subgraph group_sdk["Browser SDK"]
  node_sdk_api["Checkout SDK<br/>[index.ts]"]
  node_iframe["Checkout iframe<br/>[index.ts]"]
end

subgraph group_checkout["Checkout app"]
  node_checkout_page["Checkout page<br/>[page.tsx]"]
  node_modal["Checkout modal<br/>[useModal.ts]"]
end

node_shopper(("Shopper"))
node_browser(("Browser runtime"))

node_shopper -->|"browses"| node_storefront_page
node_storefront_page -->|"filters products"| node_catalog
node_storefront_page -->|"renders"| node_navbar
node_storefront_page -->|"renders"| node_product_card
node_navbar -->|"renders"| node_search
node_shopper -->|"enters query"| node_search
node_shopper -->|"selects product"| node_product_card
node_product_card -->|"buy action"| node_storefront_page
node_storefront_page -->|"opens checkout"| node_sdk_api
node_storefront_layout -.->|"loads SDK script"| node_browser
node_sdk_api -->|"creates overlay"| node_iframe
node_iframe -->|"loads checkout"| node_checkout_page
node_checkout_page -->|"posts ready"| node_sdk_api
node_sdk_api -->|"posts init"| node_checkout_page
node_shopper -->|"enters payment details"| node_checkout_page
node_checkout_page -->|"uses modal state"| node_modal
node_checkout_page -->|"posts result"| node_sdk_api
node_sdk_api -->|"calls callbacks"| node_storefront_page

click node_catalog "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/products.ts"
click node_storefront_page "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/app/page.tsx"
click node_product_card "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/ProductCard.tsx"
click node_navbar "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/Navbar.tsx"
click node_search "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/SearchBar.tsx"
click node_storefront_layout "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/app/layout.tsx"
click node_sdk_api "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/sdk/index.ts"
click node_iframe "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/sdk/index.ts"
click node_checkout_page "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/checkout/app/page.tsx"
click node_modal "https://github.com/ashiskumar-1999/dodo-checkout/blob/main/checkout/app/useModal.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_catalog,node_storefront_page,node_product_card,node_navbar,node_search,node_storefront_layout,node_browser toneBlue
class node_sdk_api,node_iframe toneAmber
class node_checkout_page,node_modal toneMint
class node_shopper toneIndigo
```

## Components

### Demo storefront

- [Product catalog](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/products.ts): `demo-Site/components/products.ts`
- [Storefront page](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/app/page.tsx): `demo-Site/app/page.tsx`
- [Product card](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/ProductCard.tsx): `demo-Site/components/ProductCard.tsx`
- [Navigation bar](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/Navbar.tsx): `demo-Site/components/Navbar.tsx`
- [Product search](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/components/SearchBar.tsx): `demo-Site/components/SearchBar.tsx`
- [Storefront layout](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/demo-Site/app/layout.tsx): `demo-Site/app/layout.tsx`

### Browser SDK

- [Checkout SDK](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/sdk/index.ts): `sdk/index.ts`
- [Checkout iframe](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/sdk/index.ts): `sdk/index.ts`

### Checkout app

- [Checkout page](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/checkout/app/page.tsx): `checkout/app/page.tsx`
- [Checkout modal](https://github.com/ashiskumar-1999/dodo-checkout/blob/main/checkout/app/useModal.ts): `checkout/app/useModal.ts`

### Other components

- **Shopper**
- **Browser runtime**

## Connections

- Shopper → Storefront page: browses
- Storefront page → Product catalog: filters products
- Storefront page → Navigation bar: renders
- Storefront page → Product card: renders
- Navigation bar → Product search: renders
- Shopper → Product search: enters query
- Shopper → Product card: selects product
- Product card → Storefront page: buy action
- Storefront page → Checkout SDK: opens checkout
- Storefront layout → Browser runtime: loads SDK script
- Checkout SDK → Checkout iframe: creates overlay
- Checkout iframe → Checkout page: loads checkout
- Checkout page → Checkout SDK: posts ready
- Checkout SDK → Checkout page: posts init
- Shopper → Checkout page: enters payment details
- Checkout page → Checkout modal: uses modal state
- Checkout page → Checkout SDK: posts result
- Checkout SDK → Storefront page: calls callbacks