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

# usePayWithDynamic

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

The `usePayWithDynamic` hook provides a unified payment flow that lets users fund transactions using any supported Dynamic method—whether through an external wallet, exchange account, or onramp provider.It accepts a PayWithDynamicProps object (destination address, token symbol, amount, network, and chain name), then renders a contextual UI prompting the user to choose their preferred payment source. After the user selects a method, the hook orchestrates the transaction through their desired funding method.

Note that each funding method must be enabled and configured for it to appear as a funding option.

> [!NOTE]
>
> For individual funding methods, see [useFundWithWallet](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/usefundwithwallet.md), [useExchangeAccounts](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/useexchangeaccounts.md), and [useOnramp](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/useonramp.md).

See each individual funding method for more details:

1. [External Wallet](https://www.dynamic.xyz/docs/money-and-funding/fund-from-external-wallet)
2. [Exchange](https://www.dynamic.xyz/docs/money-and-funding/fund-from-exchange/overview)
3. [Onramp](https://www.dynamic.xyz/docs/money-and-funding/default-onramps)

**Inputs**:

| Parameter | Type | Description |
| - | - | - |
| `destinationAddress` | `string` | Where the transfer should go to |
| `tokenAmount` | `number` | The amount of the given token to be transfered |
| `tokenSymbol` | `string` | The token to be transfered |
| `network` | `string or number` | The network ID to be used on the transaction |
| `chainName` | `ChainEnum` | The chain to be used for the transaction |

**Example**:

```typescript theme={"system"}
import { ChainEnum } from "@dynamic-labs/sdk-api-core";
import { usePayWithDynamic } from "@dynamic-labs/sdk-react-core";

const pay = usePayWithDynamic();

await pay({
  destinationAddress: '0x123',
  tokenAmount: 5,
  tokenSymbol: 'ETH',
  network: 1,
  chainName: ChainEnum.EVM,
});
```

## Unified View

This view will allow the user to select their desired funding method: An external wallet, exchange, or onramp

![Unified View](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-pay-with-dynamic-funding-source.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=4fbb09696e2f37c09467b33626ac14e5)

## Error States

Error will states will be displayed on the UI informing a user of why a transaction failed.

Example Error Screens:

![Unified View](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-insufficient-funds.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=0488bc09c0187b9b0d156e862b29804d)

![Unified View](https://mintcdn.com/dynamic-docs/wuT3MNqviAFx15Jw/images/widget/widget-whitelisting-kraken.png?fit=max\&auto=format\&n=wuT3MNqviAFx15Jw\&q=85\&s=6cbd290ce19407a473e8d96229690d19)

![Unified View](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-invalid-transfer-amount.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=3b0ec364ac0209c05f978b92763f2d88)


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