---
title: "Svelte"
description: "Integrate Inttegro Checkout as embedded content or inside an application-owned dialog in Svelte."
canonical: "https://studio.inttegro.com/web/svelte"
format: inttegro-machine-docs/v1
language: "Java"
sdk_version: "v8.3.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/java/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: 586
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: 2454
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Use the Svelte Checkout component with a backend-created Order ID; callback props are UI signals, and server lookup decides the paid outcome.

### Five questions

#### Q1. What must the Svelte page receive from its backend?

Only the finalized Order ID needed by Checkout. Keep API credentials, customer payment details, and decisions about line items and amount in the trusted backend; [Orders](https://studio.inttegro.com/machine/java/api/orders.md#create-an-order) defines creation and [web setup](https://studio.inttegro.com/machine/java/web.md) describes the handoff.

#### Q2. Which package and presentation does Svelte use?

Install @inttegro/svelte and render its documented Checkout component for embedded or modal presentation; a hosted-page handoff does not mount the component. Choose one path in [the Svelte guide](https://studio.inttegro.com/machine/java/web/svelte.md#choose-and-render-a-presentation) before wiring lifecycle events.

#### Q3. What does the completed event mean?

Use onCompleted for UI or navigation, then ask the backend to [look up the Order](https://studio.inttegro.com/machine/java/api/orders.md#lookup-an-order) before fulfillment. Handle the documented error and other lifecycle signals separately; [events](https://studio.inttegro.com/machine/java/web/svelte.md#handle-callback-props) are not a replacement for server state.

#### Q4. How do updates and server rendering affect Checkout?

A changed Order ID, features, timeout, or title creates a new Checkout instance; supported appearance/locale changes can update an active one. An effect mounts Checkout after client rendering, leaving an empty host during server rendering. See [routes and server rendering](https://studio.inttegro.com/machine/java/web/svelte.md#use-routes-and-server-rendering).

#### Q5. What can an integration agent verify first?

With an authenticated MCP connection, [design_integration](https://studio.inttegro.com/machine/java/inttegro-mcp/tools.md#design_integration) can plan the backend/browser boundary and [check_integration_readiness](https://studio.inttegro.com/machine/java/inttegro-mcp/tools.md#check_integration_readiness) can audit declared secret, idempotency, and lookup controls. Compile the Svelte example and test success, cancellation, and failure with disposable orders.

## Document content

# Inttegro for Svelte

Use `@inttegro/svelte` to render Inttegro-hosted Checkout as a Svelte 5
component. The adapter uses typed callback props and destroys Checkout when the
component leaves the page.

## Prerequisites

- Svelte 5 or newer
- A backend that [creates](https://studio.inttegro.com/machine/java/api/orders.md#create-an-order) and
  [finalizes](https://studio.inttegro.com/machine/java/api/orders.md#finalize-an-order) an Inttegro Order
- A client-safe finalized Order ID or Purchase Intent ID

## Install the component

> Web Sdk Install Tabs is interactive content. Use the canonical page to view it.

## Choose and render a presentation

The [NestJS live demo](https://nestjs-demo.inttegro.dev) uses Svelte 5 and
`@inttegro/svelte` for both presentations while keeping pricing and Order
creation on the server; its [released Svelte component](https://github.com/inttegro/inttegro-demos/blob/nestjs-v1.8.3/nestjs/client/CheckoutFlow.svelte)
shows the complete boundary. Compare the presentations below, then use the
matching implementation that follows. 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.

Both presentations use the same `Checkout` component and finalized Order.
Svelte 5 uses callback props such as `onCompleted`, not the legacy `on:` event
directive.

### Embedded

Choose embedded Checkout for a dedicated payment route, checkout step, or
invoice layout where the form should remain visible. Your Svelte markup owns
the component's position and surrounding content; Inttegro owns the hosted
payment surface inside it.

```svelte
<script lang="ts">
  import { Checkout } from '@inttegro/svelte'

  let { orderId }: { orderId: string } = $props()
  let message = $state('')

  function handleError(error: Error) {
    message = error.message
  }
</script>

<main>
  <h1>Complete your order</h1>
  <section aria-label="Payment">
    <Checkout
      appearance={{ theme: 'system' }}
      locale="en-GH"
      {orderId}
      onCompleted={() => location.assign('/payment-status')}
      onError={handleError}
    />
  </section>
  <p aria-live="polite">{message}</p>
</main>
```

Keep `Checkout` mounted while payment or provider confirmation is in progress.
The `class` prop styles the outer element; merchant CSS does not reach the
hosted controls. Let
Checkout report its own height; avoid fixed heights or overflow clipping on the
payment region.

### Modal

Choose a modal when payment starts from a button and the current page should
remain mounted underneath. Your application owns the dialog, trigger, close
control, focus restoration, and scrolling. Put the same `Checkout` component
in an `{#if}` block so it exists only while the dialog is open.

```svelte
<script lang="ts">
  import { Checkout } from '@inttegro/svelte'

  let { orderId }: { orderId: string } = $props()
  let dialog: HTMLDialogElement
  let open = $state(false)
  let message = $state('')

  function openDialog() {
    open = true
    dialog.showModal()
  }

  function handleError(error: Error) {
    message = error.message
  }
</script>

<button disabled={open} onclick={openDialog}>Pay now</button>
<dialog
  bind:this={dialog}
  aria-labelledby="payment-title"
  onclose={() => (open = false)}
>
  <h2 id="payment-title">Complete payment</h2>
  <button type="button" onclick={() => dialog.close()}>Close</button>
  {#if open}
    <Checkout
      appearance={{ theme: 'system' }}
      {orderId}
      onCompleted={() => location.assign('/payment-status')}
      onError={handleError}
    />
  {/if}
</dialog>
<p aria-live="polite">{message}</p>
```

Closing the application dialog resets `open`; Svelte then unmounts `Checkout`
and releases its controller and subscriptions. Keep the dialog open while a
payment attempt or provider confirmation is in progress.

## Start from a Buy link

Pass a Buy link's public Purchase Intent instead of creating a finalized Order:

```svelte
<Checkout {purchaseIntentId} />
```

Use the same prop with `presentation="modal"` for the managed modal experience.
Checkout renders the full Buy experience and creates the finalized Order only
after the buyer continues. Payment then continues in the same component.
Provide either `orderId` or `purchaseIntentId`, never both.

For hosted-page presentation, do not mount the Svelte component. Submit to your
backend and have it return a `303` redirect to the hosted Checkout URL for the
finalized Order, as the NestJS demo does.

The component also accepts `features`, `timeout`, and `title`. `features`
controls line-item visibility, post-payment invoice and receipt actions, and
whether an attached payment method can be replaced. Changing `appearance` or
`locale` updates the active Checkout. Changing `features`, `orderId`,
`purchaseIntentId`, `timeout`, or `title` creates a new instance.

## Handle callback props

| Prop          | Called when                                             |
| ------------- | ------------------------------------------------------- |
| `onCanceled`  | The payer leaves managed modal Checkout.                |
| `onCompleted` | Checkout reaches its successful terminal experience.    |
| `onError`     | Loading or mounting fails before Checkout can continue. |
| `onEvent`     | Any privacy-safe lifecycle event is received.           |
| `onFailed`    | Checkout reaches a terminal failure.                    |
| `onReady`     | Checkout is ready for customer interaction.             |

`onError` receives an `Error` for loader or mount failures. `onEvent` receives
the canonical Checkout lifecycle, including recoverable
`paymentAttemptFailed` events and the terminal `completed`, `canceled`, and
`failed` events. Order-backed events carry the full client-safe Order.

Use callbacks for interface state and telemetry, then have your backend [look
up the Order](https://studio.inttegro.com/machine/java/api/orders.md#lookup-an-order) before fulfillment.

## Use routes and server rendering

The adapter initializes Checkout in an effect. With server rendering, Svelte
renders the empty host element and mounts the hosted experience after client
hydration.

## Related resources

- [JavaScript runtime and loader](https://studio.inttegro.com/machine/java/web/javascript.md) - Review options, events,
  CSP, and modal behavior.
- [Inertia](https://studio.inttegro.com/machine/java/web/inertia.md) - Use this component with an Inertia Svelte frontend.
- [Web Checkout overview](https://studio.inttegro.com/machine/java/web.md) - Prepare the server and verify payment state.