@inttegro/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Inttegro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# `@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.
+
+```svelte
+<script lang="ts">
+  import { Checkout } from '@inttegro/svelte'
+</script>
+
+<Checkout {orderId} onCompleted={() => location.assign('/complete')} />
+```

package/dist/Checkout.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import {
+    loadInttegro,
+    type CheckoutController,
+    type CheckoutEvent,
+  } from '@inttegro/js'
+  import { untrack } from 'svelte'
+  import type { CheckoutProps } from './types'
+
+  let {
+    appearance,
+    class: className,
+    locale,
+    onCompleted,
+    onError,
+    onEvent,
+    onReady,
+    orderId,
+    timeout,
+    title,
+  }: CheckoutProps = $props()
+
+  let container: HTMLDivElement
+  let checkout = $state<CheckoutController>()
+
+  $effect(() => {
+    const identity = { orderId, timeout, title }
+    if (!container) return
+
+    let active = true
+    let instance: CheckoutController | undefined
+    let unsubscribe: (() => void) | undefined
+
+    void loadInttegro()
+      .then(async (inttegro) => {
+        if (!active || !inttegro) return
+        instance = inttegro.createCheckout(
+          definedOptions({
+            ...identity,
+            appearance: untrack(() => appearance),
+            locale: untrack(() => locale),
+          }),
+        )
+        if (!active) {
+          instance.destroy()
+          return
+        }
+        checkout = instance
+        unsubscribe = instance.onEvent((event) => {
+          onEvent?.(event)
+          if (event.type === 'ready') onReady?.(event)
+          if (event.type === 'completed') onCompleted?.(event)
+          if (event.type === 'error') onError?.(event)
+        })
+        await instance.mount(container)
+      })
+      .catch((error: unknown) => {
+        if (active) {
+          onError?.(
+            error instanceof Error
+              ? error
+              : new Error('Checkout failed to load.'),
+          )
+        }
+      })
+
+    return () => {
+      active = false
+      unsubscribe?.()
+      instance?.destroy()
+      if (checkout === instance) checkout = undefined
+    }
+  })
+
+  $effect(() => {
+    checkout?.update(definedOptions({ appearance, locale }))
+  })
+
+  function definedOptions<Value extends object>(options: Value): Value {
+    return Object.fromEntries(
+      Object.entries(options).filter(([, value]) => value !== undefined),
+    ) as Value
+  }
+</script>
+
+<div bind:this={container} class={className}></div>

package/dist/Checkout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckoutProps } from './types';
+declare const Checkout: import("svelte").Component<CheckoutProps, {}, "">;
+type Checkout = ReturnType<typeof Checkout>;
+export default Checkout;

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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
+ * ```svelte
+ * <script lang="ts">
+ *   import { Checkout } from '@inttegro/svelte'
+ *   let { orderId }: { orderId: string } = $props()
+ * </script>
+ *
+ * <Checkout
+ *   {orderId}
+ *   appearance={{ theme: 'system' }}
+ *   onCompleted={() => location.assign('/orders/complete')}
+ *   onError={reportCheckoutError}
+ * />
+ * ```
+ *
+ * @module @inttegro/svelte
+ */
+export { default as Checkout } from './Checkout.svelte';
+export type { CheckoutProps } from './types';
+export type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme, } from '@inttegro/js';

package/dist/index.js

@@ -0,0 +1,25 @@
+/**
+ * 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
+ * ```svelte
+ * <script lang="ts">
+ *   import { Checkout } from '@inttegro/svelte'
+ *   let { orderId }: { orderId: string } = $props()
+ * </script>
+ *
+ * <Checkout
+ *   {orderId}
+ *   appearance={{ theme: 'system' }}
+ *   onCompleted={() => location.assign('/orders/complete')}
+ *   onError={reportCheckoutError}
+ * />
+ * ```
+ *
+ * @module @inttegro/svelte
+ */
+export { default as Checkout } from './Checkout.svelte';

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+import type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent } from '@inttegro/js';
+/**
+ * Props accepted by the Inttegro {@link Checkout} component.
+ *
+ * `orderId`, `timeout`, and `title` identify a hosted experience; changing one
+ * destroys the current controller and mounts a new one. `appearance` and
+ * `locale` update the current controller in place.
+ *
+ * @category Svelte
+ */
+export interface CheckoutProps {
+    /** Initial and reactive theme preference for hosted Checkout. */
+    appearance?: CheckoutAppearance | undefined;
+    /** CSS class applied to the outer container owned by your Svelte application. */
+    class?: string | undefined;
+    /** Initial and reactive BCP 47 locale preference. */
+    locale?: string | undefined;
+    /**
+     * Called after the successful hosted terminal state. Reconcile the Order on
+     * your server before fulfillment.
+     */
+    onCompleted?: ((event: Extract<CheckoutEvent, {
+        type: 'completed';
+    }>) => void) | undefined;
+    /** Called for loader/mount failures and sanitized hosted errors. */
+    onError?: ((event: CheckoutErrorEvent | Error) => void) | undefined;
+    /** Called for every sanitized lifecycle event. */
+    onEvent?: ((event: CheckoutEvent) => void) | undefined;
+    /** Called once Checkout is initialized and interactive. */
+    onReady?: ((event: Extract<CheckoutEvent, {
+        type: 'ready';
+    }>) => void) | undefined;
+    /** Client-safe reference for the finalized Order being paid. */
+    orderId: string;
+    /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */
+    timeout?: number | undefined;
+    /** Accessible iframe title; defaults to `Checkout`. */
+    title?: string | undefined;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@inttegro/svelte",
+  "version": "0.1.0",
+  "description": "Svelte components for Inttegro hosted workflows",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@inttegro/js": "0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zebodotdev/js.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://studio.inttegro.com/web/svelte",
+  "author": "Inttegro Eng <engineering@inttegro.com> (https://inttegro.com)",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "typedocOptions": {
+    "entryPoints": [
+      "dist/index.d.ts"
+    ],
+    "tsconfig": "typedoc.tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "2.5.8",
+    "svelte": "5.57.0",
+    "svelte-check": "4.7.6",
+    "typescript": "6.0.3"
+  }
+}