Module @inttegro/svelte

Svelte component adapter for Inttegro-hosted Checkout.

Checkout loads the runtime in a browser effect and destroys its controller when the component leaves the page. Keep it mounted while a payment attempt or external confirmation is pending.

Example

<script lang="ts">
  import { Checkout } from '@inttegro/svelte'
  let { orderId }: { orderId: string } = $props()
</script>

<Checkout
  {orderId}
  presentation="modal"
  appearance={{ theme: 'system' }}
  onCompleted={() => location.assign('/orders/complete')}
  onError={reportCheckoutError}
/>

`@inttegro/svelte`

Svelte adapter for Inttegro hosted workflows. The component automatically uses @inttegro/js to load the executable runtime from Inttegro's fixed origin; it does not bundle the payment-collection runtime.

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

<Checkout {orderId} onCompleted={() => location.assign('/complete')} />

For a Buy link, pass purchaseIntentId instead of orderId. Fixed pricing continues directly to payment; customer-selected pricing renders the amount picker first. This works in both embedded and modal presentations:

<Checkout {purchaseIntentId} presentation="modal" />

Configuration

CheckoutAppearance
CheckoutTheme

Events

CheckoutEvent

Other

CheckoutFailedEvent
CheckoutFeatures
CheckoutOrder
Checkout
CheckoutPresentation
CheckoutProps
Checkout

Svelte

CheckoutPropsBase