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.

​
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 { usePay } from '@reown/appkit-pay/react';

In order to run the payment, use the hook usePay. This hook receives two parameter to manage the success or the error in the process.

// usePay handles subscriptions internally for robust state updates
const { open, isPending, isSuccess, data, error } = usePay({
  onSuccess: handleSuccess, 
  onError: handleError,
});

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

// open resolves when the modal closes, but onSuccess/onError handle the actual payment result
await open({ 
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: paymentAssetDetails
});

​
Hooks

​
usePay

Simplifies the modal-based payment flow. It internally handles subscriptions to provide reactive state variables (isPending, isSuccess, isError, data, error) and an open function. Callbacks (onSuccess, onError) are triggered reliably.

usePay(parameters?: UsePayParameters): UsePayReturn

  • parameters: Optional onSuccess and onError callbacks.
  • returns: { open, isPending, isSuccess, isError, error, data }

​
useAvailableExchanges

Fetches and manages the state for available exchanges.

useAvailableExchanges(options?: { isFetchOnInit?: boolean, initialPage?: number }): UseAvailableExchangesReturn

  • options: Control initial fetch behavior.
  • returns: { data, isLoading, error, fetch }

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