Next.js demo

Build a Next.js storefront and the backend used by all four mobile demos. Web Checkout can be embedded, modal, or hosted.

What you’ll build

A Next.js App Router storefront with a server-only checkout route
Typed order creation with the Inttegro TypeScript SDK
React integration through @inttegro/react
One web order used in all three Checkout presentations
A narrow POST /mobile/orders backend that returns only a finalized order ID
Explicit completion and cancellation URLs for hosted checkout

See the flow

The gallery shows the web order in each Checkout presentation. Order creation and the API key stay in a server-only route.

Desktop
Mobile

Kora Market Next.js storefront with Inttegro Checkout embedded beside the Dawn Brew Set order. Shown without a previously attached payment method. — **Embedded.** The React checkout surface sits inside Kora Market while the App Router retains the surrounding storefront. Shown without a previously attached payment method.

Kora Market Next.js storefront dimmed behind an Inttegro Checkout modal. Shown with an attached payment method. — **Modal.** The shopper moves into payment without abandoning the current React storefront state. Shown with an attached payment method.

Select any image to view it full screen.

Run the demo

Install a supported Node.js release, set the server environment values, and start Next.js. Never use NEXT_PUBLIC_ for the API key. The released README has the exact commands.

Key files

lib/checkout.ts creates web and mobile orders.
app/checkout/route.ts validates checkout and returns JSON or a 303 redirect.
app/inttegro-demo-checkout.tsx manages the React Checkout surface.
public/checkout-presentations.js coordinates the three Checkout modes.
app/mobile/orders/route.ts returns finalized order IDs to mobile apps.

Before you ship

Authenticate the mobile route. Keep prices, currency, customer identity, and fulfillment decisions on the server.