Help
RSS
API
Feed
Maltego
Contact
Domain > ui.stage.request.network
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2026-01-20
104.26.15.208
(
ClassC
)
Port 443
HTTP/1.1 200 OKDate: Tue, 20 Jan 2026 03:16:26 GMTContent-Type: text/html; charsetutf-8Transfer-Encoding: chunkedConnection: keep-aliveCache-Control: s-maxage31536000Report-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?s4rJ89mY%2FB1y6uQCRdUCM9Q4ujUrrz0GtKQ3yb92ypahOe4bBudWQE3AYHiHGbA2SVuVtktZLpp9jp5jaOsUbp089W6JJ8pHpRRP1hr5%2BD%2BSdmRkGFw%3D%3D}}Nel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, Accept-Encodingx-nextjs-cache: HITx-nextjs-prerender: 1x-nextjs-prerender: 1x-nextjs-stale-time: 300x-powered-by: Next.jscf-cache-status: DYNAMICServer: cloudflareCF-RAY: 9c0b69c2ed59efce-PDX !DOCTYPE html>!--JO2_kew40VN1yvGwYD9nw-->html langen>head>meta charSetutf-8/>meta nameviewport contentwidthdevice-width, initial-scale1/>link relpreload href/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2 asfont crossorigin typefont/woff2/>link relpreload href/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2 asfont crossorigin typefont/woff2/>link relstylesheet href/_next/static/chunks/4c1cef7f34a5c4a2.css data-precedencenext/>link relstylesheet href/_next/static/chunks/47009b6c5ea32083.css data-precedencenext/>link relpreload asscript fetchPrioritylow href/_next/static/chunks/3f8a81e37cae29f5.js/>script src/_next/static/chunks/beb180edcd96a319.js async>/script>script src/_next/static/chunks/159b25dbe5eaeae4.js async>/script>script src/_next/static/chunks/turbopack-054ab097fbba3486.js async>/script>script src/_next/static/chunks/ef4520930adad907.js async>/script>script src/_next/static/chunks/d18c41534be3328b.js async>/script>script src/_next/static/chunks/6badb018fe05910d.js async>/script>script src/_next/static/chunks/4255adee188d5849.js async>/script>script src/_next/static/chunks/d5760fa79af48dfd.js async>/script>script src/_next/static/chunks/7f1ddd667b26b10b.js async>/script>script src/_next/static/chunks/5388e7f444a4128f.js async>/script>meta namenext-size-adjust content/>title>Request Network UI Registry/title>meta namedescription contentReusable UI elements by Request Network/>link relicon href/favicon.ico?favicon.0b3bf435.ico sizes256x256 typeimage/x-icon/>script src/_next/static/chunks/a6dad97d9634a72d.js noModule>/script>/head>body classgeist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased>div hidden>!--$-->!--/$-->/div>main classcontainer mx-auto py-8 px-4 space-y-8>div classmin-h-screen bg-background>div classcontainer mx-auto px-4 py-12 max-w-4xl>div classtext-center mb-12>div classinline-flex items-center gap-2 mb-4>h1 classtext-4xl font-bold text-foreground>RequestNetwork UI Registry/h1>/div>p classtext-xl text-muted-foreground max-w-2xl mx-auto>Beautiful, accessible components for integrating Request Network payments into your applications/p>/div>div dirltr data-orientationhorizontal classspace-y-6>div roletablist aria-orientationhorizontal classh-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground grid w-full grid-cols-3 tabindex-1 data-orientationhorizontal styleoutline:none>button typebutton roletab aria-selectedtrue aria-controlsradix-_R_2avb_-content-examples data-stateactive idradix-_R_2avb_-trigger-examples classjustify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-stateactive:bg-background data-stateactive:text-foreground data-stateactive:shadow-sm flex items-center gap-2 tabindex-1 data-orientationhorizontal data-radix-collection-item>svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classlucide lucide-play w-4 h-4 aria-hiddentrue>path dM5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z>/path>/svg>Examples/button>button typebutton roletab aria-selectedfalse aria-controlsradix-_R_2avb_-content-installation data-stateinactive idradix-_R_2avb_-trigger-installation classjustify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-stateactive:bg-background data-stateactive:text-foreground data-stateactive:shadow-sm flex items-center gap-2 tabindex-1 data-orientationhorizontal data-radix-collection-item>svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classlucide lucide-code-xml w-4 h-4 aria-hiddentrue>path dm18 16 4-4-4-4>/path>path dm6 8-4 4 4 4>/path>path dm14.5 4-5 16>/path>/svg>Installation/button>button typebutton roletab aria-selectedfalse aria-controlsradix-_R_2avb_-content-documentation data-stateinactive idradix-_R_2avb_-trigger-documentation classjustify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-stateactive:bg-background data-stateactive:text-foreground data-stateactive:shadow-sm flex items-center gap-2 tabindex-1 data-orientationhorizontal data-radix-collection-item>svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classlucide lucide-file-text w-4 h-4 aria-hiddentrue>path dM15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z>/path>path dM14 2v4a2 2 0 0 0 2 2h4>/path>path dM10 9H8>/path>path dM16 13H8>/path>path dM16 17H8>/path>/svg>Documentation/button>/div>div data-stateactive data-orientationhorizontal roletabpanel aria-labelledbyradix-_R_2avb_-trigger-examples idradix-_R_2avb_-content-examples tabindex0 classmt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-6 styleanimation-duration:0s>h2 classtext-2xl font-semibold text-foreground mb-6>Examples/h2>div classrounded-lg border bg-card text-card-foreground shadow-sm border-border>div data-stateclosed>div classflex flex-col space-y-1.5 p-6 cursor-pointer hover:bg-muted/50 transition-colors typebutton aria-controlsradix-_R_4mavb_ aria-expandedfalse data-stateclosed>div classflex items-center justify-between>div>div classtext-2xl font-semibold leading-none tracking-tight flex items-center gap-2>Without a user wallet/div>div classtext-sm text-muted-foreground>Simple payment widget that handles wallet connection internally/div>/div>svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classlucide lucide-chevron-right h-5 w-5 text-muted-foreground aria-hiddentrue>path dm9 18 6-6-6-6>/path>/svg>/div>/div>div data-stateclosed idradix-_R_4mavb_ hidden>/div>/div>/div>div classrounded-lg border bg-card text-card-foreground shadow-sm border-border>div data-stateclosed>div classflex flex-col space-y-1.5 p-6 cursor-pointer hover:bg-muted/50 transition-colors typebutton aria-controlsradix-_R_6mavb_ aria-expandedfalse data-stateclosed>div classflex items-center justify-between>div>div classtext-2xl font-semibold leading-none tracking-tight flex items-center gap-2>With an existing wallet/div>div classtext-sm text-muted-foreground>Payment widget that uses an existing wallet connection from your app/div>/div>svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classlucide lucide-chevron-right h-5 w-5 text-muted-foreground aria-hiddentrue>path dm9 18 6-6-6-6>/path>/svg>/div>/div>div data-stateclosed idradix-_R_6mavb_ hidden>/div>/div>/div>/div>div data-stateinactive data-orientationhorizontal roletabpanel aria-labelledbyradix-_R_2avb_-trigger-installation hidden idradix-_R_2avb_-content-installation tabindex0 classmt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-6>/div>div data-stateinactive data-orientationhorizontal roletabpanel aria-labelledbyradix-_R_2avb_-trigger-documentation hidden idradix-_R_2avb_-content-documentation tabindex0 classmt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-6>/div>/div>/div>/div>/main>!--$-->!--/$-->script src/_next/static/chunks/3f8a81e37cae29f5.js id_R_ async>/script>script>(self.__next_fself.__next_f||).push(0)/script>script>self.__next_f.push(1,1:\$Sreact.fragment\\n2:I339756,\/_next/static/chunks/ef4520930adad907.js\,\default\\n3:I837457,\/_next/static/chunks/ef4520930adad907.js\,\default\\n5:I897367,\/_next/static/chunks/ef4520930adad907.js\,\OutletBoundary\\n7:I711533,\/_next/static/chunks/ef4520930adad907.js\,\AsyncMetadataOutlet\\n9:I897367,\/_next/static/chunks/ef4520930adad907.js\,\ViewportBoundary\\nb:I897367,\/_next/static/chunks/ef4520930adad907.js\,\MetadataBoundary\\nc:\$Sreact.suspense\\ne:I168027,,\default\\n:HL\/_next/static/chunks/4c1cef7f34a5c4a2.css\,\style\\n:HL\/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\,\font\,{\crossOrigin\:\\,\type\:\font/woff2\}\n:HL\/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\,\font\,{\crossOrigin\:\\,\type\:\font/woff2\}\n:HL\/_next/static/chunks/47009b6c5ea32083.css\,\style\\n)/script>script>self.__next_f.push(1,0:{\P\:null,\b\:\JO2-kew40VN1yvGwYD9nw\,\p\:\\,\c\:\\,\\,\i\:false,\f\:\\,{\children\:\__PAGE__\,{}},\$undefined\,\$undefined\,true,\\,\$\,\$1\,\c\,{\children\:\$\,\link\,\0\,{\rel\:\stylesheet\,\href\:\/_next/static/chunks/4c1cef7f34a5c4a2.css\,\precedence\:\next\,\crossOrigin\:\$undefined\,\nonce\:\$undefined\},\$\,\html\,null,{\lang\:\en\,\children\:\$\,\body\,null,{\className\:\geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\,\children\:\$\,\$L2\,null,{\parallelRouterKey\:\children\,\error\:\$undefined\,\errorStyles\:\$undefined\,\errorScripts\:\$undefined\,\template\:\$\,\$L3\,null,{},\templateStyles\:\$undefined\,\templateScripts\:\$undefined\,\notFound\:\$\,\title\,null,{\children\:\404: This page could not be found.\},\$\,\div\,null,{\style\:{\fontFamily\:\system-ui,\\\Segoe UI\\\,Roboto,Helvetica,Arial,sans-serif,\\\Apple Color Emoji\\\,\\\Segoe UI Emoji\\\\,\height\:\100vh\,\textAlign\:\center\,\display\:\flex\,\flexDirection\:\column\,\alignItems\:\center\,\justifyContent\:\center\},\children\:\$\,\div\,null,{\children\:\$\,\style\,null,{\dangerouslySetInnerHTML\:{\__html\:\body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\}},\$\,\h1\,null,{\className\:\next-error-h1\,\style\:{\display\:\inline-block\,\margin\:\0 20px 0 0\,\padding\:\0 23px 0 0\,\fontSize\:24,\fontWeight\:500,\verticalAlign\:\top\,\lineHeight\:\49px\},\children\:404},\$\,\div\,null,{\style\:{\display\:\inline-block\},\children\:\$\,\h2\,null,{\style\:{\fontSize\:14,\fontWeight\:400,\lineHeight\:\49px\,\margin\:0},\children\:\This page could not be found.\}}}},,\forbidden\:\$undefined\,\unauthorized\:\$undefined\}}}},{\children\:\__PAGE__\,\$\,\$1\,\c\,{\children\:\$L4\,\$\,\link\,\0\,{\rel\:\stylesheet\,\href\:\/_next/static/chunks/47009b6c5ea32083.css\,\precedence\:\next\,\crossOrigin\:\$undefined\,\nonce\:\$undefined\},\$\,\script\,\script-0\,{\src\:\/_next/static/chunks/d18c41534be3328b.js\,\async\:true,\nonce\:\$undefined\},\$\,\script\,\script-1\,{\src\:\/_next/static/chunks/6badb018fe05910d.js\,\async\:true,\nonce\:\$undefined\},\$\,\script\,\script-2\,{\src\:\/_next/static/chunks/4255adee188d5849.js\,\async\:true,\nonce\:\$undefined\},\$\,\script\,\script-3\,{\src\:\/_next/static/chunks/d5760fa79af48dfd.js\,\async\:true,\nonce\:\$undefined\},\$\,\script\,\script-4\,{\src\:\/_next/static/chunks/7f1ddd667b26b10b.js\,\async\:true,\nonce\:\$undefined\},\$\,\script\,\script-5\,{\src\:\/_next/static/chunks/5388e7f444a4128f.js\,\async\:true,\nonce\:\$undefined\},\$\,\$L5\,null,{\children\:\$L6\,\$\,\$L7\,null,{\promise\:\$@8\}}},{},null,false},null,false,\$\,\$1\,\h\,{\children\:null,\$\,\$L9\,null,{\children\:\$La\},\$\,\meta\,null,{\name\:\next-size-adjust\,\content\:\\},\$\,\$Lb\,null,{\children\:\$\,\div\,null,{\hidden\:true,\children\:\$\,\$c\,null,{\fallback\:null,\children\:\$Ld\}}}},false,\m\:\$undefined\,\G\:\$e\,\$\,\link\,\0\,{\rel\:\stylesheet\,\href\:\/_next/static/chunks/4c1cef7f34a5c4a2.css\,\precedence\:\next\,\crossOrigin\:\$undefined\,\nonce\:\$undefined\},\s\:false,\S\:true}\n)/script>script>self.__next_f.push(1,a:\$\,\meta\,\0\,{\charSet\:\utf-8\},\$\,\meta\,\1\,{\name\:\viewport\,\content\:\widthdevice-width, initial-scale1\}\n6:null\n)/script>script>self.__next_f.push(1,f:I27201,\/_next/static/chunks/ef4520930adad907.js\,\IconMark\\n8:{\metadata\:\$\,\title\,\0\,{\children\:\Request Network UI Registry\},\$\,\meta\,\1\,{\name\:\description\,\content\:\Reusable UI elements by Request Network\},\$\,\link\,\2\,{\rel\:\icon\,\href\:\/favicon.ico?favicon.0b3bf435.ico\,\sizes\:\256x256\,\type\:\image/x-icon\},\$\,\$Lf\,\3\,{},\error\:null,\digest\:\$undefined\}\n)/script>script>self.__next_f.push(1,d:\$8:metadata\\n)/script>script>self.__next_f.push(1,10:I217501,\/_next/static/chunks/d18c41534be3328b.js\,\/_next/static/chunks/6badb018fe05910d.js\,\/_next/static/chunks/4255adee188d5849.js\,\/_next/static/chunks/d5760fa79af48dfd.js\,\/_next/static/chunks/7f1ddd667b26b10b.js\,\/_next/static/chunks/5388e7f444a4128f.js\,\HomePage\\n11:T31e3,)/script>script>self.__next_f.push(1,# Payment Widget\n\nA React component for accepting cryptocurrency payments using the Request Network protocol. This widget provides a complete payment flow with wallet connection, currency selection, buyer information collection, and payment processing.\n\n## Overview\n\nThe Payment Widget is a comprehensive solution for integrating cryptocurrency payments into React applications. It handles the entire payment process from wallet connection to payment confirmation, with support for multiple currencies and networks through the Request Network.\n\n## Features\n\n- **Multi-wallet support** - Compatible with MetaMask, WalletConnect, Coinbase Wallet, and Safe\n- **Currency flexibility** - Supports multiple cryptocurrencies with automatic conversion rates\n- **Receipt generation** - Built-in PDF receipt generation and download\n- **Network support** - Works across Ethereum mainnet, Arbitrum, Base, Optimism, Polygon, and Sepolia\n- **Customizable UI** - Configurable display options and Tailwind CSS theming\n- **TypeScript support** - Fully typed for enhanced developer experience\n- **Works with your Viem accounts** - if your users are already logged in, you can use their logged in Viem account.\n\n## Installation\n\nInstall the required dependencies:\n\n```bash\nnpm install wagmi viem @tanstack/react-query react-hook-form lucide-react html2pdf.js\n```\n\nAdd the Payment Widget to your project using shadcn/ui:\n\n```bash\nnpx shadcn add payment-widget\n```\n\n## Basic Usage\n\n```tsx\nimport { PaymentWidget } from \@/components/payment-widget/payment-widget\;\n\nfunction App() {\n return (\n \u003cPaymentWidget\n amountInUsd\100.00\\n recipientWallet\0x742d35Cc6639C0532c29e54F3D4B48E4d7d5f1E0\\n paymentConfig{{\n walletConnectProjectId: \your-project-id\,\n network: \mainnet\,\n rnApiClientId: \your-rn-api-client-id\,\n }}\n receiptInfo{{\n companyInfo: {\n name: \Your Company\,\n address: {\n street: \123 Main St\,\n city: \New York\,\n state: \NY\,\n postalCode: \10001\,\n },\n email: \contact@yourcompany.com\,\n taxId: \123-45-6789\,\n walletAddress: \0x742d35Cc6639C0532c29e54F3D4B48E4d7d5f1E0\,\n },\n items: \n {\n id: \1\,\n description: \Product or Service\,\n quantity: 1,\n unitPrice: \100.00\,\n total: \100.00\,\n },\n ,\n totals: {\n total: 100,\n totalUSD: 100.00,\n totalDiscount: 0.00,\n totalTax: 0.00,\n },\n }}\n onPaymentSuccess{(requestId, transactionReceipts) \u003e console.log(\Payment successful:\, requestId, transactionReceipts)}\n onPaymentError{(error) \u003e console.error(\Payment failed:\, error)}\n /\u003e\n );\n}\n```\n\n## Props Reference\n\n### Core Props\n\n#### `amountInUsd` (required)\n- **Type**: `string`\n- **Description**: The payment amount in USD. This is the base amount that will be converted to the selected cryptocurrency at current exchange rates.\n- **Example**: `\100.00\`\n\n#### `recipientWallet` (required)\n- **Type**: `string`\n- **Description**: The Ethereum wallet address that will receive the payment. Must be a valid Ethereum address.\n- **Example**: `\0x742d35Cc6639C0532c29e54F3D4B48E4d7d5f1E0\`\n\n#### `paymentConfig` (required)\n- **Type**: `PaymentConfig`\n- **Description**: Configuration object containing payment-related settings.\n\n##### PaymentConfig Properties\n\n###### `walletConnectProjectId` (optional)\n- **Type**: `string`\n- **Description**: WalletConnect v2 project ID for wallet connection. Obtain from WalletConnect Cloud(https://cloud.walletconnect.com/).\n\n###### `network` (required)\n- **Type**: `\arbitrum\ | \base\ | \mainnet\ | \optimism\ | \polygon\ | \sepolia\`\n- **Description**: The blockchain network to process payments on.\n\n###### `rnApiClientId` (required)\n- **Type**: `string`\n- **Description**: Request Network API client ID for accessing conversion rates and processing payments. Obtain from Request Network.\n\n###### `feeInfo` (optional)\n- **Type**: `FeeInfo`\n- **Description**: Fee configuration for the payment. Defines any additional fees to be applied.\n\n###### `supportedCurrencies` (optional)\n- **Type**: `string`\n- **Description**: Array of cryptocurrency IDs to limit currency selection. If not provided, all available currencies for the network will be shown.\n- **Example**: `\ethereum-mainnet\, \usdc-ethereum\`\n\n#### `receiptInfo` (required)\n- **Type**: `ReceiptInfo`\n- **Description**: Comprehensive receipt information for PDF generation and payment records.\n\n##### ReceiptInfo Properties\n\n###### `companyInfo` (required)\n- **Type**: `CompanyInfo`\n- **Description**: Your companys information for the receipt.\n\n**CompanyInfo Structure:**\n```typescript\n{\n name: string; // Company name\n address: {\n street: string;\n city: string;\n state: string;\n postalCode: string;\n };\n email?: string; // Company email\n taxId: string; // Tax identification number\n walletAddress: string; // Company wallet address\n}\n```\n\n###### `items` (required)\n- **Type**: `ReceiptItem`\n- **Description**: Array of line items for the receipt.\n\n**ReceiptItem Structure:**\n```typescript\n{\n id: string; // Unique item identifier\n description: string; // Item description\n quantity: number; // Quantity of items\n unitPrice: string; // Price per unit in USD\n total: string; // Total price for this line item\n currency?: string; // Currency override (defaults to USD)\n discount?: number; // Discount percentage (0-100)\n tax?: number; // Tax percentage (0-100)\n}\n```\n\n###### `totals` (required)\n- **Type**: `ReceiptTotals`\n- **Description**: Summary totals for the receipt.\n\n**ReceiptTotals Structure:**\n```typescript\n{\n total: string; // Total amount in base currency\n totalUSD: string; // Total amount in USD\n totalDiscount: string; // Total discount amount\n totalTax: string; // Total tax amount\n}\n```\n\n###### `buyerInfo` (optional)\n- **Type**: `BuyerInfo`\n- **Description**: Pre-filled buyer information. If provided, the buyer info form will be pre-populated.\n\n###### `receiptNumber` (optional)\n- **Type**: `string`\n- **Description**: Custom receipt number. If not provided, a default will be generated.\n\n### Configuration Props\n\n#### `uiConfig` (optional)\n- **Type**: `UiConfig`\n- **Description**: UI behavior configuration options.\n\n##### UiConfig Properties\n\n###### `showRequestScanUrl` (optional)\n- **Type**: `boolean`\n- **Default**: `true`\n- **Description**: Whether to show a link to view the payment on Request Scan after successful payment.\n\n###### `showReceiptDownload` (optional)\n- **Type**: `boolean`\n- **Default**: `true`\n- **Description**: Whether to show the receipt PDF download button after successful payment.\n\n#### `walletAccount` (optional)\n- **Type**: `WalletClient`\n- **Description**: Pre-connected wallet client (using Viem/Wagmi). If provided, the wallet connection step will be skipped. Useful when you already manage wallet connection in your application.\n\n### Event Handlers\n\n#### `onPaymentSuccess` (optional)\n- **Type**: `(requestId: string) \u003e void | Promise\u003cvoid\u003e`\n- **Description**: Callback function called when payment is successfully completed. Receives the Request Network request ID.\n\n#### `onPaymentError` (optional)\n- **Type**: `(error: PaymentError) \u003e void | Promise\u003cvoid\u003e`\n- **Description**: Callback function called when payment fails. Receives detailed error information.\n\n### Children\n\n#### `children` (optional)\n- **Type**: `ReactNode`\n- **Description**: Custom trigger element for the payment widget. If not provided, defaults to \Pay with crypto\ button.\n- **Example**: \n```tsx\n\u003cPaymentWidget {...props}\u003e\n \u003cbutton className\custom-pay-button\\u003e\n Pay Now\n \u003c/button\u003e\n\u003c/PaymentWidget\u003e\n```\n\n## PaymentWidget Props\n\n### onComplete\nOptional callback that fires when the user closes the payment widget from the success screen. Use this to handle post-payment cleanup or navigation.\n\n```tsx\n\u003cPaymentWidget\n // ... other props\n onComplete{() \u003e {\n // Close modal, redirect user, etc.\n console.log(\Payment flow completed\);\n }}\n/\u003e\n```\n\n### PaymentConfig.reference\nOptional string to associate with the payment request for your own tracking purposes. This reference will be stored with the Request Network payment data.\n\n```tsx\n\u003cPaymentWidget\n paymentConfig{{\n rnApiClientId: \your-client-id\,\n reference: \invoice-12345\, // Your internal reference\n supportedCurrencies: \ETH-sepolia-sepolia\\n }}\n // ... other props\n/\u003e\n```\n\n## Styling and Theming\n\nThe Payment Widget uses Tailwind CSS and respects your applications design system through CSS custom properties. The following variables can be customized:\n\n```css\n:root {\n --primary: #your-primary-color;\n --primary-foreground: #your-primary-text-color;\n --secondary: #your-secondary-color;\n --secondary-foreground: #your-secondary-text-color;\n --muted: #your-muted-color;\n --muted-foreground: #your-muted-text-color;\n --accent: #your-accent-color;\n --accent-foreground: #your-accent-text-color;\n --background: #your-background-color;\n --foreground: #your-text-color;\n --border: #your-border-color;\n --radius: 0.5rem;\n}\n```\n\n## Using Your Existing Wallet Client\n\nIf your application already manages wallet connections using Viem/Wagmi, you can pass your existing wallet client to skip the built-in wallet connection flow. This is perfect for applications that have their own wallet connection UI or state management.\n\n### With Wagmi\n\n```tsx\nimport { useWalletClient } from \wagmi\;\nimport { PaymentWidget } from \@/components/payment-widget/payment-widget\;\n\nfunction PaymentWithExistingWallet() {\n const { data: walletClient } useWalletClient();\n\n return (\n \u003cPaymentWidget\n amountInUsd\100.00\\n recipientWallet\0x742d35Cc6639C0532c29e54F3D4B48E4d7d5f1E0\\n walletAccount{walletClient} // Pass your existing wallet client\n paymentConfig{{\n network: \mainnet\,\n rnApiClientId: \your-rn-api-client-id\,\n }}\n receiptInfo{{\n // ... your receipt info\n }}\n onPaymentSuccess{(requestId) \u003e console.log(\Payment successful:\, requestId)}\n onPaymentError{(error) \u003e console.error(\Payment failed:\, error)}\n \u003e\n Pay with My Connected Wallet\n \u003c/PaymentWidget\u003e\n );\n}\n```\n\n### With Direct Viem Client\n\nYou can also pass any Viem wallet client directly. For more information on creating wallet clients, see the Viem documentation(https://viem.sh/docs/clients/wallet).\n\n```tsx\nimport { createWalletClient, custom } from \viem\;\nimport { mainnet } from \viem/chains\;\n\n// Create wallet client directly with Viem\nconst walletClient createWalletClient({\n chain: mainnet,\n transport: custom(window.ethereum),\n});\n\n// Use with Payment Widget\n\u003cPaymentWidget\n walletAccount{walletClient}\n // ... other props\n/\u003e\n```\n\n### Benefits of Using Existing Wallet Client\n\n- **Consistent UX** - Users dont see multiple wallet connection prompts\n- **Shared State** - Wallet connection state is managed in one place\n- **Better Performance** - Reuses existing connection instead of creating new ones\n- **Simplified Flow** - Skips wallet selection step in the payment widget\n\nWhen `walletAccount` is provided, the Payment Widget will:\n- Skip the wallet connection step entirely\n- Use the provided wallet for all transactions\n- Display payment options immediately\n- Maintain your applications wallet connection state\n\n## Error Handling\n\nThe widget includes comprehensive error handling for common scenarios:\n\n- **Network connectivity issues**\n- **Insufficient wallet balance**\n- **Transaction rejection**\n- **Invalid wallet addresses**\n- **API rate limiting**\n\nAll errors are passed to the `onPaymentError` callback with detailed error information for debugging and user feedback.\n\n## Browser Support\n\n- Chrome 90+\n- Firefox 88+\n- Safari 14+\n- Edge 90+\n\n## Dependencies\n\nThe Payment Widget requires these peer dependencies:\n\n- `react` \n- `wagmi` \n- `viem` \n- `@tanstack/react-query` \n- `react-hook-form` \n- `lucide-react`\n- `html2pdf.js`\n\n## Security Considerations\n\n- Always validate payment amounts on your backend\n- Verify wallet addresses before processing\n- Implement proper rate limiting for payment requests\n- Store sensitive configuration (API keys) securely\n- Use HTTPS in production environments\n\n## Support\n\nFor technical support and bug reports, please visit the Request Network documentation(https://docs.request.network) or raise an issue in the repository.)/script>script>self.__next_f.push(1,4:\$\,\main\,null,{\className\:\container mx-auto py-8 px-4 space-y-8\,\children\:\$\,\$L10\,null,{\recipientWallet\:\0x29eAb540117632a112eA29bA8BE686a1B66467A7\,\readmeContent\:\$11\}}\n)/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]