Payment methods (React)

List wallets and exchanges for the loaded session with useGetPaymentMethods. The list refreshes when the session loads or refreshes. If you passed modules when creating the client, methods whose module is not enabled are omitted.

List and route

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

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

  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()
              } else if (method.provider === IntegrationProvider.CashApp) {
                onSelectCashApp()
              }
            }}
          >
            {method.name}
          </button>
        </li>
      ))}
    </ul>
  )
}

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

// Cash App is not in the `exchanges` category:
// useGetPaymentMethods({ provider: IntegrationProvider.CashApp })

After the user picks Binance (or another Exchange Pay provider), continue to Exchange Pay. For Cash App (type: cash_app), continue to Cash App. 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.

Shape

Each row is an IntegrationPaymentMethod — a union of wallet, exchange, and Cash App. Shared fields:

Field	Use for
id	Stable list key
name	Full label
shortName / uniqueShortName	Compact / disambiguated label
provider	IntegrationProvider — route and getOne
type	Discriminant: wallet, exchange_pay, exchange_oauth, cash_app, …
icon.light / icon.dark	Small picker icon
logo.light / logo.dark	Larger brand mark
recommended	Highlight in the list
enabled	Present when the API sends it
priority / priorityWallet / priorityExchange	Sort within a category

Narrow on type (or provider) before reading variant-only fields. Variants: IntegrationPaymentMethodWallet, IntegrationPaymentMethodExchange, IntegrationPaymentMethodCashApp. API: IntegrationPaymentMethod.

<img src={method.icon.dark || method.icon.light} alt="" />
<span>{method.shortName || method.name}</span>

Filters

Field	Example
category	'exchanges' or 'wallets'
type	IntegrationProviderType.Wallet, IntegrationProviderType.ExchangePay, or IntegrationProviderType.CashApp
provider	IntegrationProvider.CashApp, IntegrationProvider.Binance, or [IntegrationProvider.Binance, IntegrationProvider.Kucoin]

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>
  )
}

For a single method on the client, use client.paymentMethods.getOne({ provider: IntegrationProvider.CashApp }).