Skip to main content

Inttegro for Angular

Use @inttegro/angular to render Inttegro-hosted Checkout as a standalone Angular component. The adapter uses Angular inputs, outputs, and component lifecycle hooks to manage Checkout.

Developer preview

This package and the hosted runtime are not yet available for live payments. The installation commands below will work after the preview package is published.

Prerequisites

  • Angular 18 through 22
  • A backend that creates and finalizes an Inttegro Order
  • The client-safe Order ID returned to your Angular application

Install the component

npm install @inttegro/angular

Read the npm setup guide

Render Checkout

CheckoutComponent is standalone. Import it into the Angular component that owns the payment route or modal:

import { Component, Input } from '@angular/core'
import {
  CheckoutComponent,
  type CheckoutErrorEvent,
  type CheckoutEvent,
} from '@inttegro/angular'

@Component({
  selector: 'app-checkout-page',
  standalone: true,
  imports: [CheckoutComponent],
  template: `
    <inttegro-checkout
      [appearance]="{ theme: 'system' }"
      [orderId]="orderId"
      locale="en-GH"
      title="Complete your payment"
      (completed)="handleCompleted()"
      (error)="handleError($event)"
      (event)="handleEvent($event)"
    />
    <p aria-live="polite">{{ message }}</p>
  `,
})
export class CheckoutPageComponent {
  @Input({ required: true }) orderId = ''

  message = ''

  handleCompleted(): void {
    window.location.assign('/payment-status')
  }

  handleError(error: CheckoutErrorEvent | Error): void {
    this.message = error instanceof Error ? error.message : error.error.message
  }

  handleEvent(event: CheckoutEvent): void {
    if (event.type === 'paymentAttempt') {
      this.message = 'Starting your payment…'
    }
  }
}

The component also accepts timeout. Changing appearance or locale updates the active Checkout. Changing orderId, timeout, or title destroys the old instance and creates a new one.

Handle output events

OutputEmitted when
completedCheckout observes payment completion.
errorLoading, mounting, or the hosted flow reports an error.
eventAny privacy-safe lifecycle event is received.
readyCheckout is ready for customer interaction.

The error output contains an Error for loader or mount failures and a CheckoutErrorEvent for errors reported by the hosted flow. The event output receives every hosted lifecycle event, including ready, completed, and error.

Use these outputs for interface state and telemetry. Before fulfillment, have your backend look up the Order; the completed output alone is not authoritative money state.

Focus or update Checkout

Use ViewChild to call the component's public focus() or update() method:

import { Component, ViewChild } from '@angular/core'
import { CheckoutComponent } from '@inttegro/angular'

@Component({
  selector: 'app-focused-checkout',
  standalone: true,
  imports: [CheckoutComponent],
  template: `
    <inttegro-checkout [orderId]="orderId" (ready)="focusCheckout()" />
  `,
})
export class FocusedCheckoutComponent {
  @ViewChild(CheckoutComponent) checkout?: CheckoutComponent

  orderId = 'ORDER_ID_FROM_YOUR_BACKEND'

  focusCheckout(): void {
    this.checkout?.focus()
  }
}

Use update() only for appearance and locale. Angular inputs are preferable when those values already belong to component state.

Use modals, routes, and server rendering

Create CheckoutComponent only while an application-owned modal is open. Destroying the Angular component removes its event subscription and destroys its Checkout instance. Keep scrolling, the close policy, and focus return in the modal component.

The loader returns null outside a browser. With Angular server rendering, the server produces the empty host element and the adapter mounts Checkout during the client view lifecycle.