AppKit Pay with Exchange unlocks a powerful new flow: users can pay in crypto directly from their Centralized Exchange (CEXs) accounts like Binance or Coinbase, with no new wallets, no app switching, and no lost conversions.

​
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.
npm install @reown/appkit-pay

​
Usage


import { baseSepoliaETH, pay} from '@reown/appkit-pay'
In order to run the payment, use the function pay. This function receives two parameters. 
// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: baseSepoliaETH
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}

​
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
import { baseETH } from '@reown/appkit-pay'
For custom assets, you can create a paymentAsset object with all the information: 
// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};

​
Test the complete exchange flow

To test the entire exchange process, we’ve implemented a dedicated test scenario that activates when using the token baseSepoliaETH. Test Exchange Upon selecting this test exchange, you will be redirected to a result modal where you can choose between two paths:
  • Complete Successfully – Simulates a successful exchange outcome.
  • Trigger an Error – Simulates a failed exchange with an error response.
Test Exchange Result This setup allows you to safely verify both positive and negative exchange flows in a controlled environment.

​
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 }