---
title: "Angular"
description: "Integrate Inttegro Checkout as embedded content or inside an application-owned dialog in Angular."
canonical: "https://studio.inttegro.com/web/angular"
format: inttegro-machine-docs/v1
language: "Go"
sdk_version: "v11.0.1"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/go/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 589
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "curated"
recommended_mcp_tools: ["design_integration","check_integration_readiness"]
estimated_tokens: 2802
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Use the Angular Checkout component with a backend-created Order ID; its outputs update the page but authoritative order lookup controls fulfillment.

### Five questions

#### Q1. What must the Angular page receive from its backend?

Only the finalized Order ID needed by Checkout. Keep API credentials, customer payment details, and decisions about line items and amount in the trusted backend; [Orders](https://studio.inttegro.com/machine/go/api/orders.md#create-an-order) defines creation and [web setup](https://studio.inttegro.com/machine/go/web.md) describes the handoff.

#### Q2. Which package and presentation does Angular use?

Install @inttegro/angular and render its documented Checkout component for embedded or modal presentation; a hosted-page handoff does not mount the component. Choose one path in [the Angular guide](https://studio.inttegro.com/machine/go/web/angular.md#choose-and-render-a-presentation) before wiring lifecycle events.

#### Q3. What does the completed event mean?

Use (completed) for UI or navigation, then ask the backend to [look up the Order](https://studio.inttegro.com/machine/go/api/orders.md#lookup-an-order) before fulfillment. Handle the documented error and other lifecycle signals separately; [events](https://studio.inttegro.com/machine/go/web/angular.md#handle-output-events) are not a replacement for server state.

#### Q4. How do updates and server rendering affect Checkout?

A changed Order ID, features, timeout, or title creates a new Checkout instance; supported appearance/locale changes can update an active one. The loader returns null outside the browser; server rendering leaves a host element for client-side mounting. See [routes and server rendering](https://studio.inttegro.com/machine/go/web/angular.md#use-routes-and-server-rendering).

#### Q5. What can an integration agent verify first?

With an authenticated MCP connection, [design_integration](https://studio.inttegro.com/machine/go/inttegro-mcp/tools.md#design_integration) can plan the backend/browser boundary and [check_integration_readiness](https://studio.inttegro.com/machine/go/inttegro-mcp/tools.md#check_integration_readiness) can audit declared secret, idempotency, and lookup controls. Compile the Angular example and test success, cancellation, and failure with disposable orders.

## Document 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.

## Prerequisites

- Angular 18 through 22
- A backend that [creates](https://studio.inttegro.com/machine/go/api/orders.md#create-an-order) and
  [finalizes](https://studio.inttegro.com/machine/go/api/orders.md#finalize-an-order) an Inttegro Order
- A client-safe finalized Order ID or Purchase Intent ID

## Install the component

> Web Sdk Install Tabs is interactive content. Use the canonical page to view it.

## Choose and render a presentation

The [FastAPI live demo](https://fastapi-demo.inttegro.dev) uses Angular 21 and
`@inttegro/angular` for both presentations while keeping credentials and Order
creation on the server; its [released Angular component](https://github.com/inttegro/inttegro-demos/blob/fastapi-v1.8.3/fastapi/client/checkout-flow.component.ts)
shows the complete boundary. Compare the presentations below, then use the
matching implementation that follows. Open any screenshot at full size when you
need to inspect the layout.

> Demo Presentation Gallery is interactive content. Use the canonical page to view it.

`CheckoutComponent` is standalone. Import it into the Angular component that
owns payment collection, then choose whether it participates in the page layout
or opens above it.

### Embedded

Choose embedded Checkout for a dedicated payment route, checkout step, or
invoice layout where the form should remain visible. Your Angular template owns
the component's position and surrounding content; Inttegro owns the hosted
payment surface inside it.

```typescript
import { Component, Input } from '@angular/core'
import { CheckoutComponent } from '@inttegro/angular'

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

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

  handleError(error: Error): void {
    this.message = error.message
  }
}
```

Keep the component mounted while payment or provider confirmation is in
progress. Your layout
controls the host element's width and placement; merchant CSS does not reach
the hosted controls. Let Checkout report its own height; avoid fixed heights or
overflow clipping on the payment region.

### Modal

Choose a modal when payment starts from a button and the current page should
remain mounted underneath. Your application owns the dialog, trigger, close
control, focus restoration, and scrolling. Create the same `CheckoutComponent`
only while the dialog is open.

```typescript
import { Component, Input } from '@angular/core'
import { CheckoutComponent } from '@inttegro/angular'

@Component({
  selector: 'app-payment-action',
  standalone: true,
  imports: [CheckoutComponent],
  template: `
    <button [disabled]="open" (click)="openDialog(dialog)">Pay now</button>

    <dialog #dialog aria-labelledby="payment-title" (close)="open = false">
      <h2 id="payment-title">Complete payment</h2>
      <button type="button" (click)="dialog.close()">Close</button>
      @if (open) {
        <inttegro-checkout
          [appearance]="{ theme: 'system' }"
          [orderId]="orderId"
          (completed)="handleCompleted()"
          (error)="handleError($event)"
        />
      }
    </dialog>

    <p aria-live="polite">{{ message }}</p>
  `,
})
export class PaymentActionComponent {
  @Input({ required: true }) orderId = ''
  open = false
  message = ''

  openDialog(dialog: HTMLDialogElement): void {
    this.open = true
    dialog.showModal()
  }

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

  handleError(error: Error): void {
    this.message = error.message
  }
}
```

Closing the application dialog resets `open`; Angular then destroys the
Checkout component, its controller, and its subscriptions. Keep the dialog open
while a payment attempt or provider confirmation is in progress.

## Start from a Buy link

Bind a Buy link's public Purchase Intent instead of creating a finalized Order:

```html
<inttegro-checkout [purchaseIntentId]="purchaseIntentId" />
```

Set `presentation="modal"` on the same component for the managed modal
experience. Checkout renders the full Buy experience and creates the finalized
Order only after the buyer continues. Payment then continues in the same
component. Bind either `orderId` or `purchaseIntentId`, never both.

For hosted-page presentation, do not mount `CheckoutComponent`. Submit to your
backend and have it return a `303` redirect to the hosted Checkout URL for the
finalized Order, as the FastAPI demo does.

The component also accepts `features`, `timeout`, and `title`. `features`
controls line-item visibility, post-payment invoice and receipt actions, and
whether an attached payment method can be replaced. Changing `appearance` or
`locale` updates the active Checkout. Changing `features`, `orderId`,
`purchaseIntentId`, `timeout`, or `title` creates a new instance.

## Handle output events

| Output      | Emitted when                                            |
| ----------- | ------------------------------------------------------- |
| `canceled`  | The payer leaves managed modal Checkout.                |
| `completed` | Checkout reaches its successful terminal experience.    |
| `error`     | Loading or mounting fails before Checkout can continue. |
| `event`     | Any privacy-safe lifecycle event is received.           |
| `failed`    | Checkout reaches a terminal failure.                    |
| `ready`     | Checkout is ready for customer interaction.             |

The `error` output contains an `Error` for loader or mount failures. The `event`
output receives the canonical Checkout lifecycle, including recoverable
`paymentAttemptFailed` events and the terminal `completed`, `canceled`, and
`failed` events. Order-backed events carry the full client-safe Order.

Use these outputs for interface state and telemetry. Before fulfillment, have
your backend [look up the Order](https://studio.inttegro.com/machine/go/api/orders.md#lookup-an-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:

```typescript
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 routes and server rendering

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.

## Related resources

- [JavaScript runtime and loader](https://studio.inttegro.com/machine/go/web/javascript.md) - Review options, events,
  CSP, and modal behavior.
- [Web Checkout overview](https://studio.inttegro.com/machine/go/web.md) - Prepare the server and verify payment state.