+ Payment Status
+ {isSuccess && (
+ Payment successful: {data}
+ )}
+ {isPending && (
+ Payment pending: {data}
+ )}
+ {error && (
+ Payment error: {error}
+ )}
+
+ )}
+```
+
+## Supported Networks and Assets
+
+AppKit Pay with Self-Custodial Wallets supports a wide range of networks and assets. For a complete list, please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-exchange#networks-and-assets-supported) section.
+
+## 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
+
+```ts
+import { baseETH } from '@reown/appkit-pay'
+```
+
+For custom assets, you can create a paymentAsset object with all the information:
+
+```ts
+// 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
+ }
+};
+```
+
+## Prerequisites
+
+### Enable Payments Feature in Dashboard
+
+The "Payments" feature **must be enabled** in the [Reown Dashboard](https://dashboard.reown.com) 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:
+```json
+"scripts": {
+ "dev": "vite --port 3000",
+},
+```
+
+## Hooks
+
+
+All the payment hooks must be imported from `@reown/appkit-pay/react`. For example:
+```tsx
+import { usePay } from '@reown/appkit-pay/react';
+```
+
+### usePay
+Handles the payment flow including opening the modal and tracking payment status.
+
+`usePay(options?: { onSuccess?: (data: PaymentResult) => void, onError?: (error: AppKitPayErrorMessage) => void }): UsePayReturn`
+ - `options`: Callbacks for success and error handling.
+ - `returns`: `{ open, isPending, isSuccess, data, error }`