Разработчикам · Приложения

Создайте флоу продажи USDC, который пользователи действительно смогут завершить.

Хорошее офрамп-приложение — это в основном скучное управление состоянием: соберите маршрут, дайте кошельку подписать, восстановите способы оплаты, требующие расширения, покажите ссылку на депозит и сверьте события жизненного цикла после закрытия вкладки.

Открыть руководство по SDKКлонировать стартер
01

Фронтенд-путь

  1. 01Соберите сумму, платёжную платформу, фиатную валюту и идентификатор для выплаты.
  2. 02Покажите границы текущей политики провайдера и потребуйте от пользователя подтверждения учетной записи, региона и права на транзакцию.
  3. 03Передайте подключенный viem WalletClient в функцию useOfframp() или createOfframp({ walletClient }).
  4. 04Поверхностные состояния прогресса: утверждение, регистрация, депонирование, подтверждение, делегирование, ограничение, возобновление, выполнено.
  5. 05Для подходящего маршрута, требующего расширения, перехватите EXTENSION_REGISTRATION_REQUIRED и запустите usePeerExtensionRegistration(platform).
  6. 06Вызов депозита (адреса) при загрузке страницы, чтобы обновление не затруднило работу продавца, находящегося в полете.
02

Состояние, которое следует хранить

ПолеПричина
depositIdОсновной хэндл для close(), OTC-ссылок и поддержки
txHashДоказательство того, что пользователь подписал и отправил транзакцию депозита
platform + currencyОтображение маршрута, поддержка и сегментация аналитики
метка identifierЧитаемая человеком ссылка на выплату; не храните секреты
integratorIdСтабильная атрибуция для продуктовой телеметрии и поддержки
03

Ограничения UX

  • SDK работает с мейннетом Base; публичной песочницы нет. Тестируйте с минимумом в 1 USDC.
  • Каждый созданный SDK депозит делегирует ценообразование волту Delegate. Не предлагайте ручное управление курсом для этого пути.
  • Фиат остаётся вне SDK. Покупатель и продавец рассчитываются напрямую внутри выбранного платёжного приложения.
  • Reconcile narrow owner state with deposits(); use Peerlytics API for broader market data, deposits, intents, and analytics.

Продолжайте исследовать

Peerlytics APIЦентр разработчиков

Общие вопросы

Должно ли приложение-кошелёк использовать отдельную функцию или React-хук?

Используйте React-хук, когда вам нужны встроенные состояния загрузки, прогресса, ошибки и результата. Используйте createOfframp({ walletClient }), когда у вашего приложения есть собственная машина состояний.

Что показывать, когда PayPal или Wise не проходит регистрацию?

Сначала покажите границы политики: Wise запрещает P2P квитанции о продаже криптовалюты, а PayPal может потребовать предварительного одобрения. Только для подходящего потока поставщика вы должны поймать EXTENSION_REGISTRATION_REQUIRED, подключить расширение, завершить usePeerExtensionRegistration() и повторить попытку.