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';

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

const paymentAssetDetails = {
  network: 'eip155:8453', // e.g., Base Mainnet
  asset: 'native', // or '0xTokenAddress...'
  metadata: { name: 'Ethereum', symbol: 'ETH', decimals: 18 }
};

// --- Open Modal ---
await openPay({
    recipient: '0xYourRecipientAddress...',
    amount: 0.001,
    paymentAsset: paymentAssetDetails
});

​
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