@inttegro/vue 0.1.0 → 0.4.0

package/README.md

@@ -13,3 +13,10 @@ import { Checkout } from '@inttegro/vue'
   <Checkout :order-id="orderId" @completed="onCompleted" />
 </template>
 ```
+
+For a `customer_selected_amount` Buy link, pass `purchase-intent-id` instead of
+`order-id`. This works in both embedded and modal presentations:
+
+```vue
+<Checkout :purchase-intent-id="purchaseIntentId" presentation="modal" />
+```

package/dist/index.cjs

@@ -31,12 +31,19 @@ var Checkout = (0, import_vue.defineComponent)({
   name: "InttegroCheckout",
   props: {
     appearance: Object,
+    features: Object,
     locale: String,
-    orderId: { type: String, required: true },
+    orderId: String,
+    purchaseIntentId: String,
+    presentation: {
+      type: String,
+      default: "embedded"
+    },
     timeout: Number,
     title: String
   },
   emits: {
+    canceled: (_event) => true,
     completed: (_event) => true,
     error: (_event) => true,
     event: (_event) => true,
@@ -58,6 +65,7 @@ var Checkout = (0, import_vue.defineComponent)({
       destroyCheckout();
       const target = container.value;
       const currentGeneration = generation;
+      let canceled = false;
       if (!target) return;
       try {
         const inttegro = await (0, import_js.loadInttegro)();
@@ -65,8 +73,10 @@ var Checkout = (0, import_vue.defineComponent)({
         const instance = inttegro.createCheckout(
           definedOptions({
             appearance: props.appearance,
+            features: props.features,
             locale: props.locale,
             orderId: props.orderId,
+            purchaseIntentId: props.purchaseIntentId,
             timeout: props.timeout,
             title: props.title
           })
@@ -78,13 +88,18 @@ var Checkout = (0, import_vue.defineComponent)({
         checkout = instance;
         unsubscribe = instance.onEvent((event) => {
           emit("event", event);
+          if (event.type === "canceled") {
+            canceled = true;
+            emit("canceled", 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);
+        if (props.presentation === "modal") await instance.present();
+        else await instance.mount(target);
       } catch (error) {
-        if (generation !== currentGeneration) return;
+        if (generation !== currentGeneration || canceled) return;
         emit(
           "error",
           error instanceof Error ? error : new Error("Checkout failed to load.")
@@ -94,7 +109,14 @@ var Checkout = (0, import_vue.defineComponent)({
     (0, import_vue.onMounted)(mountCheckout);
     (0, import_vue.onBeforeUnmount)(destroyCheckout);
     (0, import_vue.watch)(
-      () => [props.orderId, props.timeout, props.title],
+      () => [
+        props.features,
+        props.orderId,
+        props.purchaseIntentId,
+        props.presentation,
+        props.timeout,
+        props.title
+      ],
       () => void mountCheckout()
     );
     (0, import_vue.watch)(
@@ -105,6 +127,7 @@ var Checkout = (0, import_vue.defineComponent)({
       { deep: true }
     );
     expose({
+      dismiss: () => checkout?.dismiss(),
       focus: () => checkout?.focus(),
       update: (options) => checkout?.update(options)
     });

package/dist/index.cjs.map

@@ -1 +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":[]}
+{"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 {\n  Checkout,\n  type CheckoutExposed,\n  type CheckoutProps,\n  type CheckoutPropsBase,\n} from './Checkout'\nexport type {\n  CheckoutAppearance,\n  CheckoutErrorEvent,\n  CheckoutEvent,\n  CheckoutFeatures,\n  CheckoutPresentation,\n  CheckoutTheme,\n} from '@inttegro/js'\n","import {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutFeatures,\n  type CheckoutOptions,\n  type CheckoutPresentation,\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 `features`, the Checkout reference, `presentation`, `timeout`, or\n * `title` replaces the hosted controller. Changing `appearance` or `locale`\n * updates it in place, preserving payer progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutPropsBase {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  appearance?: CheckoutAppearance | undefined\n  /** Hosted Checkout content and actions. Changing it replaces the controller. */\n  features?: CheckoutFeatures | undefined\n  /** Initial and reactive BCP 47 locale preference. */\n  locale?: string | undefined\n  /** Displays Checkout inline by default or in an Inttegro-managed modal. */\n  presentation?: CheckoutPresentation | undefined\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\nexport type CheckoutProps = CheckoutPropsBase &\n  (\n    | { orderId: string; purchaseIntentId?: never }\n    | { orderId?: never; purchaseIntentId: string }\n  )\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n  /** Closes managed modal Checkout when it is open. */\n  dismiss(): void\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 * Displays 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 * - `canceled` when a payer dismisses managed modal Checkout;\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 *     presentation=\"modal\"\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    features: Object as PropType<CheckoutFeatures>,\n    locale: String,\n    orderId: String,\n    purchaseIntentId: String,\n    presentation: {\n      type: String as PropType<CheckoutPresentation>,\n      default: 'embedded',\n    },\n    timeout: Number,\n    title: String,\n  },\n  emits: {\n    canceled: (_event: Extract<CheckoutEvent, { type: 'canceled' }>) => true,\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      let canceled = false\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            features: props.features,\n            locale: props.locale,\n            orderId: props.orderId,\n            purchaseIntentId: props.purchaseIntentId,\n            timeout: props.timeout,\n            title: props.title,\n          }) as CheckoutOptions,\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 === 'canceled') {\n            canceled = true\n            emit('canceled', event)\n          }\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        if (props.presentation === 'modal') await instance.present()\n        else await instance.mount(target)\n      } catch (error: unknown) {\n        if (generation !== currentGeneration || canceled) 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      () => [\n        props.features,\n        props.orderId,\n        props.purchaseIntentId,\n        props.presentation,\n        props.timeout,\n        props.title,\n      ],\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      dismiss: () => checkout?.dismiss(),\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":"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","names":[]}

package/dist/index.d.cts

@@ -1,48 +1,60 @@
 import * as _inttegro_js from '@inttegro/js';
-import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
+import { CheckoutAppearance, CheckoutFeatures, CheckoutPresentation, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation, 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.
+ * Changing `features`, the Checkout reference, `presentation`, `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 {
+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;
     /** Initial and reactive BCP 47 locale preference. */
     locale?: string | 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;
 }
+type CheckoutProps = CheckoutPropsBase & ({
+    orderId: string;
+    purchaseIntentId?: never;
+} | {
+    orderId?: never;
+    purchaseIntentId: string;
+});
 /**
  * Imperative operations exposed by {@link Checkout} through a Vue template ref.
  *
  * @category Vue
  */
 interface CheckoutExposed {
+    /** Closes managed modal Checkout when it is open. */
+    dismiss(): void;
     /** 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.
+ * Displays 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;
+ * - `canceled` when a payer dismisses managed modal Checkout;
  * - `completed` at the successful hosted terminal state; and
  * - `error` for loader/mount failures or sanitized hosted errors.
  *
@@ -64,6 +76,7 @@ interface CheckoutExposed {
  *   <Checkout
  *     ref="checkout"
  *     :order-id="props.orderId"
+ *     presentation="modal"
  *     :appearance="{ theme: 'system' }"
  *     @ready="checkout?.focus()"
  *     @completed="$router.push('/orders/complete')"
@@ -76,16 +89,22 @@ interface CheckoutExposed {
  */
 declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
     appearance: PropType<CheckoutAppearance>;
+    features: PropType<CheckoutFeatures>;
     locale: StringConstructor;
-    orderId: {
-        type: StringConstructor;
-        required: true;
+    orderId: StringConstructor;
+    purchaseIntentId: StringConstructor;
+    presentation: {
+        type: PropType<CheckoutPresentation>;
+        default: string;
     };
     timeout: NumberConstructor;
     title: StringConstructor;
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    canceled: (_event: Extract<CheckoutEvent, {
+        type: "canceled";
+    }>) => true;
     completed: (_event: Extract<CheckoutEvent, {
         type: "completed";
     }>) => true;
@@ -96,18 +115,24 @@ declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
     }>) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     appearance: PropType<CheckoutAppearance>;
+    features: PropType<CheckoutFeatures>;
     locale: StringConstructor;
-    orderId: {
-        type: StringConstructor;
-        required: true;
+    orderId: StringConstructor;
+    purchaseIntentId: StringConstructor;
+    presentation: {
+        type: PropType<CheckoutPresentation>;
+        default: string;
     };
     timeout: NumberConstructor;
     title: StringConstructor;
 }>> & Readonly<{
-    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
+    onCanceled?: (_event: _inttegro_js.CheckoutCanceledEvent) => any;
     onReady?: (_event: _inttegro_js.CheckoutReadyEvent) => any;
+    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
     onError?: (_event: CheckoutErrorEvent | Error) => any;
     onEvent?: (_event: CheckoutEvent) => any;
-}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+}>, {
+    presentation: CheckoutPresentation;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Checkout, type CheckoutExposed, type CheckoutProps };
+export { Checkout, type CheckoutExposed, type CheckoutProps, type CheckoutPropsBase };

package/dist/index.d.ts

@@ -1,48 +1,60 @@
 import * as _inttegro_js from '@inttegro/js';
-import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
+import { CheckoutAppearance, CheckoutFeatures, CheckoutPresentation, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation, 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.
+ * Changing `features`, the Checkout reference, `presentation`, `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 {
+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;
     /** Initial and reactive BCP 47 locale preference. */
     locale?: string | 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;
 }
+type CheckoutProps = CheckoutPropsBase & ({
+    orderId: string;
+    purchaseIntentId?: never;
+} | {
+    orderId?: never;
+    purchaseIntentId: string;
+});
 /**
  * Imperative operations exposed by {@link Checkout} through a Vue template ref.
  *
  * @category Vue
  */
 interface CheckoutExposed {
+    /** Closes managed modal Checkout when it is open. */
+    dismiss(): void;
     /** 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.
+ * Displays 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;
+ * - `canceled` when a payer dismisses managed modal Checkout;
  * - `completed` at the successful hosted terminal state; and
  * - `error` for loader/mount failures or sanitized hosted errors.
  *
@@ -64,6 +76,7 @@ interface CheckoutExposed {
  *   <Checkout
  *     ref="checkout"
  *     :order-id="props.orderId"
+ *     presentation="modal"
  *     :appearance="{ theme: 'system' }"
  *     @ready="checkout?.focus()"
  *     @completed="$router.push('/orders/complete')"
@@ -76,16 +89,22 @@ interface CheckoutExposed {
  */
 declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
     appearance: PropType<CheckoutAppearance>;
+    features: PropType<CheckoutFeatures>;
     locale: StringConstructor;
-    orderId: {
-        type: StringConstructor;
-        required: true;
+    orderId: StringConstructor;
+    purchaseIntentId: StringConstructor;
+    presentation: {
+        type: PropType<CheckoutPresentation>;
+        default: string;
     };
     timeout: NumberConstructor;
     title: StringConstructor;
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    canceled: (_event: Extract<CheckoutEvent, {
+        type: "canceled";
+    }>) => true;
     completed: (_event: Extract<CheckoutEvent, {
         type: "completed";
     }>) => true;
@@ -96,18 +115,24 @@ declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
     }>) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     appearance: PropType<CheckoutAppearance>;
+    features: PropType<CheckoutFeatures>;
     locale: StringConstructor;
-    orderId: {
-        type: StringConstructor;
-        required: true;
+    orderId: StringConstructor;
+    purchaseIntentId: StringConstructor;
+    presentation: {
+        type: PropType<CheckoutPresentation>;
+        default: string;
     };
     timeout: NumberConstructor;
     title: StringConstructor;
 }>> & Readonly<{
-    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
+    onCanceled?: (_event: _inttegro_js.CheckoutCanceledEvent) => any;
     onReady?: (_event: _inttegro_js.CheckoutReadyEvent) => any;
+    onCompleted?: (_event: _inttegro_js.CheckoutCompletedEvent) => any;
     onError?: (_event: CheckoutErrorEvent | Error) => any;
     onEvent?: (_event: CheckoutEvent) => any;
-}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+}>, {
+    presentation: CheckoutPresentation;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Checkout, type CheckoutExposed, type CheckoutProps };
+export { Checkout, type CheckoutExposed, type CheckoutProps, type CheckoutPropsBase };

package/dist/index.js

@@ -14,12 +14,19 @@ var Checkout = defineComponent({
   name: "InttegroCheckout",
   props: {
     appearance: Object,
+    features: Object,
     locale: String,
-    orderId: { type: String, required: true },
+    orderId: String,
+    purchaseIntentId: String,
+    presentation: {
+      type: String,
+      default: "embedded"
+    },
     timeout: Number,
     title: String
   },
   emits: {
+    canceled: (_event) => true,
     completed: (_event) => true,
     error: (_event) => true,
     event: (_event) => true,
@@ -41,6 +48,7 @@ var Checkout = defineComponent({
       destroyCheckout();
       const target = container.value;
       const currentGeneration = generation;
+      let canceled = false;
       if (!target) return;
       try {
         const inttegro = await loadInttegro();
@@ -48,8 +56,10 @@ var Checkout = defineComponent({
         const instance = inttegro.createCheckout(
           definedOptions({
             appearance: props.appearance,
+            features: props.features,
             locale: props.locale,
             orderId: props.orderId,
+            purchaseIntentId: props.purchaseIntentId,
             timeout: props.timeout,
             title: props.title
           })
@@ -61,13 +71,18 @@ var Checkout = defineComponent({
         checkout = instance;
         unsubscribe = instance.onEvent((event) => {
           emit("event", event);
+          if (event.type === "canceled") {
+            canceled = true;
+            emit("canceled", 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);
+        if (props.presentation === "modal") await instance.present();
+        else await instance.mount(target);
       } catch (error) {
-        if (generation !== currentGeneration) return;
+        if (generation !== currentGeneration || canceled) return;
         emit(
           "error",
           error instanceof Error ? error : new Error("Checkout failed to load.")
@@ -77,7 +92,14 @@ var Checkout = defineComponent({
     onMounted(mountCheckout);
     onBeforeUnmount(destroyCheckout);
     watch(
-      () => [props.orderId, props.timeout, props.title],
+      () => [
+        props.features,
+        props.orderId,
+        props.purchaseIntentId,
+        props.presentation,
+        props.timeout,
+        props.title
+      ],
       () => void mountCheckout()
     );
     watch(
@@ -88,6 +110,7 @@ var Checkout = defineComponent({
       { deep: true }
     );
     expose({
+      dismiss: () => checkout?.dismiss(),
       focus: () => checkout?.focus(),
       update: (options) => checkout?.update(options)
     });

package/dist/index.js.map

@@ -1 +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":[]}
+{"version":3,"sources":["../src/Checkout.ts"],"sourcesContent":["import {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutFeatures,\n  type CheckoutOptions,\n  type CheckoutPresentation,\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 `features`, the Checkout reference, `presentation`, `timeout`, or\n * `title` replaces the hosted controller. Changing `appearance` or `locale`\n * updates it in place, preserving payer progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutPropsBase {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  appearance?: CheckoutAppearance | undefined\n  /** Hosted Checkout content and actions. Changing it replaces the controller. */\n  features?: CheckoutFeatures | undefined\n  /** Initial and reactive BCP 47 locale preference. */\n  locale?: string | undefined\n  /** Displays Checkout inline by default or in an Inttegro-managed modal. */\n  presentation?: CheckoutPresentation | undefined\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\nexport type CheckoutProps = CheckoutPropsBase &\n  (\n    | { orderId: string; purchaseIntentId?: never }\n    | { orderId?: never; purchaseIntentId: string }\n  )\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n  /** Closes managed modal Checkout when it is open. */\n  dismiss(): void\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 * Displays 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 * - `canceled` when a payer dismisses managed modal Checkout;\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 *     presentation=\"modal\"\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    features: Object as PropType<CheckoutFeatures>,\n    locale: String,\n    orderId: String,\n    purchaseIntentId: String,\n    presentation: {\n      type: String as PropType<CheckoutPresentation>,\n      default: 'embedded',\n    },\n    timeout: Number,\n    title: String,\n  },\n  emits: {\n    canceled: (_event: Extract<CheckoutEvent, { type: 'canceled' }>) => true,\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      let canceled = false\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            features: props.features,\n            locale: props.locale,\n            orderId: props.orderId,\n            purchaseIntentId: props.purchaseIntentId,\n            timeout: props.timeout,\n            title: props.title,\n          }) as CheckoutOptions,\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 === 'canceled') {\n            canceled = true\n            emit('canceled', event)\n          }\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        if (props.presentation === 'modal') await instance.present()\n        else await instance.mount(target)\n      } catch (error: unknown) {\n        if (generation !== currentGeneration || canceled) 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      () => [\n        props.features,\n        props.orderId,\n        props.purchaseIntentId,\n        props.presentation,\n        props.timeout,\n        props.title,\n      ],\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      dismiss: () => checkout?.dismiss(),\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":"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","names":[]}

package/package.json

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