Skip to main content
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

​
pay - Full Payment Flow

​
Usage

import { pay, baseSepoliaETH } from '@reown/appkit-pay'
This function handles the complete payment flow — it opens the payment UI and waits for the result (success, failure, cancel, timeout). This function receives three values: recipient, amount, and paymentAsset. 
// pay function returns a PaymentResult object
const result = await pay({
    recipient: addressRecipient,
    amount: amount,
    paymentAsset: baseSepoliaETH
});

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

​
Prerequisites

​
Enable Payments Feature in Dashboard

The “Payments” feature must be enabled in the Reown Dashboard before you can use AppKit Pay, even for local testing.
  1. Go to your project in the Reown Dashboard
  2. Navigate to the Payments section
  3. Enable the Payments feature for your projectId

​
Test locally

In order to test locally use localhost and port 3000. This is the only port available for local testing. Add the following to your package.json file in order to run the development server on port 3000: 
"scripts": {
    "dev": "vite --port 3000",
},

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

​
Functions

​
pay

Opens the payment modal. Resolves when the modal is closed by the user or programmatically. pay(amount, addressRecipient, options: PaymentOptions): Promise<PaymentResult>

​
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