usePayWithDynamic

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

For individual funding methods, see useFundWithWallet, useExchangeAccounts, and useOnramp.

See each individual funding method for more details:

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:

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

Error States

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

Implementation Guides

SDK Reference

usePayWithDynamic

Recommended: JavaScript SDK with React Hooks

Unified View

Error States

Recommended: JavaScript SDK with React Hooks

​Unified View

​Error States

Unified View

Error States