---
title: "Inertia"
description: "Render Checkout inline or in an application-owned dialog with a React, Vue, or Svelte adapter in Inertia."
canonical: "https://studio.inttegro.com/web/inertia"
format: inttegro-machine-docs/v1
language: "Go"
sdk_version: "v11.0.1"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/go/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 560
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "curated"
recommended_mcp_tools: ["design_integration","check_integration_readiness"]
estimated_tokens: 2617
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Inertia has no separate Inttegro package: choose the adapter for its renderer, pass only a finalized Order ID in page props, and reconcile payment on the server.

### Five questions

#### Q1. Which package does an Inertia application install?

Use the adapter for the actual frontend renderer—[React](https://studio.inttegro.com/machine/go/web/react.md), [Vue](https://studio.inttegro.com/machine/go/web/vue.md), or [Svelte](https://studio.inttegro.com/machine/go/web/svelte.md). There is no Inertia-specific Inttegro package. See [choose the renderer adapter](https://studio.inttegro.com/machine/go/web/inertia.md#choose-the-renderer-adapter).

#### Q2. What belongs in the Inertia page prop?

Create and finalize the order in the trusted server controller or action, then expose only its Order ID as a page prop. Never serialize the API key, payment method data, or unsealed amount into the page. See [pass the Order ID](https://studio.inttegro.com/machine/go/web/inertia.md#pass-the-order-id-as-a-page-prop).

#### Q3. What does an Inertia visit do to Checkout?

A page unmount destroys its Checkout controller and subscription; a changed Order ID creates a fresh instance. Keep the Order ID server-provided and do not leave a completed Checkout mounted across unrelated visits. See [navigation](https://studio.inttegro.com/machine/go/web/inertia.md#handle-navigation-and-payment-state).

#### Q4. Which result can move the business workflow forward?

Use the renderer's completed event to visit a payment-status route or update UI, then have the server [look up the order](https://studio.inttegro.com/machine/go/api/orders.md#lookup-an-order) before fulfillment. An Inertia visit or browser callback is not payment proof.

#### Q5. How can an agent plan and test this flow?

With an authenticated MCP connection, [design_integration](https://studio.inttegro.com/machine/go/inttegro-mcp/tools.md#design_integration) can plan the renderer/server boundary and [check_integration_readiness](https://studio.inttegro.com/machine/go/inttegro-mcp/tools.md#check_integration_readiness) can audit declared controls. Test navigation away, a changed Order ID, cancellation, and success with disposable orders.

## Document content

# Inttegro with Inertia

Inertia applications use the Inttegro adapter for their frontend renderer.
There is no separate Inertia package: React applications use
`@inttegro/react`, Vue applications use `@inttegro/vue`, and Svelte
applications use `@inttegro/svelte`.

## Prerequisites

- An Inertia application using React, Vue, or Svelte
- The corresponding Inttegro adapter installed with npm, Yarn, Bun, or Deno
- A backend that [creates](https://studio.inttegro.com/machine/go/api/orders.md#create-an-order) and
  [finalizes](https://studio.inttegro.com/machine/go/api/orders.md#finalize-an-order) an Inttegro Order

## Choose the renderer adapter

| Inertia frontend | Inttegro package   | Installation and usage      |
| ---------------- | ------------------ | --------------------------- |
| React            | `@inttegro/react`  | [React guide](https://studio.inttegro.com/machine/go/web/react.md)   |
| Vue              | `@inttegro/vue`    | [Vue guide](https://studio.inttegro.com/machine/go/web/vue.md)       |
| Svelte           | `@inttegro/svelte` | [Svelte guide](https://studio.inttegro.com/machine/go/web/svelte.md) |

The adapter already depends on `@inttegro/js`. Inttegro does not publish a
separate Inertia package.

## Pass the Order ID as a page prop

Create and finalize the Order in the server-side controller or action that
prepares the Inertia response. Return only the client-safe Order ID needed by
the page. Do not include your secret API key, payment method data, or
unnecessary customer details in page props.

Whichever server adapter you use, expose the same small page-prop contract:

```typescript
export interface CheckoutPageProps {
  orderId: string
}
```

Then pass `orderId` to the Checkout component for your renderer. A React page,
for example, needs no Inertia-specific Inttegro API.

For a Buy link, return `purchaseIntentId` as the page prop instead. Pass it to
the same renderer adapter in place of `orderId`. Fixed pricing continues
directly to payment; customer-selected pricing first collects the amount. Never
pass both references.

## Choose and render a presentation

An Inertia-specific live demo has not been released. The
[Express live demo](https://express-demo.inttegro.dev) shows the same hosted
payment surface in both presentations; its
[released presentation controller](https://github.com/inttegro/inttegro-demos/blob/express-v1.8.3/express/public/checkout-presentations.js)
shows the server-to-browser boundary. Compare the presentations below, then use
the matching React implementation that follows or translate it using the linked
Vue and Svelte component conventions. Open any screenshot at full size when you
need to inspect the layout.

> Demo Presentation Gallery is interactive content. Use the canonical page to view it.

The examples below use the React adapter. Vue and Svelte pages use the same
page-prop boundary with the component syntax in the [Vue](https://studio.inttegro.com/machine/go/web/vue.md) and
[Svelte](https://studio.inttegro.com/machine/go/web/svelte.md) guides.

### Embedded

Choose embedded Checkout when the Inertia visit leads to a dedicated payment
page or checkout step. The page component owns the surrounding layout and keeps
Checkout mounted until payment finishes or navigation deliberately ends the
flow.

```tsx
import { router } from '@inertiajs/react'
import { Checkout } from '@inttegro/react'
import { useState } from 'react'

interface CheckoutPageProps {
  orderId: string
}

export default function CheckoutPage({ orderId }: CheckoutPageProps) {
  const [message, setMessage] = useState('')

  function handleError(error: Error) {
    setMessage(error.message)
  }

  return (
    <main>
      <h1>Complete your order</h1>
      <Checkout
        orderId={orderId}
        onCompleted={() => router.visit('/payment-status')}
        onError={handleError}
      />
      <p aria-live="polite">{message}</p>
    </main>
  )
}
```

Avoid replacing the page component while payment or provider confirmation is
in progress; an Inertia
visit unmounts the adapter and destroys that Checkout instance.

### Modal

Choose a modal when payment begins from an action on a cart, order, or account
page that should remain mounted underneath. The page owns the dialog, trigger,
close control, focus restoration, scrolling, and open state. Inttegro owns the
isolated payment surface inside it.

```tsx
import { router } from '@inertiajs/react'
import { Checkout } from '@inttegro/react'
import { useRef, useState } from 'react'

interface OrderPageProps {
  orderId: string
}

export default function OrderPage({ orderId }: OrderPageProps) {
  const dialog = useRef<HTMLDialogElement>(null)
  const [open, setOpen] = useState(false)
  const [message, setMessage] = useState('')

  function openDialog() {
    setOpen(true)
    dialog.current?.showModal()
  }

  function handleError(error: Error) {
    setMessage(error.message)
  }

  return (
    <>
      <button disabled={open} onClick={openDialog}>
        Pay now
      </button>

      <dialog
        ref={dialog}
        aria-labelledby="payment-title"
        onClose={() => setOpen(false)}
      >
        <h2 id="payment-title">Complete payment</h2>
        <button type="button" onClick={() => dialog.current?.close()}>
          Close
        </button>
        {open ? (
          <Checkout
            orderId={orderId}
            onCompleted={() => router.visit('/payment-status')}
            onError={handleError}
          />
        ) : null}
      </dialog>

      <p aria-live="polite">{message}</p>
    </>
  )
}
```

When the application dialog closes, reset `open`; React then unmounts the
adapter and releases its controller and subscriptions. Keep the dialog open
while a payment attempt or provider confirmation is in progress.

The `features` prop is optional and controls line-item visibility, post-payment
document links, and whether the payer may replace an attached payment method.

## Handle navigation and payment state

When the page component unmounts during an Inertia visit, the framework adapter
destroys its Checkout instance and removes its subscription. If Checkout lives
inside a persistent layout, remove it when payment collection ends rather than
leaving a completed instance mounted across unrelated pages.

Changing `orderId` or `purchaseIntentId` creates a fresh Checkout instance.
Keep the reference in server-provided page props instead of preserving a stale
value in local component state.

Use the `completed` callback to visit a payment-status route or update the
interface. That callback does not authorize fulfillment. The status route
should have your backend [look up the Order](https://studio.inttegro.com/machine/go/api/orders.md#lookup-an-order) and act on
the current server-side state.

## Related resources

- [React](https://studio.inttegro.com/machine/go/web/react.md), [Vue](https://studio.inttegro.com/machine/go/web/vue.md), and [Svelte](https://studio.inttegro.com/machine/go/web/svelte.md) - Install the
  adapter and follow its native component conventions.
- [JavaScript runtime and loader](https://studio.inttegro.com/machine/go/web/javascript.md) - Review the shared runtime,
  lifecycle contract, CSP, and modal behavior.
- [Web Checkout overview](https://studio.inttegro.com/machine/go/web.md) - Prepare the server and verify payment state.