0
# Payment Interface
1

2
Payment panel component for handling cryptocurrency payments with multi-chain support, QR code generation, and wallet integration.
3

4
## Capabilities
5

6
### PayPanel
7

8
Comprehensive payment panel component providing cryptocurrency payment interface with chain selection, QR code generation, and wallet connectivity.
9

10
```typescript { .api }
11
/**
12
 * Panel component for cryptocurrency payments with chain selection and QR codes
13
 * @param amount - Payment amount in token units
14
 * @param target - Payment targets by chain or function returning targets
15
 * @param supportedChains - List of supported blockchain networks
16
 * @param token - Payment token configuration
17
 * @param wallets - Available wallet options for payment
18
 * @param onFinish - Callback when payment is completed
19
 * @param children - Custom content to display in the panel
20
 */
21
const PayPanel: React.FC<React.PropsWithChildren<PayPanelProps>>;
22

23
interface PayPanelProps {
24
  amount: number | bigint;
25
  target: PayPanelTargetProps | (() => Promise<PayPanelTargetProps>);
26
  supportedChains: Array<{
27
    chain: Chain;
28
    extra?: React.ReactNode;
29
  }>;
30
  token: Token;
31
  wallets: WalletMetadata[];
32
  onFinish: () => void;
33
}
34

35
type PayPanelTargetProps = Record<string | number, string>;
36

37
interface WalletMetadata {
38
  name: string;
39
  remark: string;
40
  key?: React.Key;
41
  icon?: string | React.ReactNode;
42
  extensions?: false | WalletExtensionItem[];
43
  app?: false | { link: string };
44
  group?: string;
45
  universalProtocol?: { link: string };
46
  supportChainTypes?: ChainType[];
47
  transferQRCodeFormatter?: (params: Record<string, any>) => string;
48
  deeplink?: { urlTemplate: string };
49
}
50

51
interface WalletExtensionItem {
52
  key: string;
53
  browserIcon: string;
54
  browserName: string;
55
  link: string;
56
  description: string;
57
}
58
```
59

60
**Usage Examples:**
61

62
```typescript
63
import { PayPanel } from "@ant-design/web3";
64

65
// Basic payment panel
66
<PayPanel 
67
  amount={BigInt("1000000000000000000")} // 1 ETH
68
  target={{
69
    1: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5", // Ethereum mainnet
70
    137: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5" // Polygon
71
  }}
72
  supportedChains={[
73
    {
74
      chain: {
75
        id: 1,
76
        name: "Ethereum",
77
        type: ChainType.EVM,
78
        icon: <EthereumIcon />
79
      }
80
    },
81
    {
82
      chain: {
83
        id: 137,
84
        name: "Polygon",
85
        type: ChainType.EVM,
86
        icon: <PolygonIcon />
87
      },
88
      extra: <span style={{ color: 'green' }}>Low fees</span>
89
    }
90
  ]}
91
  token={{
92
    name: "Ethereum",
93
    symbol: "ETH",
94
    icon: <EthIcon />,
95
    decimal: 18,
96
    availableChains: [
97
      { chain: { id: 1, name: "Ethereum" } },
98
      { chain: { id: 137, name: "Polygon" } }
99
    ]
100
  }}
101
  wallets={[
102
    {
103
      name: "MetaMask",
104
      remark: "Connect with MetaMask",
105
      icon: <MetaMaskIcon />,
106
      extensions: [{
107
        key: 'Chrome',
108
        browserIcon: 'chrome-icon',
109
        browserName: 'Chrome',
110
        link: 'https://chrome.google.com/webstore/detail/metamask',
111
        description: 'Install MetaMask for Chrome'
112
      }]
113
    }
114
  ]}
115
  onFinish={() => {
116
    console.log('Payment completed');
117
  }}
118
/>
119

120
// Payment panel with QR codes
121
<PayPanel 
122
  amount={500}
123
  target={{
124
    1: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5", // Ethereum mainnet
125
    137: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5" // Polygon
126
  }}
127
  supportedChains={supportedChains}
128
  token={usdcToken}
129
  wallets={availableWallets}
130
  onFinish={() => {
131
    // Handle payment completion
132
    router.push('/payment-success');
133
  }}
134
/>
135

136
// Dynamic payment targets
137
<PayPanel 
138
  amount={BigInt("2000000")} // 2 USDC (6 decimals)
139
  target={async () => {
140
    // Fetch payment addresses dynamically
141
    const response = await fetch('/api/payment-addresses');
142
    const addresses = await response.json();
143
    
144
    return {
145
      1: {
146
        address: addresses.ethereum,
147
        qrCode: `ethereum:${addresses.ethereum}?value=2000000`,
148
        extra: <span>Processing fee: 0.1 USDC</span>
149
      },
150
      137: {
151
        address: addresses.polygon,
152
        qrCode: `polygon:${addresses.polygon}?value=2000000`,
153
        extra: <span>No processing fee</span>
154
      }
155
    };
156
  }}
157
  supportedChains={supportedChains}
158
  token={usdcToken}
159
  wallets={wallets}
160
  onFinish={() => {
161
    console.log('Payment completed');
162
  }}
163
>
164
  <div style={{ padding: 16, borderTop: '1px solid #f0f0f0' }}>
165
    <h4>Payment Instructions</h4>
166
    <ul>
167
      <li>Select your preferred network</li>
168
      <li>Connect your wallet or scan QR code</li>
169
      <li>Confirm the transaction</li>
170
    </ul>
171
  </div>
172
</PayPanel>
173

174
// Payment with custom wallet configuration
175
<PayPanel 
176
  amount={BigInt("1000000000000000000")} // 1 ETH
177
  target={paymentTargets}
178
  supportedChains={chains}
179
  token={ethToken}
180
  wallets={[
181
    {
182
      name: "WalletConnect",
183
      remark: "Connect with any WalletConnect wallet",
184
      icon: <WalletConnectIcon />,
185
      universalProtocol: { 
186
        link: "wc:" 
187
      },
188
      transferQRCodeFormatter: (params) => 
189
        `${params.protocol}:${params.address}?value=${params.amount}`,
190
      supportChainTypes: [ChainType.EVM]
191
    },
192
    {
193
      name: "Coinbase Wallet",
194
      remark: "Connect with Coinbase Wallet",
195
      icon: <CoinbaseIcon />,
196
      app: { 
197
        link: "https://wallet.coinbase.com/" 
198
      },
199
      deeplink: {
200
        urlTemplate: "cbwallet://dapp?url=${url}"
201
      }
202
    }
203
  ]}
204
  onFinish={() => {
205
    // Redirect to success page
206
    window.location.href = '/success';
207
  }}
208
/>
209
```
210

211
## Types
212

213
### Payment Configuration Types
214

215
```typescript { .api }
216
interface PayPanelTargetProps {
217
  [chainId: string | number]: PaymentTarget;
218
}
219

220
interface PaymentTarget {
221
  address: string;
222
  qrCode?: string | (() => Promise<string>);
223
  extra?: React.ReactNode;
224
}
225

226
interface SupportedChain {
227
  chain: Chain;
228
  extra?: React.ReactNode;
229
}
230
```
231

232
### Chain Types for Payments
233

234
```typescript { .api }
235
enum ChainType {
236
  EVM = 'EVM',
237
  SVM = 'SVM',
238
  Bitcoin = 'Bitcoin',
239
  Sui = 'Sui',
240
}
241

242
enum ChainIds {
243
  Mainnet = 1,
244
  Polygon = 137,
245
  BSC = 56,
246
  Arbitrum = 42_161,
247
  Optimism = 10,
248
  Avalanche = 43_114,
249
  Base = 8453,
250
  Scroll = 534_352,
251
}
252
```
253

254
## QR Code Generation
255

256
PayPanel supports multiple QR code formats and generation methods:
257

258
### Static QR Codes
259

260
```typescript
261
// URI format for Ethereum
262
const qrCode = "ethereum:0x742d35Cc6634C0532925a3b8D71C69999f8A03F5?value=1000000000000000000";
263

264
// Custom format with parameters
265
const qrCode = "mycoin:0x742d35Cc6634C0532925a3b8D71C69999f8A03F5?amount=100&token=USDC";
266
```
267

268
### Dynamic Target Generation
269

270
```typescript
271
// Function that returns targets dynamically
272
const dynamicTarget = async (): Promise<PayPanelTargetProps> => {
273
  const response = await fetch('/api/get-payment-addresses');
274
  const data = await response.json();
275
  return {
276
    1: data.ethereum_address,
277
    137: data.polygon_address,
278
    56: data.bsc_address
279
  };
280
};
281

282
<PayPanel 
283
  amount={BigInt("1000000000000000000")}
284
  target={dynamicTarget}
285
  supportedChains={chains}
286
  token={token}
287
  wallets={wallets}
288
  onFinish={() => console.log('Payment completed')}
289
/>
290
```
291

292
### Wallet-Specific QR Formatting
293

294
```typescript
295
const wallets = [{
296
  name: "Custom Wallet",
297
  remark: "Custom wallet with specific QR format",
298
  transferQRCodeFormatter: (params) => {
299
    return `customwallet://pay?address=${params.address}&amount=${params.amount}&chain=${params.chainId}`;
300
  }
301
}];
302
```
303

304
## Payment Flow Integration
305

306
PayPanel integrates with common payment flow patterns:
307

308
### Transaction Monitoring
309

310
```typescript
311
import { PayPanel } from "@ant-design/web3";
312

313
function PaymentPage() {
314
  const [paymentStatus, setPaymentStatus] = useState('pending');
315
  
316
  return (
317
    <PayPanel 
318
      amount={paymentAmount}
319
      target={paymentTargets}
320
      supportedChains={chains}
321
      token={selectedToken}
322
      wallets={wallets}
323
      onFinish={async () => {
324
        setPaymentStatus('processing');
325
        
326
        // Monitor transaction
327
        try {
328
          await monitorPayment(transactionHash);
329
          setPaymentStatus('confirmed');
330
        } catch (error) {
331
          setPaymentStatus('failed');
332
        }
333
      }}
334
    />
335
  );
336
}
337
```
338

339
### Multi-Step Payment Process
340

341
```typescript
342
function MultiStepPayment() {
343
  const [step, setStep] = useState(1);
344
  
345
  if (step === 1) {
346
    return <TokenSelection onNext={() => setStep(2)} />;
347
  }
348
  
349
  if (step === 2) {
350
    return (
351
      <PayPanel 
352
        amount={amount}
353
        target={targets}
354
        supportedChains={chains}
355
        token={selectedToken}
356
        wallets={wallets}
357
        onFinish={() => setStep(3)}
358
      />
359
    );
360
  }
361
  
362
  return <PaymentConfirmation />;
363
}
364
```