Quickstart
Here you can find a simplified process to integrate AppKit Pay:Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven’t done so, please refer to the Reown AppKit docs.
Code Example
AppKit Pay Example
Check the React example
Install the library
Projects currently using Reown AppKit, or planning to use it to build custom payment flows with self-custodial wallets, should use AppKit Pay for a streamlined integration and significantly improved user experience out of the box. AppKit Pay can be found in
@reown/appkit-pay
npm package.Usage
pay
. This function receives two parameters.
Supported Networks and Assets
For a complete list of supported networks and assets across different exchanges (Coinbase, Binance), please refer to the Networks and Assets Supported section in our Pay with Exchange documentation.Assets Configuration
For the moment, AppKit Pay has pre-configured these assets:- baseETH, baseSepoliaETH, and baseUSDC
- ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
- ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT
Test the complete exchange flow
To test the entire exchange process, we’ve implemented a dedicated test scenario that activates when using the tokenbaseSepoliaETH
.

- Complete Successfully – Simulates a successful exchange outcome.
- Trigger an Error – Simulates a failed exchange with an error response.

Hooks
useAvailableExchanges
Fetches and manages the state for available exchanges.useAvailableExchanges(options?: { isFetchOnInit?: boolean } & GetExchangesParams): UseAvailableExchangesReturn
options
: Control initial fetch behavior.returns
:{ data, isLoading, error, fetch }
type GetExchangesParams= { page?: number asset?: string amount?: number | string network?: CaipNetworkId }
usePayUrlActions
Provides functions (getUrl, openUrl) to interact with specific exchange URLs, returning the sessionId needed for status tracking.usePayUrlActions(): { getUrl, openUrl }
getUrl(exchangeId, params): Promise<PayUrlResponse>
openUrl(exchangeId, params, openInNewTab?): Promise<PayUrlResponse>
(Returns{ url, sessionId }
)
useExchangeBuyStatus
Fetches and polls for the status of a headless payment transaction using exchangeId and sessionId.useExchangeBuyStatus(params: UseExchangeBuyStatusParameters): UseExchangeBuyStatusReturn
params
:{ exchangeId, sessionId, pollingInterval?, isEnabled?, onSuccess?, onError? }
returns
:{ data, isLoading, error, refetch }