<!-- Source: https://docs.infraio.xyz/ru/checkout/overview -->
<!-- Last updated: 2026-10-04 -->

# Checkout — Обзор

**Размещённый checkout** — это страница, на которой покупатель реально
отправляет средства. Вы не отрисовываете сами селектор актива,
депозитный адрес и QR — SDK открывает нашу страницу (по адресу
`https://checkout.infraio.xyz/<session_key>`), а мы занимаемся UI.

## Три режима

- [Popup](https://docs.infraio.xyz/ru/sdks/javascript#popup) — Центрированный overlay-popup, по умолчанию ~560×780. Витрина остаётся на месте. `onSuccess` срабатывает, когда popup закрывается после оплаты. Режим по умолчанию.
- [Redirect](https://docs.infraio.xyz/ru/sdks/javascript#redirect) — Жёсткая навигация на checkout. Лучше всего для браузеров, блокирующих popup'ы, или для mobile web, где оверлеи выглядят неестественно. Покупатель возвращается через ваш `success_url` / `cancel_url` из сессии.
- [Embed](https://docs.infraio.xyz/ru/sdks/javascript#embed) — iframe внутри вашей страницы. Лучше всего, когда вы контролируете layout полностью и хотите нулевое переключение контекста. Авто-resize через postMessage.

## Эвристика выбора режима

| Если… | Используйте |
| --- | --- |
| Desktop web, обычная e-commerce | **Popup** |
| Mobile web | **Redirect** (на mobile popup'ы часто блокируются) |
| Жёсткая CSP-залоченная админ-панель | **Redirect** |
| In-app webview / нативный checkout на странице | **Embed** |
| Хотите полностью кастомный поток покупателя с white-label заголовком | **Embed** + `hideHeader` + ваш собственный wallet connect |

## Что видит покупатель

Независимо от режима страница показывает:

1. **Сводку заказа** (позиции, общая сумма, валюта). Скрывается
   через `hideSummary`, если вы уже показали это на своей стороне.
2. **Селектор актива** — список комбинаций сеть × актив, включённых вами
   в настройках мерчанта. Покупатель выбирает одну.
3. **Депозитный адрес + QR + сумму** для выбранной комбинации.
   Покупатель либо сканирует, либо подключает кошелёк (кнопка
   WalletConnect), либо платит из заранее подключённого кошелька,
   переданного вами через SDK. В TRON, Solana и TON покупатель платит напрямую на ваш кошелёк; см. [Сети с оплатой напрямую на кошелёк](https://docs.infraio.xyz/ru/concepts/chains#сети-с-оплатой-напрямую-на-кошелёк).
4. **Пульс статуса** — «Ожидание перевода», «Tx обнаружена
   (3/12 подтверждений)», «Оплачено».
5. **Кнопку Cancel** (присутствует всегда) → срабатывает `onCancel`.

## Кастомизация страницы

| Параметр | Как | Ограничения |
| --- | --- | --- |
| Скрыть сводку заказа | `hideSummary: true` в SDK | Покупатель всё ещё видит сумму в депозитной панели |
| Скрыть заголовок InfraIO Pay | `hideHeader: true` в SDK | Сочетайте с `walletAddress` для полного white-label |
| Предподключить кошелёк | `walletAddress` + `walletChainId` + `onSignRequest` | Обходит модал WalletConnect |
| Локаль | `locale` в SDK — один из `en`, `vi`, `ja`, `ko`, `es`, `pt-BR`, `ru`, `tr`, `zh-CN`, `zh-TW` | Локализует страницу checkout **и** страницы возврата (а также модал подключения кошелька). Неизвестное значение или отсутствие → откат к `en` |
| Логотип, фирменный цвет | **Панель мерчанта → Branding** | Применяется глобально, не per-session |

## Поведение return URL

В режиме **redirect** покупатель всегда возвращается на один из:

- `success_url` из сессии (при успешно проведённом платеже)
- `cancel_url` из сессии (при отмене/забрасывании)
- Если вы не задали их, SDK возвращается на страницу, открывшую
  checkout, с добавлением `?session_id=…&status=success|cancel`

В режимах **popup** и **embed** навигации нет — управление возвращается
на вашу страницу через `onSuccess` / `onCancel`. Используйте их, чтобы
решить, какое UI показать дальше.

## CSP и встраивание

Если вы используете режим **embed**, ваш CSP должен разрешить наш
origin в `frame-src`:

```http
Content-Security-Policy:
  frame-src https://checkout.infraio.xyz https://checkout-dev.infraio.xyz;
```

iframe несёт permissions policy `allow="payment; clipboard-write"` —
он может вызывать Payment Request API и писать в clipboard, не больше.
Не добавляйте HTML-атрибут `sandbox` к iframe: он ломает подключение
кошелька. Изоляция iframe обеспечивается границей cross-origin и вашим
CSP `frame-src`.

## Особенности mobile

Мобильные браузеры, особенно Safari, часто блокируют popup'ы. Если ваш
трафик в основном мобильный, используйте `mode: "redirect"`. На маленьких
экранах overlay popup'а также перекрывает зону клавиатуры, из-за чего
выбирать актив неудобно.

## White-label брендинг

Полный white-label требует:

1. `hideHeader: true` в SDK
2. Предподключённый `walletAddress` (покупатель не видит WalletConnect)
3. Ваш логотип + фирменный цвет в брендинге панели мерчанта
4. (Опционально) Кастомный домен для страницы checkout —
   `pay.your-shop.com` вместо `checkout.infraio.xyz`. Настройте его
   в панели, как только CNAME подтверждён.

## Что дальше

- [SDK → JavaScript](https://docs.infraio.xyz/ru/sdks/javascript) — полный справочник опций
  по режимам.
- [Концепции → Сессии](https://docs.infraio.xyz/ru/concepts/sessions) — что происходит на
  стороне сервера, пока покупатель на странице.
- [Концепции → Сети и активы](https://docs.infraio.xyz/ru/concepts/chains) — какие комбинации
  сеть × актив доступны в селекторе.