@inttegro/react 0.2.0 → 0.5.1

package/README.md

@@ -16,3 +16,11 @@ export function Payment({ orderId }: { orderId: string }) {
   )
 }
 ```
+
+Pass `purchaseIntentId` instead of `orderId` when the Buy link uses a
+`customer_selected_amount` price. The same component renders the amount picker
+before continuing to Checkout:
+
+```tsx
+<Checkout purchaseIntentId={purchaseIntentId} presentation="modal" />
+```

package/dist/index.cjs

@@ -34,29 +34,48 @@ var Checkout = (0, import_react.forwardRef)(
     className,
     features,
     locale,
+    onCanceled,
     onCompleted,
+    onFailed,
     onError,
     onEvent,
     onReady,
     orderId,
+    purchaseIntentId,
+    presentation = "embedded",
     style,
     timeout,
     title
   }, forwardedRef) {
     const containerRef = (0, import_react.useRef)(null);
     const checkoutRef = (0, import_react.useRef)(null);
-    const callbacksRef = (0, import_react.useRef)({ onCompleted, onError, onEvent, onReady });
+    const callbacksRef = (0, import_react.useRef)({
+      onCanceled,
+      onCompleted,
+      onFailed,
+      onError,
+      onEvent,
+      onReady
+    });
     const updateOptionsRef = (0, import_react.useRef)({ appearance, locale });
     const hasFeatureOverrides = features !== void 0;
     const showLineItems = features?.showLineItems;
     const showInvoiceDownload = features?.showInvoiceDownload;
     const showReceiptDownload = features?.showReceiptDownload;
     const allowPaymentMethodChange = features?.allowPaymentMethodChange;
-    callbacksRef.current = { onCompleted, onError, onEvent, onReady };
+    callbacksRef.current = {
+      onCanceled,
+      onCompleted,
+      onFailed,
+      onError,
+      onEvent,
+      onReady
+    };
     updateOptionsRef.current = { appearance, locale };
     (0, import_react.useImperativeHandle)(
       forwardedRef,
       () => ({
+        dismiss: () => checkoutRef.current?.dismiss(),
         focus: () => checkoutRef.current?.focus(),
         update: (options) => checkoutRef.current?.update(options)
       }),
@@ -64,8 +83,10 @@ var Checkout = (0, import_react.forwardRef)(
     );
     (0, import_react.useEffect)(() => {
       const target = containerRef.current;
-      if (!target) return;
+      if (presentation === "embedded" && !target) return;
       let active = true;
+      let canceled = false;
+      let failed = false;
       let checkout;
       let unsubscribe;
       void (0, import_js.loadInttegro)().then(async (inttegro) => {
@@ -80,6 +101,7 @@ var Checkout = (0, import_react.forwardRef)(
               showReceiptDownload
             }) : void 0,
             orderId,
+            purchaseIntentId,
             timeout,
             title
           })
@@ -92,14 +114,23 @@ var Checkout = (0, import_react.forwardRef)(
         checkoutRef.current = instance;
         unsubscribe = instance.onEvent((event) => {
           callbacksRef.current.onEvent?.(event);
+          if (event.type === "canceled") {
+            canceled = true;
+            callbacksRef.current.onCanceled?.(event);
+          }
           if (event.type === "ready") callbacksRef.current.onReady?.(event);
           if (event.type === "completed")
             callbacksRef.current.onCompleted?.(event);
-          if (event.type === "error") callbacksRef.current.onError?.(event);
+          if (event.type === "failed") {
+            failed = true;
+            callbacksRef.current.onFailed?.(event);
+          }
         });
-        await instance.mount(target);
+        if (presentation === "modal") await instance.present();
+        else await instance.mount(target);
       }).catch((error) => {
-        if (active) callbacksRef.current.onError?.(asError(error));
+        if (active && !canceled && !failed)
+          callbacksRef.current.onError?.(asError(error));
       });
       return () => {
         active = false;
@@ -111,6 +142,8 @@ var Checkout = (0, import_react.forwardRef)(
       allowPaymentMethodChange,
       hasFeatureOverrides,
       orderId,
+      purchaseIntentId,
+      presentation,
       showInvoiceDownload,
       showLineItems,
       showReceiptDownload,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Checkout.tsx"],"sourcesContent":["/**\n * React component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/react\n */\nexport { Checkout, type CheckoutHandle, type CheckoutProps } from './Checkout'\nexport type {\n  CheckoutAppearance,\n  CheckoutErrorEvent,\n  CheckoutEvent,\n  CheckoutFeatures,\n  CheckoutTheme,\n} from '@inttegro/js'\n","import {\n  loadInttegro,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, `orderId`, `timeout`, and `title` identify the embedded\n * experience. Changing one replaces the underlying controller. `appearance`\n * and `locale` update the existing controller without discarding payer\n * progress.\n *\n * @category React\n */\nexport interface CheckoutProps extends CheckoutOptions {\n  /** CSS class applied to the outer container owned by your React application. */\n  className?: string\n  /** Inline styles applied to the outer container, never to controls inside Checkout. */\n  style?: CSSProperties\n  /**\n   * Called after Checkout reports its successful terminal state.\n   * Use this to navigate or refresh server-owned Order state, not as the sole\n   * signal for fulfillment.\n   */\n  onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n  /**\n   * Called for loader/mount errors and sanitized hosted errors.\n   * Use `error instanceof InttegroCheckoutError` or check for an event `type`\n   * before reading framework-independent details.\n   */\n  onError?: (event: CheckoutErrorEvent | Error) => void\n  /** Called for every sanitized lifecycle event, including events above. */\n  onEvent?: (event: CheckoutEvent) => void\n  /** Called once the iframe is interactive and its mount promise has resolved. */\n  onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n  /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when the controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for `orderId`, and\n * destroys it during cleanup. Server rendering is safe because no runtime is\n * loaded until the effect runs in a browser.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted\n * experience. Changing `appearance` or `locale` updates the active experience\n * in place. Keep the component mounted while a payment is pending or\n * confirmation is in progress.\n *\n * @example Handle success, failure, and focus in a dialog\n * ```tsx\n * import { useRef } from 'react'\n * import { Checkout, type CheckoutHandle } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n *   const checkout = useRef<CheckoutHandle>(null)\n *\n *   return (\n *     <dialog open onTransitionEnd={() => checkout.current?.focus()}>\n *       <Checkout\n *         ref={checkout}\n *         orderId={orderId}\n *         appearance={{ theme: 'system' }}\n *         onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n *         onError={(error) => reportCheckoutError(error)}\n *       />\n *     </dialog>\n *   )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n  function Checkout(\n    {\n      appearance,\n      className,\n      features,\n      locale,\n      onCompleted,\n      onError,\n      onEvent,\n      onReady,\n      orderId,\n      style,\n      timeout,\n      title,\n    },\n    forwardedRef,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const checkoutRef = useRef<CheckoutController | null>(null)\n    const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady })\n    const updateOptionsRef = useRef({ appearance, locale })\n    const hasFeatureOverrides = features !== undefined\n    const showLineItems = features?.showLineItems\n    const showInvoiceDownload = features?.showInvoiceDownload\n    const showReceiptDownload = features?.showReceiptDownload\n    const allowPaymentMethodChange = features?.allowPaymentMethodChange\n    callbacksRef.current = { onCompleted, onError, onEvent, onReady }\n    updateOptionsRef.current = { appearance, locale }\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus: () => checkoutRef.current?.focus(),\n        update: (options) => checkoutRef.current?.update(options),\n      }),\n      [],\n    )\n\n    useEffect(() => {\n      const target = containerRef.current\n      if (!target) return\n\n      let active = true\n      let checkout: CheckoutController | undefined\n      let unsubscribe: (() => void) | undefined\n\n      void loadInttegro()\n        .then(async (inttegro) => {\n          if (!active || !inttegro) return\n          const instance = inttegro.createCheckout(\n            definedOptions({\n              ...updateOptionsRef.current,\n              features: hasFeatureOverrides\n                ? definedOptions({\n                    allowPaymentMethodChange,\n                    showInvoiceDownload,\n                    showLineItems,\n                    showReceiptDownload,\n                  })\n                : undefined,\n              orderId,\n              timeout,\n              title,\n            }),\n          )\n          if (!active) {\n            instance.destroy()\n            return\n          }\n          checkout = instance\n          checkoutRef.current = instance\n          unsubscribe = instance.onEvent((event) => {\n            callbacksRef.current.onEvent?.(event)\n            if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n            if (event.type === 'completed')\n              callbacksRef.current.onCompleted?.(event)\n            if (event.type === 'error') callbacksRef.current.onError?.(event)\n          })\n          await instance.mount(target)\n        })\n        .catch((error: unknown) => {\n          if (active) callbacksRef.current.onError?.(asError(error))\n        })\n\n      return () => {\n        active = false\n        unsubscribe?.()\n        checkout?.destroy()\n        if (checkoutRef.current === checkout) checkoutRef.current = null\n      }\n    }, [\n      allowPaymentMethodChange,\n      hasFeatureOverrides,\n      orderId,\n      showInvoiceDownload,\n      showLineItems,\n      showReceiptDownload,\n      timeout,\n      title,\n    ])\n\n    useEffect(() => {\n      checkoutRef.current?.update(definedOptions({ appearance, locale }))\n    }, [appearance, locale])\n\n    return <div className={className} ref={containerRef} style={style} />\n  },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as Value\n}\n\nfunction asError(error: unknown): Error {\n  return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":"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","names":["Checkout"]}
+{"version":3,"sources":["../src/index.ts","../src/Checkout.tsx"],"sourcesContent":["/**\n * React component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/react\n */\nexport { Checkout, type CheckoutHandle, type CheckoutProps } from './Checkout'\nexport type {\n  CheckoutAppearance,\n  CheckoutEvent,\n  CheckoutFailedEvent,\n  CheckoutOrder,\n  CheckoutFeatures,\n  CheckoutPresentation,\n  CheckoutTheme,\n} from '@inttegro/js'\n","import {\n  loadInttegro,\n  type CheckoutController,\n  type CheckoutEvent,\n  type CheckoutOptions,\n  type CheckoutPresentation,\n} from '@inttegro/js'\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, the Checkout reference, `presentation`, `timeout`, and `title`\n * identify the experience. Changing one replaces the underlying controller.\n * `appearance` and `locale` update the existing controller without discarding\n * payer progress.\n *\n * @category React\n */\nexport type CheckoutProps = CheckoutOptions & {\n  /** CSS class applied to the outer container owned by your React application. */\n  className?: string\n  /** Inline styles applied to the outer container, never to controls inside Checkout. */\n  style?: CSSProperties\n  /** Displays Checkout inline by default or in an Inttegro-managed modal. */\n  presentation?: CheckoutPresentation\n  /** Called when a payer dismisses managed modal Checkout before completion. */\n  onCanceled?: (event: Extract<CheckoutEvent, { type: 'canceled' }>) => void\n  /**\n   * Called after Checkout reports its successful terminal state.\n   * Use this to navigate or refresh server-owned Order state, not as the sole\n   * signal for fulfillment.\n   */\n  onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n  /** Called when Checkout reaches a terminal failure state. */\n  onFailed?: (event: Extract<CheckoutEvent, { type: 'failed' }>) => void\n  /** Called for loader or mount errors. */\n  onError?: (error: Error) => void\n  /** Called for every sanitized lifecycle event, including events above. */\n  onEvent?: (event: CheckoutEvent) => void\n  /** Called once the iframe is interactive and its mount promise has resolved. */\n  onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n  /** Closes managed modal Checkout when it is open. */\n  dismiss(): void\n  /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when the controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Displays Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for an `orderId` or\n * `purchaseIntentId`, and destroys it during cleanup. Server rendering is safe\n * because no runtime is loaded until the effect runs in a browser.\n *\n * Changing `features`, the Checkout reference, `presentation`, `timeout`, or\n * `title` starts a fresh hosted experience. Changing `appearance` or `locale`\n * updates the active experience in place. Keep the component mounted while a\n * payment is pending or confirmation is in progress.\n *\n * @example Present Checkout without building a dialog\n * ```tsx\n * import { Checkout } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n *   return (\n *     <Checkout\n *       orderId={orderId}\n *       presentation=\"modal\"\n *       appearance={{ theme: 'system' }}\n *       onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n *       onError={(error) => reportCheckoutError(error)}\n *     />\n *   )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n  function Checkout(\n    {\n      appearance,\n      className,\n      features,\n      locale,\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n      orderId,\n      purchaseIntentId,\n      presentation = 'embedded',\n      style,\n      timeout,\n      title,\n    },\n    forwardedRef,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const checkoutRef = useRef<CheckoutController | null>(null)\n    const callbacksRef = useRef({\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n    })\n    const updateOptionsRef = useRef({ appearance, locale })\n    const hasFeatureOverrides = features !== undefined\n    const showLineItems = features?.showLineItems\n    const showInvoiceDownload = features?.showInvoiceDownload\n    const showReceiptDownload = features?.showReceiptDownload\n    const allowPaymentMethodChange = features?.allowPaymentMethodChange\n    callbacksRef.current = {\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n    }\n    updateOptionsRef.current = { appearance, locale }\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        dismiss: () => checkoutRef.current?.dismiss(),\n        focus: () => checkoutRef.current?.focus(),\n        update: (options) => checkoutRef.current?.update(options),\n      }),\n      [],\n    )\n\n    useEffect(() => {\n      const target = containerRef.current\n      if (presentation === 'embedded' && !target) return\n\n      let active = true\n      let canceled = false\n      let failed = false\n      let checkout: CheckoutController | undefined\n      let unsubscribe: (() => void) | undefined\n\n      void loadInttegro()\n        .then(async (inttegro) => {\n          if (!active || !inttegro) return\n          const instance = inttegro.createCheckout(\n            definedOptions({\n              ...updateOptionsRef.current,\n              features: hasFeatureOverrides\n                ? definedOptions({\n                    allowPaymentMethodChange,\n                    showInvoiceDownload,\n                    showLineItems,\n                    showReceiptDownload,\n                  })\n                : undefined,\n              orderId,\n              purchaseIntentId,\n              timeout,\n              title,\n            }) as CheckoutOptions,\n          )\n          if (!active) {\n            instance.destroy()\n            return\n          }\n          checkout = instance\n          checkoutRef.current = instance\n          unsubscribe = instance.onEvent((event) => {\n            callbacksRef.current.onEvent?.(event)\n            if (event.type === 'canceled') {\n              canceled = true\n              callbacksRef.current.onCanceled?.(event)\n            }\n            if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n            if (event.type === 'completed')\n              callbacksRef.current.onCompleted?.(event)\n            if (event.type === 'failed') {\n              failed = true\n              callbacksRef.current.onFailed?.(event)\n            }\n          })\n          if (presentation === 'modal') await instance.present()\n          else await instance.mount(target!)\n        })\n        .catch((error: unknown) => {\n          if (active && !canceled && !failed)\n            callbacksRef.current.onError?.(asError(error))\n        })\n\n      return () => {\n        active = false\n        unsubscribe?.()\n        checkout?.destroy()\n        if (checkoutRef.current === checkout) checkoutRef.current = null\n      }\n    }, [\n      allowPaymentMethodChange,\n      hasFeatureOverrides,\n      orderId,\n      purchaseIntentId,\n      presentation,\n      showInvoiceDownload,\n      showLineItems,\n      showReceiptDownload,\n      timeout,\n      title,\n    ])\n\n    useEffect(() => {\n      checkoutRef.current?.update(definedOptions({ appearance, locale }))\n    }, [appearance, locale])\n\n    return <div className={className} ref={containerRef} style={style} />\n  },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as Value\n}\n\nfunction asError(error: unknown): Error {\n  return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":"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","names":["Checkout"]}

package/dist/index.d.cts

@@ -1,23 +1,29 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
-import { CheckoutOptions, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
+import { CheckoutOptions, CheckoutPresentation, CheckoutEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutEvent, CheckoutFailedEvent, CheckoutFeatures, CheckoutOrder, CheckoutPresentation, CheckoutTheme } from '@inttegro/js';
 
 /**
  * Props for {@link Checkout}.
  *
- * `features`, `orderId`, `timeout`, and `title` identify the embedded
- * experience. Changing one replaces the underlying controller. `appearance`
- * and `locale` update the existing controller without discarding payer
- * progress.
+ * `features`, the Checkout reference, `presentation`, `timeout`, and `title`
+ * identify the experience. Changing one replaces the underlying controller.
+ * `appearance` and `locale` update the existing controller without discarding
+ * payer progress.
  *
  * @category React
  */
-interface CheckoutProps extends CheckoutOptions {
+type CheckoutProps = CheckoutOptions & {
     /** CSS class applied to the outer container owned by your React application. */
     className?: string;
     /** Inline styles applied to the outer container, never to controls inside Checkout. */
     style?: CSSProperties;
+    /** Displays Checkout inline by default or in an Inttegro-managed modal. */
+    presentation?: CheckoutPresentation;
+    /** Called when a payer dismisses managed modal Checkout before completion. */
+    onCanceled?: (event: Extract<CheckoutEvent, {
+        type: 'canceled';
+    }>) => void;
     /**
      * Called after Checkout reports its successful terminal state.
      * Use this to navigate or refresh server-owned Order state, not as the sole
@@ -26,19 +32,19 @@ interface CheckoutProps extends CheckoutOptions {
     onCompleted?: (event: Extract<CheckoutEvent, {
         type: 'completed';
     }>) => void;
-    /**
-     * Called for loader/mount errors and sanitized hosted errors.
-     * Use `error instanceof InttegroCheckoutError` or check for an event `type`
-     * before reading framework-independent details.
-     */
-    onError?: (event: CheckoutErrorEvent | Error) => void;
+    /** Called when Checkout reaches a terminal failure state. */
+    onFailed?: (event: Extract<CheckoutEvent, {
+        type: 'failed';
+    }>) => void;
+    /** Called for loader or mount errors. */
+    onError?: (error: Error) => void;
     /** Called for every sanitized lifecycle event, including events above. */
     onEvent?: (event: CheckoutEvent) => void;
     /** Called once the iframe is interactive and its mount promise has resolved. */
     onReady?: (event: Extract<CheckoutEvent, {
         type: 'ready';
     }>) => void;
-}
+};
 /**
  * Imperative operations exposed by {@link Checkout} through a React ref.
  *
@@ -48,42 +54,39 @@ interface CheckoutProps extends CheckoutOptions {
  * @category React
  */
 interface CheckoutHandle {
+    /** Closes managed modal Checkout when it is open. */
+    dismiss(): void;
     /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */
     focus(): void;
     /** Applies a new locale or theme when the controller exists. */
     update(options: Parameters<CheckoutController['update']>[0]): void;
 }
 /**
- * Embeds Inttegro-hosted Checkout in a React application.
+ * Displays Inttegro-hosted Checkout in a React application.
  *
  * The component renders an empty `div`, loads the executable runtime from
- * Inttegro's fixed origin after mount, creates a controller for `orderId`, and
- * destroys it during cleanup. Server rendering is safe because no runtime is
- * loaded until the effect runs in a browser.
+ * Inttegro's fixed origin after mount, creates a controller for an `orderId` or
+ * `purchaseIntentId`, and destroys it during cleanup. Server rendering is safe
+ * because no runtime is loaded until the effect runs in a browser.
  *
- * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted
- * experience. Changing `appearance` or `locale` updates the active experience
- * in place. Keep the component mounted while a payment is pending or
- * confirmation is in progress.
+ * Changing `features`, the Checkout reference, `presentation`, `timeout`, or
+ * `title` starts a fresh hosted experience. Changing `appearance` or `locale`
+ * updates the active experience in place. Keep the component mounted while a
+ * payment is pending or confirmation is in progress.
  *
- * @example Handle success, failure, and focus in a dialog
+ * @example Present Checkout without building a dialog
  * ```tsx
- * import { useRef } from 'react'
- * import { Checkout, type CheckoutHandle } from '@inttegro/react'
+ * import { Checkout } from '@inttegro/react'
  *
  * function Payment({ orderId }: { orderId: string }) {
- *   const checkout = useRef<CheckoutHandle>(null)
- *
  *   return (
- *     <dialog open onTransitionEnd={() => checkout.current?.focus()}>
- *       <Checkout
- *         ref={checkout}
- *         orderId={orderId}
- *         appearance={{ theme: 'system' }}
- *         onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
- *         onError={(error) => reportCheckoutError(error)}
- *       />
- *     </dialog>
+ *     <Checkout
+ *       orderId={orderId}
+ *       presentation="modal"
+ *       appearance={{ theme: 'system' }}
+ *       onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
+ *       onError={(error) => reportCheckoutError(error)}
+ *     />
  *   )
  * }
  * ```

package/dist/index.d.ts

@@ -1,23 +1,29 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
-import { CheckoutOptions, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
+import { CheckoutOptions, CheckoutPresentation, CheckoutEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutEvent, CheckoutFailedEvent, CheckoutFeatures, CheckoutOrder, CheckoutPresentation, CheckoutTheme } from '@inttegro/js';
 
 /**
  * Props for {@link Checkout}.
  *
- * `features`, `orderId`, `timeout`, and `title` identify the embedded
- * experience. Changing one replaces the underlying controller. `appearance`
- * and `locale` update the existing controller without discarding payer
- * progress.
+ * `features`, the Checkout reference, `presentation`, `timeout`, and `title`
+ * identify the experience. Changing one replaces the underlying controller.
+ * `appearance` and `locale` update the existing controller without discarding
+ * payer progress.
  *
  * @category React
  */
-interface CheckoutProps extends CheckoutOptions {
+type CheckoutProps = CheckoutOptions & {
     /** CSS class applied to the outer container owned by your React application. */
     className?: string;
     /** Inline styles applied to the outer container, never to controls inside Checkout. */
     style?: CSSProperties;
+    /** Displays Checkout inline by default or in an Inttegro-managed modal. */
+    presentation?: CheckoutPresentation;
+    /** Called when a payer dismisses managed modal Checkout before completion. */
+    onCanceled?: (event: Extract<CheckoutEvent, {
+        type: 'canceled';
+    }>) => void;
     /**
      * Called after Checkout reports its successful terminal state.
      * Use this to navigate or refresh server-owned Order state, not as the sole
@@ -26,19 +32,19 @@ interface CheckoutProps extends CheckoutOptions {
     onCompleted?: (event: Extract<CheckoutEvent, {
         type: 'completed';
     }>) => void;
-    /**
-     * Called for loader/mount errors and sanitized hosted errors.
-     * Use `error instanceof InttegroCheckoutError` or check for an event `type`
-     * before reading framework-independent details.
-     */
-    onError?: (event: CheckoutErrorEvent | Error) => void;
+    /** Called when Checkout reaches a terminal failure state. */
+    onFailed?: (event: Extract<CheckoutEvent, {
+        type: 'failed';
+    }>) => void;
+    /** Called for loader or mount errors. */
+    onError?: (error: Error) => void;
     /** Called for every sanitized lifecycle event, including events above. */
     onEvent?: (event: CheckoutEvent) => void;
     /** Called once the iframe is interactive and its mount promise has resolved. */
     onReady?: (event: Extract<CheckoutEvent, {
         type: 'ready';
     }>) => void;
-}
+};
 /**
  * Imperative operations exposed by {@link Checkout} through a React ref.
  *
@@ -48,42 +54,39 @@ interface CheckoutProps extends CheckoutOptions {
  * @category React
  */
 interface CheckoutHandle {
+    /** Closes managed modal Checkout when it is open. */
+    dismiss(): void;
     /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */
     focus(): void;
     /** Applies a new locale or theme when the controller exists. */
     update(options: Parameters<CheckoutController['update']>[0]): void;
 }
 /**
- * Embeds Inttegro-hosted Checkout in a React application.
+ * Displays Inttegro-hosted Checkout in a React application.
  *
  * The component renders an empty `div`, loads the executable runtime from
- * Inttegro's fixed origin after mount, creates a controller for `orderId`, and
- * destroys it during cleanup. Server rendering is safe because no runtime is
- * loaded until the effect runs in a browser.
+ * Inttegro's fixed origin after mount, creates a controller for an `orderId` or
+ * `purchaseIntentId`, and destroys it during cleanup. Server rendering is safe
+ * because no runtime is loaded until the effect runs in a browser.
  *
- * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted
- * experience. Changing `appearance` or `locale` updates the active experience
- * in place. Keep the component mounted while a payment is pending or
- * confirmation is in progress.
+ * Changing `features`, the Checkout reference, `presentation`, `timeout`, or
+ * `title` starts a fresh hosted experience. Changing `appearance` or `locale`
+ * updates the active experience in place. Keep the component mounted while a
+ * payment is pending or confirmation is in progress.
  *
- * @example Handle success, failure, and focus in a dialog
+ * @example Present Checkout without building a dialog
  * ```tsx
- * import { useRef } from 'react'
- * import { Checkout, type CheckoutHandle } from '@inttegro/react'
+ * import { Checkout } from '@inttegro/react'
  *
  * function Payment({ orderId }: { orderId: string }) {
- *   const checkout = useRef<CheckoutHandle>(null)
- *
  *   return (
- *     <dialog open onTransitionEnd={() => checkout.current?.focus()}>
- *       <Checkout
- *         ref={checkout}
- *         orderId={orderId}
- *         appearance={{ theme: 'system' }}
- *         onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
- *         onError={(error) => reportCheckoutError(error)}
- *       />
- *     </dialog>
+ *     <Checkout
+ *       orderId={orderId}
+ *       presentation="modal"
+ *       appearance={{ theme: 'system' }}
+ *       onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
+ *       onError={(error) => reportCheckoutError(error)}
+ *     />
  *   )
  * }
  * ```

package/dist/index.js

@@ -15,29 +15,48 @@ var Checkout = forwardRef(
     className,
     features,
     locale,
+    onCanceled,
     onCompleted,
+    onFailed,
     onError,
     onEvent,
     onReady,
     orderId,
+    purchaseIntentId,
+    presentation = "embedded",
     style,
     timeout,
     title
   }, forwardedRef) {
     const containerRef = useRef(null);
     const checkoutRef = useRef(null);
-    const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady });
+    const callbacksRef = useRef({
+      onCanceled,
+      onCompleted,
+      onFailed,
+      onError,
+      onEvent,
+      onReady
+    });
     const updateOptionsRef = useRef({ appearance, locale });
     const hasFeatureOverrides = features !== void 0;
     const showLineItems = features?.showLineItems;
     const showInvoiceDownload = features?.showInvoiceDownload;
     const showReceiptDownload = features?.showReceiptDownload;
     const allowPaymentMethodChange = features?.allowPaymentMethodChange;
-    callbacksRef.current = { onCompleted, onError, onEvent, onReady };
+    callbacksRef.current = {
+      onCanceled,
+      onCompleted,
+      onFailed,
+      onError,
+      onEvent,
+      onReady
+    };
     updateOptionsRef.current = { appearance, locale };
     useImperativeHandle(
       forwardedRef,
       () => ({
+        dismiss: () => checkoutRef.current?.dismiss(),
         focus: () => checkoutRef.current?.focus(),
         update: (options) => checkoutRef.current?.update(options)
       }),
@@ -45,8 +64,10 @@ var Checkout = forwardRef(
     );
     useEffect(() => {
       const target = containerRef.current;
-      if (!target) return;
+      if (presentation === "embedded" && !target) return;
       let active = true;
+      let canceled = false;
+      let failed = false;
       let checkout;
       let unsubscribe;
       void loadInttegro().then(async (inttegro) => {
@@ -61,6 +82,7 @@ var Checkout = forwardRef(
               showReceiptDownload
             }) : void 0,
             orderId,
+            purchaseIntentId,
             timeout,
             title
           })
@@ -73,14 +95,23 @@ var Checkout = forwardRef(
         checkoutRef.current = instance;
         unsubscribe = instance.onEvent((event) => {
           callbacksRef.current.onEvent?.(event);
+          if (event.type === "canceled") {
+            canceled = true;
+            callbacksRef.current.onCanceled?.(event);
+          }
           if (event.type === "ready") callbacksRef.current.onReady?.(event);
           if (event.type === "completed")
             callbacksRef.current.onCompleted?.(event);
-          if (event.type === "error") callbacksRef.current.onError?.(event);
+          if (event.type === "failed") {
+            failed = true;
+            callbacksRef.current.onFailed?.(event);
+          }
         });
-        await instance.mount(target);
+        if (presentation === "modal") await instance.present();
+        else await instance.mount(target);
       }).catch((error) => {
-        if (active) callbacksRef.current.onError?.(asError(error));
+        if (active && !canceled && !failed)
+          callbacksRef.current.onError?.(asError(error));
       });
       return () => {
         active = false;
@@ -92,6 +123,8 @@ var Checkout = forwardRef(
       allowPaymentMethodChange,
       hasFeatureOverrides,
       orderId,
+      purchaseIntentId,
+      presentation,
       showInvoiceDownload,
       showLineItems,
       showReceiptDownload,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkout.tsx"],"sourcesContent":["import {\n  loadInttegro,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, `orderId`, `timeout`, and `title` identify the embedded\n * experience. Changing one replaces the underlying controller. `appearance`\n * and `locale` update the existing controller without discarding payer\n * progress.\n *\n * @category React\n */\nexport interface CheckoutProps extends CheckoutOptions {\n  /** CSS class applied to the outer container owned by your React application. */\n  className?: string\n  /** Inline styles applied to the outer container, never to controls inside Checkout. */\n  style?: CSSProperties\n  /**\n   * Called after Checkout reports its successful terminal state.\n   * Use this to navigate or refresh server-owned Order state, not as the sole\n   * signal for fulfillment.\n   */\n  onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n  /**\n   * Called for loader/mount errors and sanitized hosted errors.\n   * Use `error instanceof InttegroCheckoutError` or check for an event `type`\n   * before reading framework-independent details.\n   */\n  onError?: (event: CheckoutErrorEvent | Error) => void\n  /** Called for every sanitized lifecycle event, including events above. */\n  onEvent?: (event: CheckoutEvent) => void\n  /** Called once the iframe is interactive and its mount promise has resolved. */\n  onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n  /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when the controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for `orderId`, and\n * destroys it during cleanup. Server rendering is safe because no runtime is\n * loaded until the effect runs in a browser.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted\n * experience. Changing `appearance` or `locale` updates the active experience\n * in place. Keep the component mounted while a payment is pending or\n * confirmation is in progress.\n *\n * @example Handle success, failure, and focus in a dialog\n * ```tsx\n * import { useRef } from 'react'\n * import { Checkout, type CheckoutHandle } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n *   const checkout = useRef<CheckoutHandle>(null)\n *\n *   return (\n *     <dialog open onTransitionEnd={() => checkout.current?.focus()}>\n *       <Checkout\n *         ref={checkout}\n *         orderId={orderId}\n *         appearance={{ theme: 'system' }}\n *         onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n *         onError={(error) => reportCheckoutError(error)}\n *       />\n *     </dialog>\n *   )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n  function Checkout(\n    {\n      appearance,\n      className,\n      features,\n      locale,\n      onCompleted,\n      onError,\n      onEvent,\n      onReady,\n      orderId,\n      style,\n      timeout,\n      title,\n    },\n    forwardedRef,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const checkoutRef = useRef<CheckoutController | null>(null)\n    const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady })\n    const updateOptionsRef = useRef({ appearance, locale })\n    const hasFeatureOverrides = features !== undefined\n    const showLineItems = features?.showLineItems\n    const showInvoiceDownload = features?.showInvoiceDownload\n    const showReceiptDownload = features?.showReceiptDownload\n    const allowPaymentMethodChange = features?.allowPaymentMethodChange\n    callbacksRef.current = { onCompleted, onError, onEvent, onReady }\n    updateOptionsRef.current = { appearance, locale }\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus: () => checkoutRef.current?.focus(),\n        update: (options) => checkoutRef.current?.update(options),\n      }),\n      [],\n    )\n\n    useEffect(() => {\n      const target = containerRef.current\n      if (!target) return\n\n      let active = true\n      let checkout: CheckoutController | undefined\n      let unsubscribe: (() => void) | undefined\n\n      void loadInttegro()\n        .then(async (inttegro) => {\n          if (!active || !inttegro) return\n          const instance = inttegro.createCheckout(\n            definedOptions({\n              ...updateOptionsRef.current,\n              features: hasFeatureOverrides\n                ? definedOptions({\n                    allowPaymentMethodChange,\n                    showInvoiceDownload,\n                    showLineItems,\n                    showReceiptDownload,\n                  })\n                : undefined,\n              orderId,\n              timeout,\n              title,\n            }),\n          )\n          if (!active) {\n            instance.destroy()\n            return\n          }\n          checkout = instance\n          checkoutRef.current = instance\n          unsubscribe = instance.onEvent((event) => {\n            callbacksRef.current.onEvent?.(event)\n            if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n            if (event.type === 'completed')\n              callbacksRef.current.onCompleted?.(event)\n            if (event.type === 'error') callbacksRef.current.onError?.(event)\n          })\n          await instance.mount(target)\n        })\n        .catch((error: unknown) => {\n          if (active) callbacksRef.current.onError?.(asError(error))\n        })\n\n      return () => {\n        active = false\n        unsubscribe?.()\n        checkout?.destroy()\n        if (checkoutRef.current === checkout) checkoutRef.current = null\n      }\n    }, [\n      allowPaymentMethodChange,\n      hasFeatureOverrides,\n      orderId,\n      showInvoiceDownload,\n      showLineItems,\n      showReceiptDownload,\n      timeout,\n      title,\n    ])\n\n    useEffect(() => {\n      checkoutRef.current?.update(definedOptions({ appearance, locale }))\n    }, [appearance, locale])\n\n    return <div className={className} ref={containerRef} style={style} />\n  },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as Value\n}\n\nfunction asError(error: unknown): Error {\n  return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":"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","names":["Checkout"]}
+{"version":3,"sources":["../src/Checkout.tsx"],"sourcesContent":["import {\n  loadInttegro,\n  type CheckoutController,\n  type CheckoutEvent,\n  type CheckoutOptions,\n  type CheckoutPresentation,\n} from '@inttegro/js'\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, the Checkout reference, `presentation`, `timeout`, and `title`\n * identify the experience. Changing one replaces the underlying controller.\n * `appearance` and `locale` update the existing controller without discarding\n * payer progress.\n *\n * @category React\n */\nexport type CheckoutProps = CheckoutOptions & {\n  /** CSS class applied to the outer container owned by your React application. */\n  className?: string\n  /** Inline styles applied to the outer container, never to controls inside Checkout. */\n  style?: CSSProperties\n  /** Displays Checkout inline by default or in an Inttegro-managed modal. */\n  presentation?: CheckoutPresentation\n  /** Called when a payer dismisses managed modal Checkout before completion. */\n  onCanceled?: (event: Extract<CheckoutEvent, { type: 'canceled' }>) => void\n  /**\n   * Called after Checkout reports its successful terminal state.\n   * Use this to navigate or refresh server-owned Order state, not as the sole\n   * signal for fulfillment.\n   */\n  onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n  /** Called when Checkout reaches a terminal failure state. */\n  onFailed?: (event: Extract<CheckoutEvent, { type: 'failed' }>) => void\n  /** Called for loader or mount errors. */\n  onError?: (error: Error) => void\n  /** Called for every sanitized lifecycle event, including events above. */\n  onEvent?: (event: CheckoutEvent) => void\n  /** Called once the iframe is interactive and its mount promise has resolved. */\n  onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n  /** Closes managed modal Checkout when it is open. */\n  dismiss(): void\n  /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when the controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Displays Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for an `orderId` or\n * `purchaseIntentId`, and destroys it during cleanup. Server rendering is safe\n * because no runtime is loaded until the effect runs in a browser.\n *\n * Changing `features`, the Checkout reference, `presentation`, `timeout`, or\n * `title` starts a fresh hosted experience. Changing `appearance` or `locale`\n * updates the active experience in place. Keep the component mounted while a\n * payment is pending or confirmation is in progress.\n *\n * @example Present Checkout without building a dialog\n * ```tsx\n * import { Checkout } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n *   return (\n *     <Checkout\n *       orderId={orderId}\n *       presentation=\"modal\"\n *       appearance={{ theme: 'system' }}\n *       onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n *       onError={(error) => reportCheckoutError(error)}\n *     />\n *   )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n  function Checkout(\n    {\n      appearance,\n      className,\n      features,\n      locale,\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n      orderId,\n      purchaseIntentId,\n      presentation = 'embedded',\n      style,\n      timeout,\n      title,\n    },\n    forwardedRef,\n  ) {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const checkoutRef = useRef<CheckoutController | null>(null)\n    const callbacksRef = useRef({\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n    })\n    const updateOptionsRef = useRef({ appearance, locale })\n    const hasFeatureOverrides = features !== undefined\n    const showLineItems = features?.showLineItems\n    const showInvoiceDownload = features?.showInvoiceDownload\n    const showReceiptDownload = features?.showReceiptDownload\n    const allowPaymentMethodChange = features?.allowPaymentMethodChange\n    callbacksRef.current = {\n      onCanceled,\n      onCompleted,\n      onFailed,\n      onError,\n      onEvent,\n      onReady,\n    }\n    updateOptionsRef.current = { appearance, locale }\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        dismiss: () => checkoutRef.current?.dismiss(),\n        focus: () => checkoutRef.current?.focus(),\n        update: (options) => checkoutRef.current?.update(options),\n      }),\n      [],\n    )\n\n    useEffect(() => {\n      const target = containerRef.current\n      if (presentation === 'embedded' && !target) return\n\n      let active = true\n      let canceled = false\n      let failed = false\n      let checkout: CheckoutController | undefined\n      let unsubscribe: (() => void) | undefined\n\n      void loadInttegro()\n        .then(async (inttegro) => {\n          if (!active || !inttegro) return\n          const instance = inttegro.createCheckout(\n            definedOptions({\n              ...updateOptionsRef.current,\n              features: hasFeatureOverrides\n                ? definedOptions({\n                    allowPaymentMethodChange,\n                    showInvoiceDownload,\n                    showLineItems,\n                    showReceiptDownload,\n                  })\n                : undefined,\n              orderId,\n              purchaseIntentId,\n              timeout,\n              title,\n            }) as CheckoutOptions,\n          )\n          if (!active) {\n            instance.destroy()\n            return\n          }\n          checkout = instance\n          checkoutRef.current = instance\n          unsubscribe = instance.onEvent((event) => {\n            callbacksRef.current.onEvent?.(event)\n            if (event.type === 'canceled') {\n              canceled = true\n              callbacksRef.current.onCanceled?.(event)\n            }\n            if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n            if (event.type === 'completed')\n              callbacksRef.current.onCompleted?.(event)\n            if (event.type === 'failed') {\n              failed = true\n              callbacksRef.current.onFailed?.(event)\n            }\n          })\n          if (presentation === 'modal') await instance.present()\n          else await instance.mount(target!)\n        })\n        .catch((error: unknown) => {\n          if (active && !canceled && !failed)\n            callbacksRef.current.onError?.(asError(error))\n        })\n\n      return () => {\n        active = false\n        unsubscribe?.()\n        checkout?.destroy()\n        if (checkoutRef.current === checkout) checkoutRef.current = null\n      }\n    }, [\n      allowPaymentMethodChange,\n      hasFeatureOverrides,\n      orderId,\n      purchaseIntentId,\n      presentation,\n      showInvoiceDownload,\n      showLineItems,\n      showReceiptDownload,\n      timeout,\n      title,\n    ])\n\n    useEffect(() => {\n      checkoutRef.current?.update(definedOptions({ appearance, locale }))\n    }, [appearance, locale])\n\n    return <div className={className} ref={containerRef} style={style} />\n  },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as Value\n}\n\nfunction asError(error: unknown): Error {\n  return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":"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","names":["Checkout"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inttegro/react",
-  "version": "0.2.0",
+  "version": "0.5.1",
   "description": "React components for Inttegro hosted workflows",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -32,14 +32,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@inttegro/js": "0.2.0"
+    "@inttegro/js": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=18"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zebodotdev/js.git",
+    "url": "git+https://github.com/inttegro/js.git",
     "directory": "packages/react"
   },
   "homepage": "https://studio.inttegro.com/web/react",