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

# App Kit SDK: Onramp

> Embed the Onramp widget so users can buy USDC or EURC on Arc with fiat.

The [App Kit SDK](/app-kit) includes the Onramp capability, an embeddable widget
that lets your users buy USDC or EURC on Arc with fiat. The widget is hosted on
Arc and handles KYC, payment processing, and settlement.

You can try the Onramp flow at
[portal.arc.io/deposit/fiat](https://portal.arc.io/deposit/fiat). For local
development and testing, use the
[sandbox environment](/app-kit/references/onramp-hosting-requirements#sandbox).

<Note>
  Onramp requires an [API key](#api-key) to integrate. Certain
  [payment methods](#supported-payment-methods-and-countries) are only available
  to end users after completing KYB.
</Note>

## How it works

Your server creates a session for a specific user and destination wallet, then
your client mounts the Onramp widget with that session. Sessions are valid for
30 minutes. The widget walks the user through the purchase, then delivers the
crypto to the wallet address you specified. Lifecycle events flow back to your
page so you can update your UI.

```mermaid theme={null}
flowchart LR
  S[Your server] -->|"creates session"| C[Your client]
  C -->|"mounts widget with session"| W[Onramp widget]
  W -->|"crypto"| A[(User's destination wallet)]
```

## Supported payment methods and countries

Debit card, Apple Pay, and Google Pay are available for USDC and EURC on Arc in
the US, UK, select EU countries, and other countries worldwide. Enabling these
methods requires completing KYB in the
[Circle Console](https://console.circle.com/app-kits/). To accept them, your
server must also pass
[`referrerDomain`](/app-kit/tutorials/onramp/customize-session-minting#allow-your-page-to-embed-the-widget)
when creating a session.

Bank transfer is available for USDC on Arc in select US states and select EU
countries.

Credit cards aren't supported.

## API key

Onramp requires a
[Circle API key](https://developers.circle.com/api-reference/keys) to
authenticate your server. Obtain one from the
[Circle Console](https://console.circle.com/api-keys) and keep it server-side
only, since it grants full access to your Onramp integration. Pass it as
`apiKey` in your Onramp config.

API keys are environment specific. Sandbox and production each need their own
key.

## Quick look

This example fetches a session from your backend and mounts the Onramp widget
inline:

```typescript TypeScript theme={null}
// Fetch a session minted on your server
const session = await kit.onramp.fetchSession({
  url: "/api/onramp/sessions",
  body: {
    appUserId: "user-123",
    destinationAddress: "USER_WALLET_ADDRESS",
  },
});

// Mount the widget inline
const widget = kit.onramp.mountIframe({
  session,
  container: document.getElementById("onramp-root")!,
  onDepositSettled: ({ payload }) => console.log("settled", payload),
});
```

Onramp also requires a session route on your server. Follow the
[quickstart](/app-kit/quickstarts/onramp-embed-widget) for the end-to-end flow.

## Installation

[Install the App Kit SDK](/app-kit/tutorials/installation) to use Onramp. If you
only need Onramp and don't want to install the full App Kit SDK, install the
standalone Onramp Kit.

<CodeGroup>
  ```bash npm theme={null}
  npm install @circle-fin/onramp-kit
  ```

  ```bash yarn theme={null}
  yarn add @circle-fin/onramp-kit
  ```
</CodeGroup>

<Info>
  Onramp does not require a wallet adapter. The Onramp widget handles payment and
  delivery to the destination wallet.
</Info>
