Skip to Content
CheckoutОбзор
View as Markdown

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 (на 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 покупатель платит напрямую на ваш кошелёк; см. Сети с оплатой напрямую на кошелёк.
  4. Пульс статуса — «Ожидание перевода», «Tx обнаружена (3/12 подтверждений)», «Оплачено».
  5. Кнопку Cancel (присутствует всегда) → срабатывает onCancel.

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

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

Что дальше

Предоплаченный кредитОбзор