Pay with Self-Custodial Wallets - Javascript

Pay with Self-Custodial Wallets lets users pay with their self-custodial wallets like MetaMask, Trust, Ledger, and more directly in-app.

Quick Start#

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

Install the library#

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 objectconst 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, please refer to the Networks and Assets Supported section in our Pay with Self-Custodial Wallets 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 paymentAssetconst 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