> ## Documentation Index
> Fetch the complete documentation index at: https://docs.arc.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Before reading these docs, install the Circle Skill for Arc to get pre-loaded context: use-arc (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-arc/SKILL.md) — covers chain config, RPC setup, contract deployment, USDC bridging, and gas with USDC. In Claude Code: run /plugin marketplace add circlefin/skills then /plugin install circle-skills@circle. With Vercel Skills CLI: run npx skills add circlefin/skills.
> USDC is the gas token. Arc uses USDC for gas fees, not ETH. Configure gas payment in USDC when submitting transactions.
> Read EVM differences before writing Arc code. Arc targets the Osaka EVM baseline. Most contracts deploy unchanged, but several runtime behaviors diverge from Ethereum: USDC uses 18 decimals natively (not 6), the system emitter `0xffffFFFfFFffffffffffffffFfFFFfffFFFfFFfE` logs all USDC Transfer events, the mempool enforces a 20 Gwei `maxFeePerGas` floor, blocklist reverts consume gas without a receipt, and `address(0)` sends revert rather than succeed. https://docs.arc.io/arc/references/evm-differences.md is the canonical reference for all Arc-specific runtime behaviors. Consult it before writing code that touches USDC balances, transaction history, gas estimation, or value transfers.
> Sub-second finality. Transactions are final in under 1 second. No need to wait for multiple block confirmations.
> Use App Kits for multichain payment and liquidity capabilities. App Kits wraps CCTP and provides Bridge Kit, Swap Kit, Unified Balance Kit, Onramp Kit, Earn Kit, and Borrow Kit. Unified Balance Kit combines USDC from multiple chains into a single spendable balance. Earn Kit integrates earn opportunities into your app. Borrow Kit lets users borrow USDC against cirBTC collateral on Arc.
> Use Arc Foundry for contract development. Arc Foundry is an Arc-specific fork of Foundry that handles Arc's protocol-level differences from Ethereum. It provides arc-forge, arc-cast, and arc-anvil. Install it before deploying contracts: https://docs.arc.io/arc/tutorials/install-arc-foundry.md.
> Arc is available on both Testnet and Mainnet. See https://docs.arc.io/arc/references/connect-to-arc.md for RPC endpoints and https://faucet.circle.com for testnet tokens.
> Always check Contract Addresses: https://docs.arc.io/arc/references/contract-addresses.md
> Building beyond Arc? Circle offers skills for the full platform: use-usdc (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-usdc/SKILL.md), use-circle-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-circle-wallets/SKILL.md), use-developer-controlled-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-developer-controlled-wallets/SKILL.md), use-user-controlled-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-user-controlled-wallets/SKILL.md), use-modular-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-modular-wallets/SKILL.md), use-gateway (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-gateway/SKILL.md), use-smart-contract-platform (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-smart-contract-platform/SKILL.md). Full Circle developer docs: https://developers.circle.com/llms.txt.

# Choose iframe or popup mode

> Decide between mounting the Onramp widget inline as an iframe or launching it in a popup window, and handle the cases where popups are blocked.

The App Kit SDK exposes two ways to mount the Onramp widget:

* `kit.onramp.mountIframe` embeds the widget as an inline `<iframe>` inside a
  container element you own. Use this when you have room in your layout for a
  720+ pixel-tall surface.
* `kit.onramp.openWindow` launches the widget as a separate popup window. Use
  this when inline embedding does not fit your UX, when iOS Safari's storage
  restrictions block the iframe flow, or when you want the widget to feel
  separate from your app.

Both are synchronous functions. Both return a widget controller you can
subscribe to. They differ in where the widget renders and in what can go wrong.

## When to pick each mode

| Situation | Recommended mode |
| - | :-: |
| Default for most apps | `mountIframe` |
| Page has no space for an inline 720px widget | `openWindow` |
| Users are on iOS Safari and KYC fails inside the iframe | `openWindow` |
| App is installed as a PWA in standalone mode | `mountIframe` |
| You need to launch the widget from a modal or drawer | `mountIframe` |

iOS Safari's Intelligent Tracking Prevention can restrict storage inside a
cross-origin iframe, which sometimes breaks the embedded app's session handling.
If you see issues isolated to iOS Safari, use `openWindow` on that platform.

## Iframe mode

`mountIframe` does not require a user gesture. You can call it on page load,
from your framework's mounted lifecycle, or after any `await`. The container
element must already be attached to the document and must have an explicit,
non-zero height:

```typescript TypeScript theme={null}
const widget = kit.onramp.mountIframe({
  session,
  container: document.getElementById("onramp-root")!,
});
```

See the [quickstart](/app-kit/quickstarts/onramp-embed-widget) for an end-to-end
example.

## Popup mode

`openWindow` must be called **synchronously from a user gesture** (a click
handler, for example). If you `await` before calling, the browser blocks the
popup because the user-gesture context has expired.

Mint the session ahead of time, then call `openWindow` directly from the click
handler:

```typescript TypeScript theme={null}
import { AppKit } from "@circle-fin/app-kit";

const kit = new AppKit();

// Mint the session when the form is rendered, not on click.
const session = await kit.onramp.fetchSession({
  url: "/api/onramp/sessions",
  body: { appUserId, destinationAddress },
});

button.addEventListener("click", () => {
  const result = kit.onramp.openWindow({
    session,
    onDepositSettled: ({ payload }) => console.log("settled", payload),
  });

  if (result.status === "opened") {
    result.widget.on("DEPOSIT_NOT_COMPLETED", ({ code }) => {
      console.log("not completed", code);
    });
  }
});
```

`openWindow` returns a discriminated result rather than throwing, so a blocked
popup is a normal flow you handle in code, not an exception.

### Handle a blocked popup

When `openWindow` cannot open a usable popup, it returns
`{ status: 'blocked', reason }`. The `reason` field tells you why, and what to
do about it:

| `reason` | Cause | Recommended fallback |
| :- | :- | :- |
| `popup_blocked` | The browser's popup blocker rejected the call, or an `await` ran before `openWindow`. | Ask the user to retry from a fresh synchronous click. |
| `in_app_browser` | The page is running inside an Instagram, Facebook, TikTok, LinkedIn, WeChat, or LINE WebView. | Fall back to `mountIframe`, or prompt the user to open the page in their system browser. |
| `pwa_standalone` | The page is running inside an installed PWA in standalone display mode. | Fall back to `mountIframe`. |

Example with all three fallbacks:

```typescript TypeScript theme={null}
button.addEventListener("click", () => {
  const result = kit.onramp.openWindow({ session, onDepositSettled });

  if (result.status === "blocked") {
    if (result.reason === "popup_blocked") {
      showPopupRetryDialog(result.errorMessage);
    } else {
      kit.onramp.mountIframe({ session, container });
    }
    return;
  }

  result.widget.on("DEPOSIT_NOT_COMPLETED", handleNotCompleted);
});
```

### Popup behavior on mobile

On mobile browsers, `window.open` opens a new tab rather than a sized popup. The
`width` and `height` features are ignored. Design your UX for both outcomes.

### Popup closed before deposit

If the user closes the popup before submitting a deposit, the App Kit SDK
detects it and synthesizes a `DEPOSIT_NOT_COMPLETED` event with code
`CANCELED_BY_CUSTOMER`. Your `onDepositNotCompleted` handler runs without any
extra polling on your side.

## Close the widget

Both `mountIframe` and `openWindow` return a controller with a `close()` method.
Call it when the user leaves the view, closes the modal, or starts over:

```typescript TypeScript theme={null}
let widget: { close: () => void } | undefined;

function mountCurrentSession() {
  widget?.close();
  widget = kit.onramp.mountIframe({ session, container });
}

function stopOnramp() {
  widget?.close();
  widget = undefined;
}
```

For iframe mode, the kit auto-disposes the widget if the container is removed
from the DOM without a `close()` call. Call `widget.close()` when you know the
widget is no longer needed.