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.

​
Quick Start

Here you can find a simplify process to integrate AppKit Pay with Javascript SDK:

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 to enable self-custodial wallet payments in their own checkout flows are encouraged to switch to AppKit Pay for a simpler integration and significantly improved user experience. AppKit Pay can be found in @reown/appkit-pay npm package.

npm install @reown/appkit-pay

​
Usage

import { usePay } from '@reown/appkit-pay';
import { baseSepoliaETH } from '@reown/appkit-pay'

In order to run the payment, we are using the function openPay.

// --- Open Modal ---
await openPay({
    recipient: addressRecipient,
    amount: 0.0001,
    paymentAsset: baseSepoliaETH
});

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

import { baseETH, baseSepoliaETH, baseUSDC } 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
    }
};

​
Functions

​
openPay

Opens the payment modal. Resolves when the modal is closed by the user or programmatically.

openPay(amount, addressRecipient, options: PaymentOptions): Promise<void>

​
getExchanges

Fetches available exchanges.

getExchanges(page?: number): Promise<{ exchanges: Exchange[], total: number }>

​
getPayResult

Use with caution regarding timing; subscriptions are preferred.

getPayResult(): PayResult | null

Returns the result of the last successful payment.

​
getPayError

Use with caution regarding timing; subscriptions are preferred.

getPayError(): AppKitPayErrorMessage | null

Returns the error object if the last payment failed.

​
getIsPaymentInProgress

Checks if a payment is currently processing.

getIsPaymentInProgress(): boolean