Skip to content

useExchangePayProviders

Read available Exchange Pay providers and update the selected exchange.

When to use

On the provider picker. Payment methods are already filtered to type: exchange_pay inside ExchangePayContextProvider.

Example

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

function ProviderPicker() {
  const {
    paymentMethods,
    selectedProvider,
    selectProvider,
    isLoading,
    error,
  } = useExchangePayProviders()

  if (isLoading) return <p>Loading…</p>
  if (error) return <p>{error.message}</p>

  return (
    <ul>
      {paymentMethods.map(method => (
        <li key={method.id}>
          <button
            type="button"
            aria-pressed={selectedProvider === method.provider}
            onClick={() => selectProvider(method.provider)}
          >
            {method.name}
            {selectedProvider === method.provider ? ' ✓' : ''}
          </button>
        </li>
      ))}
    </ul>
  )
}

Returns

FieldPurpose
paymentMethodsexchange_pay payment methods
selectedProviderCurrent exchange (or undefined)
selectProvider(provider)Set the selected exchange
clearProvider()Clear selection
isLoading / errorPayment-methods fetch state

Requires ExchangePayContextProvider.