@inttegro/angular 0.4.0 → 0.5.2

package/README.md

@@ -15,8 +15,9 @@ 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:
+For a Buy link, bind `purchaseIntentId` instead of `orderId`. Fixed pricing
+continues directly to payment; customer-selected pricing renders the amount
+picker first. This works in both embedded and modal presentations:
 
 ```html
 <inttegro-checkout [purchaseIntentId]="purchaseIntentId" presentation="modal" />

package/fesm2022/inttegro-angular.mjs

@@ -26,6 +26,7 @@ import { loadInttegro } from '@inttegro/js';
  *       presentation="modal"
  *       [appearance]="{ theme: 'system' }"
  *       (completed)="onCompleted()"
+ *       (failed)="onFailed($event)"
  *       (error)="onError($event)"
  *     />
  *   `,
@@ -33,7 +34,10 @@ import { loadInttegro } from '@inttegro/js';
  * export class PaymentPage {
  *   orderId = input.required<string>()
  *   onCompleted(): void { location.assign('/orders/complete') }
- *   onError(error: CheckoutErrorEvent | Error): void {
+ *   onFailed(event: CheckoutFailedEvent): void {
+ *     showCheckoutFailure(event.failure)
+ *   }
+ *   onError(error: Error): void {
  *     reportCheckoutError(error)
  *   }
  * }
@@ -49,7 +53,9 @@ class CheckoutComponent {
         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. */
+        /** Emitted when Checkout reaches a terminal failure state. */
+        this.failed = new EventEmitter();
+        /** Emitted for loader or mount failures. */
         this.error = new EventEmitter();
         /** Emitted for every sanitized hosted Checkout lifecycle event. */
         this.event = new EventEmitter();
@@ -106,6 +112,7 @@ class CheckoutComponent {
         const generation = this.generation;
         const target = this.container.nativeElement;
         let canceled = false;
+        let failed = false;
         try {
             const inttegro = await loadInttegro();
             if (generation !== this.generation || !inttegro)
@@ -134,8 +141,10 @@ class CheckoutComponent {
                     this.ready.emit(event);
                 if (event.type === 'completed')
                     this.completed.emit(event);
-                if (event.type === 'error')
-                    this.error.emit(event);
+                if (event.type === 'failed') {
+                    failed = true;
+                    this.failed.emit(event);
+                }
             });
             if (this.presentation === 'modal')
                 await checkout.present();
@@ -143,7 +152,7 @@ class CheckoutComponent {
                 await checkout.mount(target);
         }
         catch (error) {
-            if (generation !== this.generation || canceled)
+            if (generation !== this.generation || canceled || failed)
                 return;
             this.error.emit(error instanceof Error ? error : new Error('Checkout failed to load.'));
         }
@@ -156,7 +165,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", 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 }); }
+    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", failed: "failed", 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,
@@ -186,6 +195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 type: Output
             }], canceled: [{
                 type: Output
+            }], failed: [{
+                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 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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"}
+{"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 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 *       (failed)=\"onFailed($event)\"\n *       (error)=\"onError($event)\"\n *     />\n *   `,\n * })\n * export class PaymentPage {\n *   orderId = input.required<string>()\n *   onCompleted(): void { location.assign('/orders/complete') }\n *   onFailed(event: CheckoutFailedEvent): void {\n *     showCheckoutFailure(event.failure)\n *   }\n *   onError(error: 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 fixed or customer-selected 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 when Checkout reaches a terminal failure state. */\n  @Output() readonly failed = new EventEmitter<\n    Extract<CheckoutEvent, { type: 'failed' }>\n  >()\n  /** Emitted for loader or mount failures. */\n  @Output() readonly error = new EventEmitter<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    let failed = 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 === 'failed') {\n          failed = true\n          this.failed.emit(event)\n        }\n      })\n      if (this.presentation === 'modal') await checkout.present()\n      else await checkout.mount(target)\n    } catch (error) {\n      if (generation !== this.generation || canceled || failed) 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  CheckoutEvent,\n  CheckoutFailedEvent,\n  CheckoutOrder,\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.4.0",
+  "version": "0.5.2",
   "description": "Angular components for Inttegro hosted workflows",
   "type": "module",
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "@inttegro/js": "0.4.0",
+    "@inttegro/js": "0.5.2",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {

package/types/inttegro-angular.d.ts

@@ -1,6 +1,6 @@
 import * as _inttegro_js from '@inttegro/js';
-import { CheckoutAppearance, CheckoutFeatures, CheckoutPresentation, CheckoutErrorEvent, CheckoutEvent, CheckoutUpdateOptions } from '@inttegro/js';
-export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutPresentation, CheckoutTheme } from '@inttegro/js';
+import { CheckoutAppearance, CheckoutFeatures, CheckoutPresentation, CheckoutEvent, CheckoutUpdateOptions } from '@inttegro/js';
+export { CheckoutAppearance, CheckoutEvent, CheckoutFailedEvent, CheckoutFeatures, CheckoutOrder, CheckoutPresentation, CheckoutTheme } from '@inttegro/js';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core';
 
@@ -28,6 +28,7 @@ import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from
  *       presentation="modal"
  *       [appearance]="{ theme: 'system' }"
  *       (completed)="onCompleted()"
+ *       (failed)="onFailed($event)"
  *       (error)="onError($event)"
  *     />
  *   `,
@@ -35,7 +36,10 @@ import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from
  * export class PaymentPage {
  *   orderId = input.required<string>()
  *   onCompleted(): void { location.assign('/orders/complete') }
- *   onError(error: CheckoutErrorEvent | Error): void {
+ *   onFailed(event: CheckoutFailedEvent): void {
+ *     showCheckoutFailure(event.failure)
+ *   }
+ *   onError(error: Error): void {
  *     reportCheckoutError(error)
  *   }
  * }
@@ -52,7 +56,7 @@ declare class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {
     locale?: string;
     /** Client-safe reference for the finalized Order being paid. */
     orderId?: string;
-    /** Client-safe amount-selection Purchase Intent. Mutually exclusive with orderId. */
+    /** Client-safe fixed or customer-selected Purchase Intent. Mutually exclusive with orderId. */
     purchaseIntentId?: string;
     /** Displays Checkout inline by default or in an Inttegro-managed modal. */
     presentation: CheckoutPresentation;
@@ -64,8 +68,10 @@ declare class CheckoutComponent implements AfterViewInit, OnChanges, OnDestroy {
     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 when Checkout reaches a terminal failure state. */
+    readonly failed: EventEmitter<_inttegro_js.CheckoutFailedEvent>;
+    /** Emitted for loader or mount failures. */
+    readonly error: EventEmitter<Error>;
     /** Emitted for every sanitized hosted Checkout lifecycle event. */
     readonly event: EventEmitter<CheckoutEvent>;
     /** Emitted once the iframe is interactive. */
@@ -93,7 +99,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": 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>;
+    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"; "failed": "failed"; "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":";;;;;;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":[]}
+{"version":3,"file":"inttegro-angular.d.ts","sources":["../../src/lib/checkout.component.ts"],"mappings":";;;;;;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;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;;qBAIF,YAAA,CAAA,YAAA,CAAA,mBAAA;;oBAID,YAAA,CAAA,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;;AAsDrC;yCArJW,iBAAiB;2CAAjB,iBAAiB;AA4J7B;;","names":[]}