---
title: "Web"
description: "Embed Inttegro Checkout in JavaScript, React, Vue, Svelte, Angular, and Inertia applications."
canonical: "https://studio.inttegro.com/web"
format: inttegro-machine-docs/v1
language: "Python"
sdk_version: "v12.0.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/python/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: 654
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: ["design_integration","get_integration_guide","check_integration_readiness"]
estimated_tokens: 2366
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Embed Inttegro Checkout in JavaScript, React, Vue, Svelte, Angular, and Inertia applications. This Python representation uses the selected SDK's native names wherever Studio has a verified mapping.

### Five questions

#### Q1. When should the reader use Web?

Use this web guide when Inttegro Checkout is being embedded in the named browser framework or runtime.

#### Q2. What is authoritative on this page?

Use this page for orientation; follow its canonical SDK, guide, API, or MCP links for exact contracts.

#### Q3. What page-specific constraint matters most?

Keep secret credentials on the server and treat browser checkout state as presentation until authoritative server state confirms the outcome.

#### Q4. Can Inttegro MCP materially help with this task?

Yes, when the reader has an authenticated MCP connection and the task needs live context, guided planning, or a supported operation. The strongest matches are `design_integration`, `get_integration_guide`, `check_integration_readiness`; their exact roles and boundaries are listed below.

#### Q5. How should the reader verify the answer and continue?

Exercise success, cancellation, and required-action paths, then verify the server-side order or payment state independently of the browser callback. Continue with [Webhooks](https://studio.inttegro.com/machine/python/api/webhooks.md) and [Server SDKs](https://studio.inttegro.com/machine/python/sdks.md) when those concerns enter scope.

### Recommended MCP assistance

Use these through an authenticated Inttegro MCP connection. This document remains the contract source.

- [`design_integration`](https://studio.inttegro.com/machine/python/inttegro-mcp/tools.md#design_integration) — read-only integration guidance. Elicits the integration goal, AI app builder, server runtime, SDK preference, and checkout approach, then returns a platform-aware build and test plan without accepting credentials.
- [`get_integration_guide`](https://studio.inttegro.com/machine/python/inttegro-mcp/tools.md#get_integration_guide) — read-only integration guidance. Returns a focused implementation sequence and canonical Studio links for authentication, checkout, orders, catalog, messaging, idempotency, or testing.
- [`check_integration_readiness`](https://studio.inttegro.com/machine/python/inttegro-mcp/tools.md#check_integration_readiness) — read-only integration guidance. Audits platform secret storage, server-runtime compatibility, idempotency, errors, state verification, checkout returns, and messaging consent without receiving source code or credentials.

## Document content

# Web Checkout

Embed Inttegro Checkout in a website or web application without building a
payment form. Start with the JavaScript loader, or use the adapter designed for
your frontend framework.

> Web Libraries is interactive content. Use the canonical page to view it.

## Choose an integration

Use `@inttegro/js` in a browser application without a supported framework. For
React, Vue, Svelte, or Angular, use the corresponding adapter: it follows that
framework's component lifecycle while preserving the same Checkout API and
customer experience.

Inertia does not need a separate Inttegro package. Choose the React, Vue, or
Svelte adapter that matches your Inertia frontend.

## Choose the Checkout reference

Checkout starts from exactly one client-safe reference.

For a normal purchase, your backend owns credentials, pricing, and every
authoritative change to the Order. It should:

1. [Create an order](https://studio.inttegro.com/machine/python/api/orders.md#create-an-order) with the amount and commercial
   details your application has approved.
2. [Finalize the order](https://studio.inttegro.com/machine/python/api/orders.md#finalize-an-order) before showing Checkout.
3. Return only the client-safe Order ID needed to start payment collection.

Treat the Order ID as a payment capability. It cannot be used to change the
Order through Checkout, but anyone who obtains it can attempt to pay. Avoid
placing it in analytics, error reports, or public logs.

If you already have a Purchase Intent, do not create an Order first. Pass its
public `sale_...` ID to Checkout as `purchaseIntentId`. Checkout renders the
full Buy experience for that offer. It collects any required customer details,
quantity, variant, or customer-selected amount, then creates the finalized
Order when the buyer continues.

## Choose a presentation

Every integration renders the same Inttegro-hosted payment experience. The
presentation choice changes the space around Checkout—not the Order, payment
flow, feature flags, or lifecycle events.

### Embedded

Use embedded Checkout when payment is a visible part of the page: a checkout
step, invoice sidebar, or dedicated payment route. Your application provides a
container, controls its placement and width, and keeps it mounted while payment
or provider confirmation is in progress.

With `@inttegro/js`, pass that container to `checkout.mount(target)`. Framework
adapters mount their `Checkout` component in the same way. Start with the
[JavaScript integration](https://studio.inttegro.com/machine/python/web/javascript.md#choose-a-presentation) or choose the
React, Vue, Svelte, or Angular guide below for complete code.

### Modal

Use modal Checkout when payment begins from a **Pay now** action and the current
page should remain mounted underneath. Your application owns an accessible
dialog, including its trigger, close control, focus restoration, and scrolling.
Mount `@inttegro/js` or the framework `Checkout` component inside that dialog;
Inttegro continues to own the isolated payment surface. Follow the
[JavaScript integration](https://studio.inttegro.com/machine/python/web/javascript.md#choose-a-presentation) or the guide for
your framework for a complete pattern.

Framework adapters do not recreate the form or bundle another payment runtime.
They manage loading, supported updates, lifecycle events, and cleanup using the
conventions of their framework.

## See both presentations

The [Express live demo](https://express-demo.inttegro.dev) uses `@inttegro/js`
directly. Framework-native examples pair
[Next.js with React](https://nextjs-demo.inttegro.dev),
[Nuxt with Vue](https://nuxt-demo.inttegro.dev),
[NestJS with Svelte](https://nestjs-demo.inttegro.dev), and
[FastAPI with Angular](https://fastapi-demo.inttegro.dev). The demos use
finalized Orders and offer embedded, modal, and hosted-page presentation. An
existing Purchase Intent uses the same components with `purchaseIntentId`
instead of `orderId`.
Each modal is an application-owned dialog containing the official Checkout
component or controller.

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

## Keep the host application informed

Privacy-safe lifecycle events report when Checkout is ready, customer input
changes, a payment attempt begins, more customer action is required, an attempt
fails, or the flow completes. Forward these signals to your
existing telemetry so navigation and route changes do not hide what happened
inside Checkout.

The `completed` event is a customer-interface signal, not fulfillment
authority. Before releasing goods, granting access, or marking a local record
as paid, have your backend [look up the order](https://studio.inttegro.com/machine/python/api/orders.md#lookup-an-order). For an
in-progress payment, use a short bounded polling window and show a pending state
if the Order has not reached a terminal state.

## Related resources

- [Generated API reference](https://web.inttegro.dev/v0.5.4/) - Browse the
  public loader, lifecycle, and framework component symbols.
- [JavaScript runtime and loader](https://studio.inttegro.com/machine/python/web/javascript.md) - Load, configure, and
  observe Checkout directly.
- [React](https://studio.inttegro.com/machine/python/web/react.md), [Vue](https://studio.inttegro.com/machine/python/web/vue.md), [Svelte](https://studio.inttegro.com/machine/python/web/svelte.md), and
  [Angular](https://studio.inttegro.com/machine/python/web/angular.md) - Use a framework-native component.
- [Inertia](https://studio.inttegro.com/machine/python/web/inertia.md) - Pass an Order ID through page props to the adapter
  for your frontend renderer.
- [Server SDKs](https://studio.inttegro.com/machine/python/sdks.md) - Create and finalize Orders without exposing a secret
  API key.
- [Webhooks](https://studio.inttegro.com/machine/python/api/webhooks.md) - Understand the current status-notification model and
  polling guidance.