@inttegro/vue 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,15 @@
+# `@inttegro/vue`
+
+Vue 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.
+
+```vue
+<script setup lang="ts">
+import { Checkout } from '@inttegro/vue'
+</script>
+
+<template>
+  <Checkout :order-id="orderId" @completed="onCompleted" />
+</template>
+```

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Checkout: () => Checkout
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Checkout.ts
+var import_js = require("@inttegro/js");
+var import_vue = require("vue");
+var Checkout = (0, import_vue.defineComponent)({
+  name: "InttegroCheckout",
+  props: {
+    appearance: Object,
+    locale: String,
+    orderId: { type: String, required: true },
+    timeout: Number,
+    title: String
+  },
+  emits: {
+    completed: (_event) => true,
+    error: (_event) => true,
+    event: (_event) => true,
+    ready: (_event) => true
+  },
+  setup(props, { emit, expose }) {
+    const container = (0, import_vue.ref)();
+    let checkout;
+    let unsubscribe;
+    let generation = 0;
+    function destroyCheckout() {
+      generation += 1;
+      unsubscribe?.();
+      unsubscribe = void 0;
+      checkout?.destroy();
+      checkout = void 0;
+    }
+    async function mountCheckout() {
+      destroyCheckout();
+      const target = container.value;
+      const currentGeneration = generation;
+      if (!target) return;
+      try {
+        const inttegro = await (0, import_js.loadInttegro)();
+        if (generation !== currentGeneration || !inttegro) return;
+        const instance = inttegro.createCheckout(
+          definedOptions({
+            appearance: props.appearance,
+            locale: props.locale,
+            orderId: props.orderId,
+            timeout: props.timeout,
+            title: props.title
+          })
+        );
+        if (generation !== currentGeneration) {
+          instance.destroy();
+          return;
+        }
+        checkout = instance;
+        unsubscribe = instance.onEvent((event) => {
+          emit("event", event);
+          if (event.type === "ready") emit("ready", event);
+          if (event.type === "completed") emit("completed", event);
+          if (event.type === "error") emit("error", event);
+        });
+        await instance.mount(target);
+      } catch (error) {
+        if (generation !== currentGeneration) return;
+        emit(
+          "error",
+          error instanceof Error ? error : new Error("Checkout failed to load.")
+        );
+      }
+    }
+    (0, import_vue.onMounted)(mountCheckout);
+    (0, import_vue.onBeforeUnmount)(destroyCheckout);
+    (0, import_vue.watch)(
+      () => [props.orderId, props.timeout, props.title],
+      () => void mountCheckout()
+    );
+    (0, import_vue.watch)(
+      () => [props.appearance, props.locale],
+      ([appearance, locale]) => {
+        checkout?.update(definedOptions({ appearance, locale }));
+      },
+      { deep: true }
+    );
+    expose({
+      focus: () => checkout?.focus(),
+      update: (options) => checkout?.update(options)
+    });
+    return () => (0, import_vue.h)("div", { ref: container });
+  }
+});
+function definedOptions(options) {
+  return Object.fromEntries(
+    Object.entries(options).filter(([, value]) => value !== void 0)
+  );
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Checkout.ts"],"sourcesContent":["/**\n * Vue component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/vue\n */\nexport { Checkout, type CheckoutExposed, type CheckoutProps } from './Checkout'\nexport type {\n  CheckoutAppearance,\n  CheckoutErrorEvent,\n  CheckoutEvent,\n  CheckoutTheme,\n} from '@inttegro/js'\n","import {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n} from '@inttegro/js'\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `orderId`, `timeout`, or `title` replaces the hosted controller.\n * Changing `appearance` or `locale` updates it in place, preserving payer\n * progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutProps {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  appearance?: CheckoutAppearance | undefined\n  /** Initial and reactive BCP 47 locale preference. */\n  locale?: string | undefined\n  /** Client-safe reference for the finalized Order being paid. */\n  orderId: string\n  /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n  timeout?: number | undefined\n  /** Accessible iframe title; defaults to `Checkout`. */\n  title?: string | undefined\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n  /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when a controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a Vue application.\n *\n * The component owns the loader and controller lifecycle. It emits:\n *\n * - `ready` once the iframe is interactive;\n * - `event` for every sanitized Checkout lifecycle event;\n * - `completed` at the successful hosted terminal state; and\n * - `error` for loader/mount failures or sanitized hosted errors.\n *\n * Keep the component mounted while payment or confirmation is pending. On\n * unmount it removes its event subscription and permanently destroys the\n * controller.\n *\n * @example Use native Vue events\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue'\n * import { Checkout, type CheckoutExposed } from '@inttegro/vue'\n *\n * const props = defineProps<{ orderId: string }>()\n * const checkout = ref<CheckoutExposed>()\n * </script>\n *\n * <template>\n *   <Checkout\n *     ref=\"checkout\"\n *     :order-id=\"props.orderId\"\n *     :appearance=\"{ theme: 'system' }\"\n *     @ready=\"checkout?.focus()\"\n *     @completed=\"$router.push('/orders/complete')\"\n *     @error=\"reportCheckoutError\"\n *   />\n * </template>\n * ```\n *\n * @category Vue\n */\nexport const Checkout = defineComponent({\n  name: 'InttegroCheckout',\n  props: {\n    appearance: Object as PropType<CheckoutAppearance>,\n    locale: String,\n    orderId: { type: String, required: true },\n    timeout: Number,\n    title: String,\n  },\n  emits: {\n    completed: (_event: Extract<CheckoutEvent, { type: 'completed' }>) => true,\n    error: (_event: CheckoutErrorEvent | Error) => true,\n    event: (_event: CheckoutEvent) => true,\n    ready: (_event: Extract<CheckoutEvent, { type: 'ready' }>) => true,\n  },\n  setup(props, { emit, expose }) {\n    const container = ref<HTMLElement>()\n    let checkout: CheckoutController | undefined\n    let unsubscribe: (() => void) | undefined\n    let generation = 0\n\n    function destroyCheckout() {\n      generation += 1\n      unsubscribe?.()\n      unsubscribe = undefined\n      checkout?.destroy()\n      checkout = undefined\n    }\n\n    async function mountCheckout() {\n      destroyCheckout()\n      const target = container.value\n      const currentGeneration = generation\n      if (!target) return\n      try {\n        const inttegro = await loadInttegro()\n        if (generation !== currentGeneration || !inttegro) return\n        const instance = inttegro.createCheckout(\n          definedOptions({\n            appearance: props.appearance,\n            locale: props.locale,\n            orderId: props.orderId,\n            timeout: props.timeout,\n            title: props.title,\n          }),\n        )\n        if (generation !== currentGeneration) {\n          instance.destroy()\n          return\n        }\n        checkout = instance\n        unsubscribe = instance.onEvent((event) => {\n          emit('event', event)\n          if (event.type === 'ready') emit('ready', event)\n          if (event.type === 'completed') emit('completed', event)\n          if (event.type === 'error') emit('error', event)\n        })\n        await instance.mount(target)\n      } catch (error: unknown) {\n        if (generation !== currentGeneration) return\n        emit(\n          'error',\n          error instanceof Error\n            ? error\n            : new Error('Checkout failed to load.'),\n        )\n      }\n    }\n\n    onMounted(mountCheckout)\n    onBeforeUnmount(destroyCheckout)\n\n    watch(\n      () => [props.orderId, props.timeout, props.title],\n      () => void mountCheckout(),\n    )\n    watch(\n      () => [props.appearance, props.locale] as const,\n      ([appearance, locale]) => {\n        checkout?.update(definedOptions({ appearance, locale }))\n      },\n      { deep: true },\n    )\n\n    expose({\n      focus: () => checkout?.focus(),\n      update: (options: Parameters<CheckoutController['update']>[0]) =>\n        checkout?.update(options),\n    })\n\n    return () => h('div', { ref: container })\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gBAMO;AACP,iBAQO;AA0EA,IAAM,eAAW,4BAAgB;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,IACxC,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,WAAW,CAAC,WAA0D;AAAA,IACtE,OAAO,CAAC,WAAuC;AAAA,IAC/C,OAAO,CAAC,WAA0B;AAAA,IAClC,OAAO,CAAC,WAAsD;AAAA,EAChE;AAAA,EACA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,gBAAY,gBAAiB;AACnC,QAAI;AACJ,QAAI;AACJ,QAAI,aAAa;AAEjB,aAAS,kBAAkB;AACzB,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,gBAAU,QAAQ;AAClB,iBAAW;AAAA,IACb;AAEA,mBAAe,gBAAgB;AAC7B,sBAAgB;AAChB,YAAM,SAAS,UAAU;AACzB,YAAM,oBAAoB;AAC1B,UAAI,CAAC,OAAQ;AACb,UAAI;AACF,cAAM,WAAW,UAAM,wBAAa;AACpC,YAAI,eAAe,qBAAqB,CAAC,SAAU;AACnD,cAAM,WAAW,SAAS;AAAA,UACxB,eAAe;AAAA,YACb,YAAY,MAAM;AAAA,YAClB,QAAQ,MAAM;AAAA,YACd,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,OAAO,MAAM;AAAA,UACf,CAAC;AAAA,QACH;AACA,YAAI,eAAe,mBAAmB;AACpC,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,mBAAW;AACX,sBAAc,SAAS,QAAQ,CAAC,UAAU;AACxC,eAAK,SAAS,KAAK;AACnB,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAC/C,cAAI,MAAM,SAAS,YAAa,MAAK,aAAa,KAAK;AACvD,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAAA,QACjD,CAAC;AACD,cAAM,SAAS,MAAM,MAAM;AAAA,MAC7B,SAAS,OAAgB;AACvB,YAAI,eAAe,kBAAmB;AACtC;AAAA,UACE;AAAA,UACA,iBAAiB,QACb,QACA,IAAI,MAAM,0BAA0B;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,8BAAU,aAAa;AACvB,oCAAgB,eAAe;AAE/B;AAAA,MACE,MAAM,CAAC,MAAM,SAAS,MAAM,SAAS,MAAM,KAAK;AAAA,MAChD,MAAM,KAAK,cAAc;AAAA,IAC3B;AACA;AAAA,MACE,MAAM,CAAC,MAAM,YAAY,MAAM,MAAM;AAAA,MACrC,CAAC,CAAC,YAAY,MAAM,MAAM;AACxB,kBAAU,OAAO,eAAe,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,MACzD;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,WAAO;AAAA,MACL,OAAO,MAAM,UAAU,MAAM;AAAA,MAC7B,QAAQ,CAAC,YACP,UAAU,OAAO,OAAO;AAAA,IAC5B,CAAC;AAED,WAAO,UAAM,cAAE,OAAO,EAAE,KAAK,UAAU,CAAC;AAAA,EAC1C;AACF,CAAC;AAED,SAAS,eAAqC,SAAuB;AACnE,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACnE;AACF;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,113 @@
+import * as _inttegro_js from '@inttegro/js';
+import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * Props accepted by the Inttegro {@link Checkout} component.
+ *
+ * Changing `orderId`, `timeout`, or `title` replaces the hosted controller.
+ * Changing `appearance` or `locale` updates it in place, preserving payer
+ * progress where the hosted flow permits.
+ *
+ * @category Vue
+ */
+interface CheckoutProps {
+    /** Initial and reactive theme preference for hosted Checkout. */
+    appearance?: CheckoutAppearance | undefined;
+    /** Initial and reactive BCP 47 locale preference. */
+    locale?: string | 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;
+}
+/**
+ * Imperative operations exposed by {@link Checkout} through a Vue template ref.
+ *
+ * @category Vue
+ */
+interface CheckoutExposed {
+    /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */
+    focus(): void;
+    /** Applies a new locale or theme when a controller exists. */
+    update(options: Parameters<CheckoutController['update']>[0]): void;
+}
+/**
+ * Embeds Inttegro-hosted Checkout in a Vue application.
+ *
+ * The component owns the loader and controller lifecycle. It emits:
+ *
+ * - `ready` once the iframe is interactive;
+ * - `event` for every sanitized Checkout lifecycle event;
+ * - `completed` at the successful hosted terminal state; and
+ * - `error` for loader/mount failures or sanitized hosted errors.
+ *
+ * Keep the component mounted while payment or confirmation is pending. On
+ * unmount it removes its event subscription and permanently destroys the
+ * controller.
+ *
+ * @example Use native Vue events
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue'
+ * import { Checkout, type CheckoutExposed } from '@inttegro/vue'
+ *
+ * const props = defineProps<{ orderId: string }>()
+ * const checkout = ref<CheckoutExposed>()
+ * </script>
+ *
+ * <template>
+ *   <Checkout
+ *     ref="checkout"
+ *     :order-id="props.orderId"
+ *     :appearance="{ theme: 'system' }"
+ *     @ready="checkout?.focus()"
+ *     @completed="$router.push('/orders/complete')"
+ *     @error="reportCheckoutError"
+ *   />
+ * </template>
+ * ```
+ *
+ * @category Vue
+ */
+declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
+    appearance: PropType<CheckoutAppearance>;
+    locale: StringConstructor;
+    orderId: {
+        type: StringConstructor;
+        required: true;
+    };
+    timeout: NumberConstructor;
+    title: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    completed: (_event: Extract<CheckoutEvent, {
+        type: "completed";
+    }>) => true;
+    error: (_event: CheckoutErrorEvent | Error) => true;
+    event: (_event: CheckoutEvent) => true;
+    ready: (_event: Extract<CheckoutEvent, {
+        type: "ready";
+    }>) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    appearance: PropType<CheckoutAppearance>;
+    locale: StringConstructor;
+    orderId: {
+        type: StringConstructor;
+        required: true;
+    };
+    timeout: NumberConstructor;
+    title: StringConstructor;
+}>> & Readonly<{
+    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
+    onReady?: (_event: _inttegro_js.CheckoutReadyEvent) => any;
+    onError?: (_event: CheckoutErrorEvent | Error) => any;
+    onEvent?: (_event: CheckoutEvent) => any;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Checkout, type CheckoutExposed, type CheckoutProps };

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import * as _inttegro_js from '@inttegro/js';
+import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * Props accepted by the Inttegro {@link Checkout} component.
+ *
+ * Changing `orderId`, `timeout`, or `title` replaces the hosted controller.
+ * Changing `appearance` or `locale` updates it in place, preserving payer
+ * progress where the hosted flow permits.
+ *
+ * @category Vue
+ */
+interface CheckoutProps {
+    /** Initial and reactive theme preference for hosted Checkout. */
+    appearance?: CheckoutAppearance | undefined;
+    /** Initial and reactive BCP 47 locale preference. */
+    locale?: string | 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;
+}
+/**
+ * Imperative operations exposed by {@link Checkout} through a Vue template ref.
+ *
+ * @category Vue
+ */
+interface CheckoutExposed {
+    /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */
+    focus(): void;
+    /** Applies a new locale or theme when a controller exists. */
+    update(options: Parameters<CheckoutController['update']>[0]): void;
+}
+/**
+ * Embeds Inttegro-hosted Checkout in a Vue application.
+ *
+ * The component owns the loader and controller lifecycle. It emits:
+ *
+ * - `ready` once the iframe is interactive;
+ * - `event` for every sanitized Checkout lifecycle event;
+ * - `completed` at the successful hosted terminal state; and
+ * - `error` for loader/mount failures or sanitized hosted errors.
+ *
+ * Keep the component mounted while payment or confirmation is pending. On
+ * unmount it removes its event subscription and permanently destroys the
+ * controller.
+ *
+ * @example Use native Vue events
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue'
+ * import { Checkout, type CheckoutExposed } from '@inttegro/vue'
+ *
+ * const props = defineProps<{ orderId: string }>()
+ * const checkout = ref<CheckoutExposed>()
+ * </script>
+ *
+ * <template>
+ *   <Checkout
+ *     ref="checkout"
+ *     :order-id="props.orderId"
+ *     :appearance="{ theme: 'system' }"
+ *     @ready="checkout?.focus()"
+ *     @completed="$router.push('/orders/complete')"
+ *     @error="reportCheckoutError"
+ *   />
+ * </template>
+ * ```
+ *
+ * @category Vue
+ */
+declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
+    appearance: PropType<CheckoutAppearance>;
+    locale: StringConstructor;
+    orderId: {
+        type: StringConstructor;
+        required: true;
+    };
+    timeout: NumberConstructor;
+    title: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    completed: (_event: Extract<CheckoutEvent, {
+        type: "completed";
+    }>) => true;
+    error: (_event: CheckoutErrorEvent | Error) => true;
+    event: (_event: CheckoutEvent) => true;
+    ready: (_event: Extract<CheckoutEvent, {
+        type: "ready";
+    }>) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    appearance: PropType<CheckoutAppearance>;
+    locale: StringConstructor;
+    orderId: {
+        type: StringConstructor;
+        required: true;
+    };
+    timeout: NumberConstructor;
+    title: StringConstructor;
+}>> & Readonly<{
+    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
+    onReady?: (_event: _inttegro_js.CheckoutReadyEvent) => any;
+    onError?: (_event: CheckoutErrorEvent | Error) => any;
+    onEvent?: (_event: CheckoutEvent) => any;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Checkout, type CheckoutExposed, type CheckoutProps };

package/dist/index.js

@@ -0,0 +1,105 @@
+// src/Checkout.ts
+import {
+  loadInttegro
+} from "@inttegro/js";
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+var Checkout = defineComponent({
+  name: "InttegroCheckout",
+  props: {
+    appearance: Object,
+    locale: String,
+    orderId: { type: String, required: true },
+    timeout: Number,
+    title: String
+  },
+  emits: {
+    completed: (_event) => true,
+    error: (_event) => true,
+    event: (_event) => true,
+    ready: (_event) => true
+  },
+  setup(props, { emit, expose }) {
+    const container = ref();
+    let checkout;
+    let unsubscribe;
+    let generation = 0;
+    function destroyCheckout() {
+      generation += 1;
+      unsubscribe?.();
+      unsubscribe = void 0;
+      checkout?.destroy();
+      checkout = void 0;
+    }
+    async function mountCheckout() {
+      destroyCheckout();
+      const target = container.value;
+      const currentGeneration = generation;
+      if (!target) return;
+      try {
+        const inttegro = await loadInttegro();
+        if (generation !== currentGeneration || !inttegro) return;
+        const instance = inttegro.createCheckout(
+          definedOptions({
+            appearance: props.appearance,
+            locale: props.locale,
+            orderId: props.orderId,
+            timeout: props.timeout,
+            title: props.title
+          })
+        );
+        if (generation !== currentGeneration) {
+          instance.destroy();
+          return;
+        }
+        checkout = instance;
+        unsubscribe = instance.onEvent((event) => {
+          emit("event", event);
+          if (event.type === "ready") emit("ready", event);
+          if (event.type === "completed") emit("completed", event);
+          if (event.type === "error") emit("error", event);
+        });
+        await instance.mount(target);
+      } catch (error) {
+        if (generation !== currentGeneration) return;
+        emit(
+          "error",
+          error instanceof Error ? error : new Error("Checkout failed to load.")
+        );
+      }
+    }
+    onMounted(mountCheckout);
+    onBeforeUnmount(destroyCheckout);
+    watch(
+      () => [props.orderId, props.timeout, props.title],
+      () => void mountCheckout()
+    );
+    watch(
+      () => [props.appearance, props.locale],
+      ([appearance, locale]) => {
+        checkout?.update(definedOptions({ appearance, locale }));
+      },
+      { deep: true }
+    );
+    expose({
+      focus: () => checkout?.focus(),
+      update: (options) => checkout?.update(options)
+    });
+    return () => h("div", { ref: container });
+  }
+});
+function definedOptions(options) {
+  return Object.fromEntries(
+    Object.entries(options).filter(([, value]) => value !== void 0)
+  );
+}
+export {
+  Checkout
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkout.ts"],"sourcesContent":["import {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n} from '@inttegro/js'\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `orderId`, `timeout`, or `title` replaces the hosted controller.\n * Changing `appearance` or `locale` updates it in place, preserving payer\n * progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutProps {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  appearance?: CheckoutAppearance | undefined\n  /** Initial and reactive BCP 47 locale preference. */\n  locale?: string | undefined\n  /** Client-safe reference for the finalized Order being paid. */\n  orderId: string\n  /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n  timeout?: number | undefined\n  /** Accessible iframe title; defaults to `Checkout`. */\n  title?: string | undefined\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n  /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */\n  focus(): void\n  /** Applies a new locale or theme when a controller exists. */\n  update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a Vue application.\n *\n * The component owns the loader and controller lifecycle. It emits:\n *\n * - `ready` once the iframe is interactive;\n * - `event` for every sanitized Checkout lifecycle event;\n * - `completed` at the successful hosted terminal state; and\n * - `error` for loader/mount failures or sanitized hosted errors.\n *\n * Keep the component mounted while payment or confirmation is pending. On\n * unmount it removes its event subscription and permanently destroys the\n * controller.\n *\n * @example Use native Vue events\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue'\n * import { Checkout, type CheckoutExposed } from '@inttegro/vue'\n *\n * const props = defineProps<{ orderId: string }>()\n * const checkout = ref<CheckoutExposed>()\n * </script>\n *\n * <template>\n *   <Checkout\n *     ref=\"checkout\"\n *     :order-id=\"props.orderId\"\n *     :appearance=\"{ theme: 'system' }\"\n *     @ready=\"checkout?.focus()\"\n *     @completed=\"$router.push('/orders/complete')\"\n *     @error=\"reportCheckoutError\"\n *   />\n * </template>\n * ```\n *\n * @category Vue\n */\nexport const Checkout = defineComponent({\n  name: 'InttegroCheckout',\n  props: {\n    appearance: Object as PropType<CheckoutAppearance>,\n    locale: String,\n    orderId: { type: String, required: true },\n    timeout: Number,\n    title: String,\n  },\n  emits: {\n    completed: (_event: Extract<CheckoutEvent, { type: 'completed' }>) => true,\n    error: (_event: CheckoutErrorEvent | Error) => true,\n    event: (_event: CheckoutEvent) => true,\n    ready: (_event: Extract<CheckoutEvent, { type: 'ready' }>) => true,\n  },\n  setup(props, { emit, expose }) {\n    const container = ref<HTMLElement>()\n    let checkout: CheckoutController | undefined\n    let unsubscribe: (() => void) | undefined\n    let generation = 0\n\n    function destroyCheckout() {\n      generation += 1\n      unsubscribe?.()\n      unsubscribe = undefined\n      checkout?.destroy()\n      checkout = undefined\n    }\n\n    async function mountCheckout() {\n      destroyCheckout()\n      const target = container.value\n      const currentGeneration = generation\n      if (!target) return\n      try {\n        const inttegro = await loadInttegro()\n        if (generation !== currentGeneration || !inttegro) return\n        const instance = inttegro.createCheckout(\n          definedOptions({\n            appearance: props.appearance,\n            locale: props.locale,\n            orderId: props.orderId,\n            timeout: props.timeout,\n            title: props.title,\n          }),\n        )\n        if (generation !== currentGeneration) {\n          instance.destroy()\n          return\n        }\n        checkout = instance\n        unsubscribe = instance.onEvent((event) => {\n          emit('event', event)\n          if (event.type === 'ready') emit('ready', event)\n          if (event.type === 'completed') emit('completed', event)\n          if (event.type === 'error') emit('error', event)\n        })\n        await instance.mount(target)\n      } catch (error: unknown) {\n        if (generation !== currentGeneration) return\n        emit(\n          'error',\n          error instanceof Error\n            ? error\n            : new Error('Checkout failed to load.'),\n        )\n      }\n    }\n\n    onMounted(mountCheckout)\n    onBeforeUnmount(destroyCheckout)\n\n    watch(\n      () => [props.orderId, props.timeout, props.title],\n      () => void mountCheckout(),\n    )\n    watch(\n      () => [props.appearance, props.locale] as const,\n      ([appearance, locale]) => {\n        checkout?.update(definedOptions({ appearance, locale }))\n      },\n      { deep: true },\n    )\n\n    expose({\n      focus: () => checkout?.focus(),\n      update: (options: Parameters<CheckoutController['update']>[0]) =>\n        checkout?.update(options),\n    })\n\n    return () => h('div', { ref: container })\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"],"mappings":";AAAA;AAAA,EACE;AAAA,OAKK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA0EA,IAAM,WAAW,gBAAgB;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,IACxC,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,WAAW,CAAC,WAA0D;AAAA,IACtE,OAAO,CAAC,WAAuC;AAAA,IAC/C,OAAO,CAAC,WAA0B;AAAA,IAClC,OAAO,CAAC,WAAsD;AAAA,EAChE;AAAA,EACA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,YAAY,IAAiB;AACnC,QAAI;AACJ,QAAI;AACJ,QAAI,aAAa;AAEjB,aAAS,kBAAkB;AACzB,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,gBAAU,QAAQ;AAClB,iBAAW;AAAA,IACb;AAEA,mBAAe,gBAAgB;AAC7B,sBAAgB;AAChB,YAAM,SAAS,UAAU;AACzB,YAAM,oBAAoB;AAC1B,UAAI,CAAC,OAAQ;AACb,UAAI;AACF,cAAM,WAAW,MAAM,aAAa;AACpC,YAAI,eAAe,qBAAqB,CAAC,SAAU;AACnD,cAAM,WAAW,SAAS;AAAA,UACxB,eAAe;AAAA,YACb,YAAY,MAAM;AAAA,YAClB,QAAQ,MAAM;AAAA,YACd,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,OAAO,MAAM;AAAA,UACf,CAAC;AAAA,QACH;AACA,YAAI,eAAe,mBAAmB;AACpC,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,mBAAW;AACX,sBAAc,SAAS,QAAQ,CAAC,UAAU;AACxC,eAAK,SAAS,KAAK;AACnB,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAC/C,cAAI,MAAM,SAAS,YAAa,MAAK,aAAa,KAAK;AACvD,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAAA,QACjD,CAAC;AACD,cAAM,SAAS,MAAM,MAAM;AAAA,MAC7B,SAAS,OAAgB;AACvB,YAAI,eAAe,kBAAmB;AACtC;AAAA,UACE;AAAA,UACA,iBAAiB,QACb,QACA,IAAI,MAAM,0BAA0B;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,cAAU,aAAa;AACvB,oBAAgB,eAAe;AAE/B;AAAA,MACE,MAAM,CAAC,MAAM,SAAS,MAAM,SAAS,MAAM,KAAK;AAAA,MAChD,MAAM,KAAK,cAAc;AAAA,IAC3B;AACA;AAAA,MACE,MAAM,CAAC,MAAM,YAAY,MAAM,MAAM;AAAA,MACrC,CAAC,CAAC,YAAY,MAAM,MAAM;AACxB,kBAAU,OAAO,eAAe,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,MACzD;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,WAAO;AAAA,MACL,OAAO,MAAM,UAAU,MAAM;AAAA,MAC7B,QAAQ,CAAC,YACP,UAAU,OAAO,OAAO;AAAA,IAC5B,CAAC;AAED,WAAO,MAAM,EAAE,OAAO,EAAE,KAAK,UAAU,CAAC;AAAA,EAC1C;AACF,CAAC;AAED,SAAS,eAAqC,SAAuB;AACnE,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACnE;AACF;","names":[]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@inttegro/vue",
+  "version": "0.1.0",
+  "description": "Vue components for Inttegro hosted workflows",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@inttegro/js": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zebodotdev/js.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://studio.inttegro.com/web/vue",
+  "author": "Inttegro Eng <engineering@inttegro.com> (https://inttegro.com)",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "typedocOptions": {
+    "entryPoints": [
+      "src/index.ts"
+    ]
+  },
+  "devDependencies": {
+    "tsup": "8.5.1",
+    "typescript": "6.0.3",
+    "vue": "3.5.42"
+  }
+}