How ashiskumar-1999/dodo-checkout works
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: app/page.tsx Storefront page · index.ts Checkout SDK · app/page.tsx Checkout page · ProductCard.tsx Product card
Components 12
Demo storefront
- Product catalog
demo-Site/components/products.ts - Storefront page
demo-Site/app/page.tsx - Product card
demo-Site/components/ProductCard.tsx - Navigation bar
demo-Site/components/Navbar.tsx - Product search
demo-Site/components/SearchBar.tsx - Storefront layout
demo-Site/app/layout.tsx
Browser SDK
- Checkout SDK
sdk/index.ts - Checkout iframe
sdk/index.ts
Checkout app
- Checkout page
checkout/app/page.tsx - Checkout modal
checkout/app/useModal.ts
Other components
- Shopper
- Browser runtime
Connections 18
- 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