Exchange Pay (React)

Deposit via an exchange provider using hooks from @swapped/connect-sdk/react. Route here when the payment method has type: exchange_pay (see Payment methods).

Supported providers:

• Binance Pay
• KuCoin Pay
• Gate Pay
• Bybit Pay
• Krak Pay
• OKX Pay

Prerequisites

1. Create a core client with a Swapped Connect sessionId (from your backend).
2. Call loadSession() and wrap your tree with SwappedConnectProvider.
3. Wrap the deposit UI with ExchangePayContextProvider.

import { createSwappedConnectClient } from '@swapped/connect-sdk'
import {
  ExchangePayContextProvider,
  SwappedConnectProvider,
} from '@swapped/connect-sdk/react'

const client = createSwappedConnectClient({
  sessionId: 'your-session-id',
})

void client.loadSession()

function App() {
  return (
    <SwappedConnectProvider client={client}>
      <ExchangePayContextProvider>
        <DepositScreen />
      </ExchangePayContextProvider>
    </SwappedConnectProvider>
  )
}

Flow overview

Step	What happens	Hook
1. Provider	Pick an exchange	useExchangePayProviders
2. Currencies	Load tokens for the selection	useExchangePaySupportedCurrencies, useExchangePayCurrency
3. Amount	Validate fiat amount (currently USD)	useExchangePayAmount
4. Create order	createOrder() from selection	useExchangePayOrder, useExchangePaySelection
5. Checkout	Show QR / links; optional close	useExchangePayOrder
6. Wait	Status + countdown	Expiry & countdown, Event hooks
7. Done	Summary; restartSession()	useExchangePayCompletedTransactionSummary

Session must be loaded and active before createOrder. After a completed payment, call restartSession() before starting again.

Step-by-step walkthrough: Example.

Providers

Provider	Enum
Binance Pay	IntegrationProvider.Binance
KuCoin Pay	IntegrationProvider.Kucoin
Gate Pay	IntegrationProvider.Gate
Bybit Pay	IntegrationProvider.Bybit
Krak Pay	IntegrationProvider.KrakPay
OKX Pay	IntegrationProvider.Okx

Hooks

Full list: Exchange Pay hooks. Use state hooks for UI and event hooks for side effects (navigate, toast).