> ## Documentation Index
> Fetch the complete documentation index at: https://www.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# getFlowSupportedExchanges

> List the exchanges a payer can use to pay a Flow payment with the JavaScript SDK.

Lists the exchanges a payer can use to pay a flow, such as Coinbase. Show them when the payer chooses to pay from an exchange, then attach the one they pick with [`attachFlowSource`](https://www.dynamic.xyz/docs/javascript/reference/client/attach-flow-source). `getFlowSupportedExchanges` needs no session token.

An exchange appears only when it is enabled for your environment in the [Dynamic dashboard](https://app.dynamic.xyz). It can be used for a flow only when the flow settles in a token and on a network that the exchange supports, for Coinbase USDC. [Payment sources](https://www.dynamic.xyz/docs/flow/payment-sources.md#exchange) explains exchange payments.

## Usage

```javascript theme={"system"}
import { getFlowSupportedExchanges } from '@dynamic-labs-sdk/client';

const exchanges = await getFlowSupportedExchanges({ flowId: 'your-flow-id' });

exchanges.forEach(({ key, label }) => console.log(key, label));
```

## Parameters

| Parameter | Type | Description |
| - | - | - |
| `flowId` | `string` | The flow ID. |

## Returns

`Promise<FlowExchange[]>`:

| Field | Type | Description |
| - | - | - |
| `id` | `string` | The exchange's ID. Once the payer picks it, the flow's `exchangeSource.exchangeId` matches it. |
| `key` | `string` | The value to pass as `exchangeProvider` to `attachFlowSource`, for example `'coinbase'`. |
| `label` | `string` | The exchange's display name. |
| `iconUrl` | `string` | The URL of the exchange's icon. |

## Examples

### Attach the exchange the payer picks

```javascript theme={"system"}
import { attachFlowSource, getFlowSupportedExchanges } from '@dynamic-labs-sdk/client';

const exchanges = await getFlowSupportedExchanges({ flowId: 'your-flow-id' });
const [exchange] = exchanges; // The payer's choice

const { flow } = await attachFlowSource({
  flowId: 'your-flow-id',
  sourceType: 'exchange',
  exchangeProvider: exchange.key,
});
```

[Build a custom payment UI](https://www.dynamic.xyz/docs/javascript/reference/flow-ui-guide.md#exchange) shows how to open the purchase link and wait for the exchange to confirm the payment.

## Errors

| Error | When |
| - | - |
| `FlowNotFoundError` | The flow does not exist in the client's environment. |

## React

`useGetFlowSupportedExchanges` fetches the list once per flow and stays disabled until `flowId` is defined.

```tsx theme={"system"}
import { useGetFlowSupportedExchanges } from '@dynamic-labs-sdk/react-hooks';

function ExchangeList({ flowId, onSelect }) {
  const { data: exchanges = [], isLoading } = useGetFlowSupportedExchanges({ flowId });

  if (isLoading) return <p>Loading...</p>;
  return exchanges.map((exchange) => (
    <button key={exchange.id} onClick={() => onSelect(exchange)}>
      <img src={exchange.iconUrl} alt="" width={24} height={24} />
      {exchange.label}
    </button>
  ));
}
```

## Related

* [`attachFlowSource`](https://www.dynamic.xyz/docs/javascript/reference/client/attach-flow-source): attach the exchange as the payment source.
* [Payment sources](https://www.dynamic.xyz/docs/flow/payment-sources.md#exchange): how exchange payments work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.