getFlowSupportedExchanges

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. getFlowSupportedExchanges needs no session token. An exchange appears only when it is enabled for your environment in the Dynamic dashboard. 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 explains exchange payments.

Usage

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

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 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.

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

attachFlowSource: attach the exchange as the payment source.
Payment sources: how exchange payments work.

​Usage

​Parameters

​Returns

​Examples

​Attach the exchange the payer picks

​Errors

​React

​Related