Payment methods (React)

List wallets and exchanges for the loaded session with useGetPaymentMethods. The list refreshes when the session loads or refreshes.

List and route

import {
  IntegrationProvider,
  IntegrationProviderType,
} from '@swapped/connect-sdk'
import { useGetPaymentMethods } from '@swapped/connect-sdk/react'

function PaymentMethods({
  onSelectBinance,
  onSelectCoinbase,
}: {
  onSelectBinance: () => void
  onSelectCoinbase: () => void
}) {
  const { paymentMethods, isLoading, error } = useGetPaymentMethods({
    category: 'exchanges',
  })

  if (isLoading) return <p>Loading…</p>
  if (error) return <p>Failed to load methods</p>

  return (
    <ul>
      {paymentMethods.map(method => (
        <li key={method.id}>
          <button
            type="button"
            onClick={() => {
              if (method.provider === IntegrationProvider.Binance) {
                onSelectBinance()
              } else if (method.provider === IntegrationProvider.Coinbase) {
                onSelectCoinbase()
              }
            }}
          >
            {method.name}
          </button>
        </li>
      ))}
    </ul>
  )
}

// Narrow to Exchange Pay providers only:
// useGetPaymentMethods({ type: IntegrationProviderType.ExchangePay })

After the user picks Binance (or another Exchange Pay provider), continue to Exchange Pay. For Coinbase (type: exchange_oauth), continue to Coinbase — a separate OAuth withdraw flow, not Exchange Pay. Use CoinbaseGuard / useCoinbaseAvailability to gate that route. For category: 'wallets' / type: wallet, continue to Wallets.

Filters

Field	Example
category	'exchanges' or 'wallets'
type	IntegrationProviderType.Wallet or IntegrationProviderType.ExchangePay

Imperative client

import { useSwappedConnectClient } from '@swapped/connect-sdk/react'

function RestartButton() {
  const client = useSwappedConnectClient()
  return (
    <button type="button" onClick={() => void client.restartSession()}>
      New payment
    </button>
  )
}