Angular gives components explicit input, output, view-initialization, change, and destruction boundaries. @inttegro/angular maps Inttegro Checkout onto those boundaries with a standalone CheckoutComponent: inputs configure the hosted experience, outputs expose its events, and Angular lifecycle hooks own the controller.
Prefer the official adapter for Angular 18 through 22. It works naturally with standalone application architecture and OnPush host components, while centralizing asynchronous mount cancellation and cleanup that would otherwise be repeated in directives or component hooks. Your application remains responsible for the route, surrounding layout, telemetry, and server reconciliation—not for the hosted controller's bookkeeping.
Use the package manager that owns your Angular workspace. With npm:
npm install @inttegro/angular
The adapter depends on @inttegro/js. Both are public integration packages; neither bundles the executable payment-collection runtime. After the Angular view initializes in a browser, the shared loader obtains that runtime from Inttegro's fixed origin.
Create and finalize the Order in a trusted server process. Resolve or transfer only its client-safe Order ID into the Angular route. Do not place Inttegro secret keys in environment.ts, transfer state, route data, or any other value delivered to the browser.
Import CheckoutComponent directly into the component that owns the payment route or payment action:
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import {
CheckoutComponent,
type CheckoutAppearance,
type CheckoutEvent,
} from '@inttegro/angular'
@Component({
selector: 'app-payment-page',
standalone: true,
imports: [CheckoutComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<main>
<h1>Complete your order</h1>
@if (initializationFailed) {
<p role="alert">
Checkout could not load. Refresh the page to try again.
</p>
} @else {
<inttegro-checkout
[orderId]="orderId"
[appearance]="appearance"
locale="en-GH"
title="Payment for your order"
style="display: block; inline-size: 100%; min-block-size: 32rem"
(event)="recordEvent($event)"
(completed)="handleCompleted()"
(failed)="handleFailed($event)"
(error)="handleError($event)"
/>
}
</main>
`,
})
export class PaymentPageComponent {
@Input({ required: true }) orderId = ''
@Input({ required: true }) pageSessionId = ''
appearance: CheckoutAppearance = { theme: 'system' }
initializationFailed = false
recordEvent(event: CheckoutEvent): void {
navigator.sendBeacon(
'/telemetry/checkout',
new Blob(
[
JSON.stringify({
type: event.type,
occurredAt: event.occurredAt,
pageSessionId: this.pageSessionId,
}),
],
{ type: 'application/json' },
),
)
}
handleCompleted(): void {
window.location.assign('/orders/complete')
}
handleFailed(event: Extract<CheckoutEvent, { type: 'failed' }>): void {
reportCheckoutFailure(event.failure)
}
handleError(error: Error): void {
this.initializationFailed = true
navigator.sendBeacon(
'/telemetry/checkout',
new Blob(
[
JSON.stringify({
type: 'initializationFailed',
message: error.message,
pageSessionId: this.pageSessionId,
}),
],
{ type: 'application/json' },
),
)
}
}
The completion page must retrieve the authoritative Order from your server before fulfillment. An Angular output is a browser presentation signal, not evidence that funds settled.
The standalone adapter implements AfterViewInit, OnChanges, and OnDestroy:
ngAfterViewInit() begins loading only after Angular has created the container element.ngOnChanges() treats features, orderId, presentation, timeout, and title as controller identity. Changing one destroys the old controller and starts a new embedded or modal experience.appearance or locale call update() on the current controller instead.ngOnDestroy() unsubscribes and destroys the controller when a route or conditional block removes the component.Angular reports input changes by reference. Replace the appearance object when changing its theme instead of mutating the existing object in place:
this.appearance = { theme: prefersDark ? 'dark' : 'light' }
Keep <inttegro-checkout> mounted while a payment attempt or external confirmation is pending. Removing the component ends the browser experience, although your server must still reconcile any attempt already submitted.
Set presentation="modal" when Checkout should open above the page. The shared runtime supplies the dialog, backdrop, responsive sizing, scrolling, close control, and focus behavior. The component exposes dismiss(), focus(), and update(); use a @ViewChild reference when host state must close the modal programmatically:
@ViewChild(CheckoutComponent) checkout?: CheckoutComponent
dismissCheckout(): void {
this.checkout?.dismiss()
}
The adapter follows Angular output conventions:
(event) emits every sanitized CheckoutEvent;(ready) emits when the frame becomes interactive;(completed) emits at the successful hosted terminal state;(canceled) emits when a payer dismisses managed modal Checkout; and(failed) emits Checkout's sanitized terminal failure event; and(error) emits loader, configuration, and mount failures.Use (event) for comprehensive lifecycle handling, including orderPrepared, paymentActionRequired, paymentProcessing, and paymentAttemptFailed. The generic output fires before the matching specialized output for the same event.
An Error from (error) means the loader, configuration, or mount failed and
a host-page fallback is appropriate. A failed lifecycle event means Checkout
cannot continue this presentation; use its sanitized failure object for coarse
application logic without duplicating Checkout's payer-facing message.
The adapter's template is a stable empty div. The core loader returns null outside a browser, and controller creation occurs only when a browser runtime is available. Angular SSR can therefore emit the host structure and hydrate it before the hosted frame takes ownership of the container.
Keep secret credentials on the server and transfer only the finalized Order ID. A new Order ID after navigation creates a fresh controller; a locale or theme change updates the mounted experience.
The current adapter does not expose loadInttegro() options. If your Content Security Policy requires a unique script or managed-modal style nonce per response, use @inttegro/js directly. For ordinary Angular component ownership, the standalone adapter is the preferred integration.