Skip to Content
CheckoutОбзор

Checkout — Обзор

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

Три режима

Центрированный overlay-popup, по умолчанию ~560×780. Витрина остаётся на месте. onSuccess срабатывает, когда popup закрывается после оплаты. Режим по умолчанию.

Popup

Жёсткая навигация на checkout. Лучше всего для браузеров, блокирующих popup’ы, или для mobile web, где оверлеи выглядят неестественно. Покупатель возвращается через ваш success_url / cancel_url из сессии.

Redirect

iframe внутри вашей страницы. Лучше всего, когда вы контролируете layout полностью и хотите нулевое переключение контекста. Авто-resize через postMessage.

Embed

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

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

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

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

  1. Сводку заказа (позиции, общая сумма, валюта). Скрывается через hideSummary, если вы уже показали это на своей стороне.
  2. Селектор актива — список комбинаций сеть × актив, включённых вами в настройках мерчанта. Покупатель выбирает одну.
  3. Депозитный адрес + QR + сумму для выбранной комбинации. Покупатель либо сканирует, либо подключает кошелёк (кнопка WalletConnect), либо платит из заранее подключённого кошелька, переданного вами через SDK.
  4. Пульс статуса — «Ожидание перевода», «Tx обнаружена (3/12 подтверждений)», «Оплачено».
  5. Кнопку Cancel (присутствует всегда) → срабатывает onCancel.

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

ПараметрКакОграничения
Скрыть сводку заказаhideSummary: true в SDKПокупатель всё ещё видит сумму в депозитной панели
Скрыть заголовок InfraIOhideHeader: 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:

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: страница checkout — это полноценное приложение, подключающее кошельки, чья безопасность postMessage (проверки origin с обеих сторон) и сторонние wallet SDK (WalletConnect, Coinbase, MetaMask) требуют настоящего same-origin скриптового контекста, поэтому атрибут HTML sandbox сломал бы подключение кошелька ради незначительного выигрыша в изоляции. Изоляция вместо этого обеспечивается границей cross-origin, строгими проверками origin в postMessage и вашим CSP frame-src.

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

Popup’ы агрессивно блокируются на mobile Safari. Если ваш трафик в основном мобильный, по умолчанию используйте 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. Self-serve через панель, как только CNAME подтверждён.

Что дальше

Сети и активыОбзор