Skip to main 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.

Developer preview

This package and the hosted runtime are not yet available for live payments. The installation commands below will work after the preview package is published.

Prerequisites

  • Svelte 5 or newer
  • A backend that creates and finalizes an Inttegro Order
  • The client-safe Order ID returned to your Svelte application

Install the component

npm install @inttegro/svelte

Read the npm setup guide

Render Checkout

Pass the finalized Order ID and callback props to Checkout:

<script lang="ts">
  import {
    Checkout,
    type CheckoutErrorEvent,
    type CheckoutEvent,
  } from '@inttegro/svelte'

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

  function handleCompleted() {
    window.location.assign('/payment-status')
  }

  function handleError(error: CheckoutErrorEvent | Error) {
    message = error instanceof Error ? error.message : error.error.message
  }

  function handleEvent(event: CheckoutEvent) {
    if (event.type === 'paymentAttempt') {
      message = 'Starting your payment…'
    }
  }
</script>

<Checkout
  appearance={{ theme: 'system' }}
  class="checkout"
  locale="en-GH"
  {orderId}
  title="Complete your payment"
  onCompleted={handleCompleted}
  onError={handleError}
  onEvent={handleEvent}
/>
<p aria-live="polite">{message}</p>

The component also accepts timeout. Changing appearance or locale updates the active Checkout. Changing orderId, timeout, or title destroys the old instance and creates a new one.

Handle callback props

PropCalled when
onCompletedCheckout observes payment completion.
onErrorLoading, mounting, or the hosted flow reports an error.
onEventAny privacy-safe lifecycle event is received.
onReadyCheckout is ready for customer interaction.

onError receives an Error for loader or mount failures and a CheckoutErrorEvent for errors reported by the hosted flow. onEvent receives every hosted lifecycle event, including ready, completed, and error.

These are Svelte 5 callback props, not component events, so use onCompleted={handleCompleted} rather than the legacy on: directive. Use callbacks for interface state and telemetry, then have your backend look up the Order before fulfillment.

Use modals, routes, and server rendering

Place Checkout inside the conditional block that owns an application modal. Removing that block destroys the Checkout instance and its subscription. The modal component remains responsible for viewport scrolling, its close policy, and returning focus to the opening control.

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