Skip to main content
View as Markdown

Nuxt demo

Build a Nuxt storefront with embedded, modal, and hosted Checkout. A Nitro route creates the order and keeps the API key private.

What you’ll build

See the flow

The gallery shows one server-created order in each Checkout presentation. The API key stays in private Nitro configuration.

Nuxt desktop embedded Checkout
Kora Market Nuxt storefront with Inttegro Checkout embedded beside the Dawn Brew Set order. Shown without a previously attached payment method.
Embedded. Checkout participates in the Vue page while Kora Market’s product and bag context remain visible. Shown without a previously attached payment method.
Nuxt desktop modal Checkout
Kora Market Nuxt storefront dimmed behind an Inttegro Checkout modal. Shown with an attached payment method.
Modal. The overlay gives payment focus without replacing the shopper’s current Nuxt route. 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 private environment values, and start Nuxt. The released README has the exact commands.

Key files

  1. server/utils/checkout.ts creates the order and maps safe errors.
  2. server/routes/checkout.post.ts validates the request and returns JSON or a 303 redirect.
  3. plugins/inttegro-checkout.client.ts manages the Vue Checkout surface.
  4. public/checkout-presentations.js coordinates the three Checkout modes.

Before you ship

Keep the API key out of public Nuxt configuration. Store a durable order mapping and verify payment before fulfillment.

Next