@inttegro/svelte 0.1.0 → 0.4.0

package/README.md

@@ -11,3 +11,10 @@ does not bundle the payment-collection runtime.
 
 <Checkout {orderId} onCompleted={() => location.assign('/complete')} />
 ```
+
+For a `customer_selected_amount` Buy link, pass `purchaseIntentId` instead of
+`orderId`. This works in both embedded and modal presentations:
+
+```svelte
+<Checkout {purchaseIntentId} presentation="modal" />
+```

package/dist/Checkout.svelte

@@ -3,6 +3,8 @@
     loadInttegro,
     type CheckoutController,
     type CheckoutEvent,
+    type CheckoutOptions,
+    type CheckoutUpdateOptions,
   } from '@inttegro/js'
   import { untrack } from 'svelte'
   import type { CheckoutProps } from './types'
@@ -10,12 +12,16 @@
   let {
     appearance,
     class: className,
+    features,
     locale,
+    onCanceled,
     onCompleted,
     onError,
     onEvent,
     onReady,
     orderId,
+    purchaseIntentId,
+    presentation = 'embedded',
     timeout,
     title,
   }: CheckoutProps = $props()
@@ -23,11 +29,34 @@
   let container: HTMLDivElement
   let checkout = $state<CheckoutController>()
 
+  /** Closes managed modal Checkout when it is open. */
+  export function dismiss() {
+    checkout?.dismiss()
+  }
+
+  /** Moves focus into Checkout when it is ready. */
+  export function focus() {
+    checkout?.focus()
+  }
+
+  /** Applies a new locale or theme to the active Checkout instance. */
+  export function update(options: CheckoutUpdateOptions) {
+    checkout?.update(options)
+  }
+
   $effect(() => {
-    const identity = { orderId, timeout, title }
+    const identity = {
+      features,
+      orderId,
+      purchaseIntentId,
+      presentation,
+      timeout,
+      title,
+    }
     if (!container) return
 
     let active = true
+    let canceled = false
     let instance: CheckoutController | undefined
     let unsubscribe: (() => void) | undefined
 
@@ -36,10 +65,14 @@
         if (!active || !inttegro) return
         instance = inttegro.createCheckout(
           definedOptions({
-            ...identity,
             appearance: untrack(() => appearance),
+            features: identity.features,
             locale: untrack(() => locale),
-          }),
+            orderId: identity.orderId,
+            purchaseIntentId: identity.purchaseIntentId,
+            timeout: identity.timeout,
+            title: identity.title,
+          }) as CheckoutOptions,
         )
         if (!active) {
           instance.destroy()
@@ -48,14 +81,19 @@
         checkout = instance
         unsubscribe = instance.onEvent((event) => {
           onEvent?.(event)
+          if (event.type === 'canceled') {
+            canceled = true
+            onCanceled?.(event)
+          }
           if (event.type === 'ready') onReady?.(event)
           if (event.type === 'completed') onCompleted?.(event)
           if (event.type === 'error') onError?.(event)
         })
-        await instance.mount(container)
+        if (identity.presentation === 'modal') await instance.present()
+        else await instance.mount(container)
       })
       .catch((error: unknown) => {
-        if (active) {
+        if (active && !canceled) {
           onError?.(
             error instanceof Error
               ? error

package/dist/Checkout.svelte.d.ts

@@ -1,4 +1,9 @@
+import { type CheckoutUpdateOptions } from '@inttegro/js';
 import type { CheckoutProps } from './types';
-declare const Checkout: import("svelte").Component<CheckoutProps, {}, "">;
+declare const Checkout: import("svelte").Component<CheckoutProps, {
+    dismiss: () => void;
+    focus: () => void;
+    update: (options: CheckoutUpdateOptions) => void;
+}, "">;
 type Checkout = ReturnType<typeof Checkout>;
 export default Checkout;

package/dist/index.d.ts

@@ -14,6 +14,7 @@
  *
  * <Checkout
  *   {orderId}
+ *   presentation="modal"
  *   appearance={{ theme: 'system' }}
  *   onCompleted={() => location.assign('/orders/complete')}
  *   onError={reportCheckoutError}
@@ -23,5 +24,5 @@
  * @module @inttegro/svelte
  */
 export { default as Checkout } from './Checkout.svelte';
-export type { CheckoutProps } from './types';
-export type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme, } from '@inttegro/js';
+export type { CheckoutProps, CheckoutPropsBase } from './types';
+export type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation, CheckoutTheme, } from '@inttegro/js';

package/dist/index.js

@@ -14,6 +14,7 @@
  *
  * <Checkout
  *   {orderId}
+ *   presentation="modal"
  *   appearance={{ theme: 'system' }}
  *   onCompleted={() => location.assign('/orders/complete')}
  *   onError={reportCheckoutError}

package/dist/types.d.ts

@@ -1,20 +1,27 @@
-import type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent } from '@inttegro/js';
+import type { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation } 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.
+ * `features`, the Checkout reference, `presentation`, `timeout`, and `title`
+ * identify a hosted experience; changing one destroys the current controller
+ * and mounts or presents a new one. `appearance` and `locale` update the
+ * current controller in place.
  *
  * @category Svelte
  */
-export interface CheckoutProps {
+export interface CheckoutPropsBase {
     /** Initial and reactive theme preference for hosted Checkout. */
     appearance?: CheckoutAppearance | undefined;
+    /** Hosted Checkout content and actions. Changing it replaces the controller. */
+    features?: CheckoutFeatures | 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 when a payer dismisses managed modal Checkout before completion. */
+    onCanceled?: ((event: Extract<CheckoutEvent, {
+        type: 'canceled';
+    }>) => void) | undefined;
     /**
      * Called after the successful hosted terminal state. Reconcile the Order on
      * your server before fulfillment.
@@ -30,10 +37,17 @@ export interface CheckoutProps {
     onReady?: ((event: Extract<CheckoutEvent, {
         type: 'ready';
     }>) => void) | undefined;
-    /** Client-safe reference for the finalized Order being paid. */
-    orderId: string;
+    /** Displays Checkout inline by default or in an Inttegro-managed modal. */
+    presentation?: CheckoutPresentation | undefined;
     /** 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;
 }
+export type CheckoutProps = CheckoutPropsBase & ({
+    orderId: string;
+    purchaseIntentId?: never;
+} | {
+    orderId?: never;
+    purchaseIntentId: string;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inttegro/svelte",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Svelte components for Inttegro hosted workflows",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -26,14 +26,14 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@inttegro/js": "0.1.0"
+    "@inttegro/js": "0.4.0"
   },
   "peerDependencies": {
     "svelte": ">=5"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zebodotdev/js.git",
+    "url": "git+https://github.com/inttegro/js.git",
     "directory": "packages/svelte"
   },
   "homepage": "https://studio.inttegro.com/web/svelte",