@inttegro/angular 0.2.0 → 0.4.0

package/README.md

@@ -14,3 +14,10 @@ import { CheckoutComponent } from '@inttegro/angular'
 })
 export class PaymentPage {}
 ```
+
+For a `customer_selected_amount` Buy link, bind `purchaseIntentId` instead of
+`orderId`. This works in both embedded and modal presentations:
+
+```html
+<inttegro-checkout [purchaseIntentId]="purchaseIntentId" presentation="modal" />
+```

package/fesm2022/inttegro-angular.mjs

@@ -7,9 +7,9 @@ import { loadInttegro } from '@inttegro/js';
  *
  * Add the component to a host component's `imports` array. It loads the hosted
  * runtime after its view initializes, creates one controller, and destroys that
- * controller with the Angular view. Changing `features`, `orderId`, `timeout`,
- * or `title` replaces the controller; changing `appearance` or `locale`
- * updates it in place.
+ * controller with the Angular view. Changing `features`, `orderId`,
+ * `presentation`, `timeout`, or `title` replaces the controller; changing
+ * `appearance` or `locale` updates it in place.
  *
  * Keep this component mounted while a payment attempt or confirmation is
  * pending. The successful `completed` output is suitable for navigation, but
@@ -23,6 +23,7 @@ import { loadInttegro } from '@inttegro/js';
  *   template: `
  *     <inttegro-checkout
  *       [orderId]="orderId"
+ *       presentation="modal"
  *       [appearance]="{ theme: 'system' }"
  *       (completed)="onCompleted()"
  *       (error)="onError($event)"
@@ -42,10 +43,12 @@ import { loadInttegro } from '@inttegro/js';
  */
 class CheckoutComponent {
     constructor() {
-        /** Client-safe reference for the finalized Order being paid. */
-        this.orderId = '';
+        /** Displays Checkout inline by default or in an Inttegro-managed modal. */
+        this.presentation = 'embedded';
         /** Emitted after Checkout reports its successful terminal state. */
         this.completed = new EventEmitter();
+        /** Emitted when a payer dismisses managed modal Checkout before completion. */
+        this.canceled = new EventEmitter();
         /** Emitted for loader/mount failures and sanitized hosted errors. */
         this.error = new EventEmitter();
         /** Emitted for every sanitized hosted Checkout lifecycle event. */
@@ -64,6 +67,8 @@ class CheckoutComponent {
             return;
         if (changes['features'] ||
             changes['orderId'] ||
+            changes['purchaseIntentId'] ||
+            changes['presentation'] ||
             changes['timeout'] ||
             changes['title']) {
             void this.mountCheckout();
@@ -83,6 +88,10 @@ class CheckoutComponent {
     focus() {
         this.checkout?.focus();
     }
+    /** Closes managed modal Checkout when it is open. */
+    dismiss() {
+        this.checkout?.dismiss();
+    }
     /**
      * Applies a new locale or color scheme when a controller exists.
      * Prefer binding `appearance` and `locale` for declarative Angular views.
@@ -96,6 +105,7 @@ class CheckoutComponent {
         this.destroyCheckout();
         const generation = this.generation;
         const target = this.container.nativeElement;
+        let canceled = false;
         try {
             const inttegro = await loadInttegro();
             if (generation !== this.generation || !inttegro)
@@ -105,6 +115,7 @@ class CheckoutComponent {
                 features: this.features,
                 locale: this.locale,
                 orderId: this.orderId,
+                purchaseIntentId: this.purchaseIntentId,
                 timeout: this.timeout,
                 title: this.title,
             }));
@@ -115,6 +126,10 @@ class CheckoutComponent {
             this.checkout = checkout;
             this.unsubscribe = checkout.onEvent((event) => {
                 this.event.emit(event);
+                if (event.type === 'canceled') {
+                    canceled = true;
+                    this.canceled.emit(event);
+                }
                 if (event.type === 'ready')
                     this.ready.emit(event);
                 if (event.type === 'completed')
@@ -122,10 +137,13 @@ class CheckoutComponent {
                 if (event.type === 'error')
                     this.error.emit(event);
             });
-            await checkout.mount(target);
+            if (this.presentation === 'modal')
+                await checkout.present();
+            else
+                await checkout.mount(target);
         }
         catch (error) {
-            if (generation !== this.generation)
+            if (generation !== this.generation || canceled)
                 return;
             this.error.emit(error instanceof Error ? error : new Error('Checkout failed to load.'));
         }
@@ -138,7 +156,7 @@ class CheckoutComponent {
         this.checkout = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: CheckoutComponent, isStandalone: true, selector: "inttegro-checkout", inputs: { appearance: "appearance", features: "features", locale: "locale", orderId: "orderId", timeout: "timeout", title: "title" }, outputs: { completed: "completed", error: "error", event: "event", ready: "ready" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: CheckoutComponent, isStandalone: true, selector: "inttegro-checkout", inputs: { appearance: "appearance", features: "features", locale: "locale", orderId: "orderId", purchaseIntentId: "purchaseIntentId", presentation: "presentation", timeout: "timeout", title: "title" }, outputs: { completed: "completed", canceled: "canceled", error: "error", event: "event", ready: "ready" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckoutComponent, decorators: [{
             type: Component,
@@ -155,14 +173,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }], locale: [{
                 type: Input
             }], orderId: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
+            }], purchaseIntentId: [{
+                type: Input
+            }], presentation: [{
+                type: Input
             }], timeout: [{
                 type: Input
             }], title: [{
                 type: Input
             }], completed: [{
                 type: Output
+            }], canceled: [{
+                type: Output
             }], error: [{
                 type: Output
             }], event: [{

package/fesm2022/inttegro-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inttegro-angular.mjs","sources":["../../src/lib/checkout.component.ts","../../src/public-api.ts","../../src/inttegro-angular.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  type AfterViewInit,\n  type OnChanges,\n  type OnDestroy,\n  type SimpleChanges,\n} from '@angular/core'\nimport {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutFeatures,\n  type CheckoutUpdateOptions,\n} from '@inttegro/js'\n\n/**\n * Standalone Angular component that embeds Inttegro-hosted Checkout.\n *\n * Add the component to a host component's `imports` array. It loads the hosted\n * runtime after its view initializes, creates one controller, and destroys that\n * controller with the Angular view. Changing `features`, `orderId`, `timeout`,\n * or `title` replaces the controller; changing `appearance` or `locale`\n * updates it in place.\n *\n * Keep this component mounted while a payment attempt or confirmation is\n * pending. The successful `completed` output is suitable for navigation, but\n * fulfillment must use server-retrieved Order state or a signed webhook.\n *\n * @example\n * ```ts\n * @Component({\n *   standalone: true,\n *   imports: [CheckoutComponent],\n *   template: `\n *     <inttegro-checkout\n *       [orderId]=\"orderId\"\n *       [appearance]=\"{ theme: 'system' }\"\n *       (completed)=\"onCompleted()\"\n *       (error)=\"onError($event)\"\n *     />\n *   `,\n * })\n * export class PaymentPage {\n *   orderId = input.required<string>()\n *   onCompleted(): void { location.assign('/orders/complete') }\n *   onError(error: CheckoutErrorEvent | Error): void {\n *     reportCheckoutError(error)\n *   }\n * }\n * ```\n *\n * @category Angular\n */\n@Component({\n  selector: 'inttegro-checkout',\n  standalone: true,\n  template: '<div #container></div>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  @Input() appearance?: CheckoutAppearance\n  /** Hosted Checkout content and actions. Changing it replaces the controller. */\n  @Input() features?: CheckoutFeatures\n  /** Initial and reactive BCP 47 locale preference. */\n  @Input() locale?: string\n  /** Client-safe reference for the finalized Order being paid. */\n  @Input({ required: true }) orderId = ''\n  /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n  @Input() timeout?: number\n  /** Accessible iframe title; defaults to `Checkout`. */\n  @Input() title?: string\n\n  /** Emitted after Checkout reports its successful terminal state. */\n  @Output() readonly completed = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'completed' }>\n  >()\n  /** Emitted for loader/mount failures and sanitized hosted errors. */\n  @Output() readonly error = new EventEmitter<CheckoutErrorEvent | Error>()\n  /** Emitted for every sanitized hosted Checkout lifecycle event. */\n  @Output() readonly event = new EventEmitter<CheckoutEvent>()\n  /** Emitted once the iframe is interactive. */\n  @Output() readonly ready = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'ready' }>\n  >()\n\n  @ViewChild('container', { static: true })\n  private container?: ElementRef<HTMLDivElement>\n\n  private checkout: CheckoutController | undefined\n  private unsubscribe: (() => void) | undefined\n  private viewReady = false\n  private generation = 0\n\n  ngAfterViewInit(): void {\n    this.viewReady = true\n    void this.mountCheckout()\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.viewReady) return\n\n    if (\n      changes['features'] ||\n      changes['orderId'] ||\n      changes['timeout'] ||\n      changes['title']\n    ) {\n      void this.mountCheckout()\n      return\n    }\n\n    if (changes['appearance'] || changes['locale']) {\n      this.checkout?.update(\n        definedOptions({ appearance: this.appearance, locale: this.locale }),\n      )\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroyCheckout()\n  }\n\n  /**\n   * Moves focus into hosted Checkout when its controller is ready.\n   * Before initialization or after teardown this method safely does nothing.\n   */\n  focus(): void {\n    this.checkout?.focus()\n  }\n\n  /**\n   * Applies a new locale or color scheme when a controller exists.\n   * Prefer binding `appearance` and `locale` for declarative Angular views.\n   */\n  update(options: CheckoutUpdateOptions): void {\n    this.checkout?.update(options)\n  }\n\n  private async mountCheckout(): Promise<void> {\n    if (!this.container) return\n    this.destroyCheckout()\n    const generation = this.generation\n    const target = this.container.nativeElement\n\n    try {\n      const inttegro = await loadInttegro()\n      if (generation !== this.generation || !inttegro) return\n      const checkout = inttegro.createCheckout(\n        definedOptions({\n          appearance: this.appearance,\n          features: this.features,\n          locale: this.locale,\n          orderId: this.orderId,\n          timeout: this.timeout,\n          title: this.title,\n        }),\n      )\n      if (generation !== this.generation) {\n        checkout.destroy()\n        return\n      }\n      this.checkout = checkout\n      this.unsubscribe = checkout.onEvent((event) => {\n        this.event.emit(event)\n        if (event.type === 'ready') this.ready.emit(event)\n        if (event.type === 'completed') this.completed.emit(event)\n        if (event.type === 'error') this.error.emit(event)\n      })\n      await checkout.mount(target)\n    } catch (error) {\n      if (generation !== this.generation) return\n      this.error.emit(\n        error instanceof Error ? error : new Error('Checkout failed to load.'),\n      )\n    }\n  }\n\n  private destroyCheckout(): void {\n    this.generation += 1\n    this.unsubscribe?.()\n    this.unsubscribe = undefined\n    this.checkout?.destroy()\n    this.checkout = undefined\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","/**\n * Angular standalone component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/angular\n */\nexport { CheckoutComponent } from './lib/checkout.component'\nexport type {\n  CheckoutAppearance,\n  CheckoutErrorEvent,\n  CheckoutEvent,\n  CheckoutFeatures,\n  CheckoutTheme,\n} from '@inttegro/js'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inttegro-angular.mjs","sources":["../../src/lib/checkout.component.ts","../../src/public-api.ts","../../src/inttegro-angular.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  type AfterViewInit,\n  type OnChanges,\n  type OnDestroy,\n  type SimpleChanges,\n} from '@angular/core'\nimport {\n  loadInttegro,\n  type CheckoutAppearance,\n  type CheckoutController,\n  type CheckoutErrorEvent,\n  type CheckoutEvent,\n  type CheckoutFeatures,\n  type CheckoutOptions,\n  type CheckoutPresentation,\n  type CheckoutUpdateOptions,\n} from '@inttegro/js'\n\n/**\n * Standalone Angular component that embeds Inttegro-hosted Checkout.\n *\n * Add the component to a host component's `imports` array. It loads the hosted\n * runtime after its view initializes, creates one controller, and destroys that\n * controller with the Angular view. Changing `features`, `orderId`,\n * `presentation`, `timeout`, or `title` replaces the controller; changing\n * `appearance` or `locale` updates it in place.\n *\n * Keep this component mounted while a payment attempt or confirmation is\n * pending. The successful `completed` output is suitable for navigation, but\n * fulfillment must use server-retrieved Order state or a signed webhook.\n *\n * @example\n * ```ts\n * @Component({\n *   standalone: true,\n *   imports: [CheckoutComponent],\n *   template: `\n *     <inttegro-checkout\n *       [orderId]=\"orderId\"\n *       presentation=\"modal\"\n *       [appearance]=\"{ theme: 'system' }\"\n *       (completed)=\"onCompleted()\"\n *       (error)=\"onError($event)\"\n *     />\n *   `,\n * })\n * export class PaymentPage {\n *   orderId = input.required<string>()\n *   onCompleted(): void { location.assign('/orders/complete') }\n *   onError(error: CheckoutErrorEvent | Error): void {\n *     reportCheckoutError(error)\n *   }\n * }\n * ```\n *\n * @category Angular\n */\n@Component({\n  selector: 'inttegro-checkout',\n  standalone: true,\n  template: '<div #container></div>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {\n  /** Initial and reactive theme preference for hosted Checkout. */\n  @Input() appearance?: CheckoutAppearance\n  /** Hosted Checkout content and actions. Changing it replaces the controller. */\n  @Input() features?: CheckoutFeatures\n  /** Initial and reactive BCP 47 locale preference. */\n  @Input() locale?: string\n  /** Client-safe reference for the finalized Order being paid. */\n  @Input() orderId?: string\n  /** Client-safe amount-selection Purchase Intent. Mutually exclusive with orderId. */\n  @Input() purchaseIntentId?: string\n  /** Displays Checkout inline by default or in an Inttegro-managed modal. */\n  @Input() presentation: CheckoutPresentation = 'embedded'\n  /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n  @Input() timeout?: number\n  /** Accessible iframe title; defaults to `Checkout`. */\n  @Input() title?: string\n\n  /** Emitted after Checkout reports its successful terminal state. */\n  @Output() readonly completed = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'completed' }>\n  >()\n  /** Emitted when a payer dismisses managed modal Checkout before completion. */\n  @Output() readonly canceled = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'canceled' }>\n  >()\n  /** Emitted for loader/mount failures and sanitized hosted errors. */\n  @Output() readonly error = new EventEmitter<CheckoutErrorEvent | Error>()\n  /** Emitted for every sanitized hosted Checkout lifecycle event. */\n  @Output() readonly event = new EventEmitter<CheckoutEvent>()\n  /** Emitted once the iframe is interactive. */\n  @Output() readonly ready = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'ready' }>\n  >()\n\n  @ViewChild('container', { static: true })\n  private container?: ElementRef<HTMLDivElement>\n\n  private checkout: CheckoutController | undefined\n  private unsubscribe: (() => void) | undefined\n  private viewReady = false\n  private generation = 0\n\n  ngAfterViewInit(): void {\n    this.viewReady = true\n    void this.mountCheckout()\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.viewReady) return\n\n    if (\n      changes['features'] ||\n      changes['orderId'] ||\n      changes['purchaseIntentId'] ||\n      changes['presentation'] ||\n      changes['timeout'] ||\n      changes['title']\n    ) {\n      void this.mountCheckout()\n      return\n    }\n\n    if (changes['appearance'] || changes['locale']) {\n      this.checkout?.update(\n        definedOptions({ appearance: this.appearance, locale: this.locale }),\n      )\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroyCheckout()\n  }\n\n  /**\n   * Moves focus into hosted Checkout when its controller is ready.\n   * Before initialization or after teardown this method safely does nothing.\n   */\n  focus(): void {\n    this.checkout?.focus()\n  }\n\n  /** Closes managed modal Checkout when it is open. */\n  dismiss(): void {\n    this.checkout?.dismiss()\n  }\n\n  /**\n   * Applies a new locale or color scheme when a controller exists.\n   * Prefer binding `appearance` and `locale` for declarative Angular views.\n   */\n  update(options: CheckoutUpdateOptions): void {\n    this.checkout?.update(options)\n  }\n\n  private async mountCheckout(): Promise<void> {\n    if (!this.container) return\n    this.destroyCheckout()\n    const generation = this.generation\n    const target = this.container.nativeElement\n    let canceled = false\n\n    try {\n      const inttegro = await loadInttegro()\n      if (generation !== this.generation || !inttegro) return\n      const checkout = inttegro.createCheckout(\n        definedOptions({\n          appearance: this.appearance,\n          features: this.features,\n          locale: this.locale,\n          orderId: this.orderId,\n          purchaseIntentId: this.purchaseIntentId,\n          timeout: this.timeout,\n          title: this.title,\n        }) as CheckoutOptions,\n      )\n      if (generation !== this.generation) {\n        checkout.destroy()\n        return\n      }\n      this.checkout = checkout\n      this.unsubscribe = checkout.onEvent((event) => {\n        this.event.emit(event)\n        if (event.type === 'canceled') {\n          canceled = true\n          this.canceled.emit(event)\n        }\n        if (event.type === 'ready') this.ready.emit(event)\n        if (event.type === 'completed') this.completed.emit(event)\n        if (event.type === 'error') this.error.emit(event)\n      })\n      if (this.presentation === 'modal') await checkout.present()\n      else await checkout.mount(target)\n    } catch (error) {\n      if (generation !== this.generation || canceled) return\n      this.error.emit(\n        error instanceof Error ? error : new Error('Checkout failed to load.'),\n      )\n    }\n  }\n\n  private destroyCheckout(): void {\n    this.generation += 1\n    this.unsubscribe?.()\n    this.unsubscribe = undefined\n    this.checkout?.destroy()\n    this.checkout = undefined\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","/**\n * Angular standalone component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/angular\n */\nexport { CheckoutComponent } from './lib/checkout.component'\nexport type {\n  CheckoutAppearance,\n  CheckoutErrorEvent,\n  CheckoutEvent,\n  CheckoutFeatures,\n  CheckoutPresentation,\n  CheckoutTheme,\n} from '@inttegro/js'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@inttegro/angular",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Angular components for Inttegro hosted workflows",
   "type": "module",
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "@inttegro/js": "0.2.0",
+    "@inttegro/js": "0.4.0",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
@@ -16,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zebodotdev/js.git",
+    "url": "git+https://github.com/inttegro/js.git",
     "directory": "packages/angular"
   },
   "homepage": "https://studio.inttegro.com/web/angular",

package/types/inttegro-angular.d.ts

@@ -1,6 +1,6 @@
 import * as _inttegro_js from '@inttegro/js';
-import { CheckoutAppearance, CheckoutFeatures, CheckoutErrorEvent, CheckoutEvent, CheckoutUpdateOptions } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
+import { CheckoutAppearance, CheckoutFeatures, CheckoutPresentation, CheckoutErrorEvent, CheckoutEvent, CheckoutUpdateOptions } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation, CheckoutTheme } from '@inttegro/js';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core';
 
@@ -9,9 +9,9 @@ import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from
  *
  * Add the component to a host component's `imports` array. It loads the hosted
  * runtime after its view initializes, creates one controller, and destroys that
- * controller with the Angular view. Changing `features`, `orderId`, `timeout`,
- * or `title` replaces the controller; changing `appearance` or `locale`
- * updates it in place.
+ * controller with the Angular view. Changing `features`, `orderId`,
+ * `presentation`, `timeout`, or `title` replaces the controller; changing
+ * `appearance` or `locale` updates it in place.
  *
  * Keep this component mounted while a payment attempt or confirmation is
  * pending. The successful `completed` output is suitable for navigation, but
@@ -25,6 +25,7 @@ import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from
  *   template: `
  *     <inttegro-checkout
  *       [orderId]="orderId"
+ *       presentation="modal"
  *       [appearance]="{ theme: 'system' }"
  *       (completed)="onCompleted()"
  *       (error)="onError($event)"
@@ -50,13 +51,19 @@ declare class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {
     /** Initial and reactive BCP 47 locale preference. */
     locale?: string;
     /** Client-safe reference for the finalized Order being paid. */
-    orderId: string;
+    orderId?: string;
+    /** Client-safe amount-selection Purchase Intent. Mutually exclusive with orderId. */
+    purchaseIntentId?: string;
+    /** Displays Checkout inline by default or in an Inttegro-managed modal. */
+    presentation: CheckoutPresentation;
     /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */
     timeout?: number;
     /** Accessible iframe title; defaults to `Checkout`. */
     title?: string;
     /** Emitted after Checkout reports its successful terminal state. */
     readonly completed: EventEmitter<_inttegro_js.CheckoutCompletedEvent>;
+    /** Emitted when a payer dismisses managed modal Checkout before completion. */
+    readonly canceled: EventEmitter<_inttegro_js.CheckoutCanceledEvent>;
     /** Emitted for loader/mount failures and sanitized hosted errors. */
     readonly error: EventEmitter<CheckoutErrorEvent | Error>;
     /** Emitted for every sanitized hosted Checkout lifecycle event. */
@@ -76,6 +83,8 @@ declare class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {
      * Before initialization or after teardown this method safely does nothing.
      */
     focus(): void;
+    /** Closes managed modal Checkout when it is open. */
+    dismiss(): void;
     /**
      * Applies a new locale or color scheme when a controller exists.
      * Prefer binding `appearance` and `locale` for declarative Angular views.
@@ -84,7 +93,7 @@ declare class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {
     private mountCheckout;
     private destroyCheckout;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutComponent, "inttegro-checkout", never, { "appearance": { "alias": "appearance"; "required": false; }; "features": { "alias": "features"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "orderId": { "alias": "orderId"; "required": true; }; "timeout": { "alias": "timeout"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, { "completed": "completed"; "error": "error"; "event": "event"; "ready": "ready"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckoutComponent, "inttegro-checkout", never, { "appearance": { "alias": "appearance"; "required": false; }; "features": { "alias": "features"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "orderId": { "alias": "orderId"; "required": false; }; "purchaseIntentId": { "alias": "purchaseIntentId"; "required": false; }; "presentation": { "alias": "presentation"; "required": false; }; "timeout": { "alias": "timeout"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, { "completed": "completed"; "canceled": "canceled"; "error": "error"; "event": "event"; "ready": "ready"; }, never, never, true, never>;
 }
 
 export { CheckoutComponent };

package/types/inttegro-angular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inttegro-angular.d.ts","sources":["../../src/lib/checkout.component.ts"],"mappings":";;;;;;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACH,cAMa,iBAAkB,YAAW,aAAa,EAAE,SAAS,EAAE,SAAS;;iBAErD,kBAAkB;;eAEpB,gBAAgB;;;;AAIT;;;;;;wBAOC,YAAA,CAAA,YAAA,CAAA,sBAAA;;oBAIJ,YAAA,CAAA,kBAAA,GAAA,KAAA;;oBAEA,YAAA,CAAA,aAAA;;oBAEA,YAAA,CAAA,YAAA,CAAA,kBAAA;;;;;;AAYxB;AAKA,yBAAqB,aAAa;AAoBlC;AAIA;;;AAGG;AACH;AAIA;;;AAGG;AACH,oBAAgB,qBAAqB;;AA2CrC;yCAvHW,iBAAiB;2CAAjB,iBAAiB;AA8H7B;;","names":[]}
+{"version":3,"file":"inttegro-angular.d.ts","sources":["../../src/lib/checkout.component.ts"],"mappings":";;;;;;AAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACH,cAMa,iBAAkB,YAAW,aAAa,EAAE,SAAS,EAAE,SAAS;;iBAErD,kBAAkB;;eAEpB,gBAAgB;;;;;;;;kBAQb,oBAAoB;;;;;;wBAOf,YAAA,CAAA,YAAA,CAAA,sBAAA;;uBAID,YAAA,CAAA,YAAA,CAAA,qBAAA;;oBAIH,YAAA,CAAA,kBAAA,GAAA,KAAA;;oBAEA,YAAA,CAAA,aAAA;;oBAEA,YAAA,CAAA,YAAA,CAAA,kBAAA;;;;;;AAYxB;AAKA,yBAAqB,aAAa;AAsBlC;AAIA;;;AAGG;AACH;;AAKA;AAIA;;;AAGG;AACH,oBAAgB,qBAAqB;;AAkDrC;yCA7IW,iBAAiB;2CAAjB,iBAAiB;AAoJ7B;;","names":[]}