From fb0a9d3e5cae079041c80ccc8d37af42be032046 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Wed, 15 Oct 2025 07:48:14 -0400 Subject: [PATCH 01/16] feat: add RequestLifecycleDemo component for simulating payment requests with unique IDs --- docs.json | 4 + index.mdx | 18 +- quickstart.mdx | 69 +++ snippets/payment-processor-qa.jsx | 306 +++++++++++++ snippets/request-lifecycle-demo.jsx | 668 ++++++++++++++++++++++++++++ 5 files changed, 1060 insertions(+), 5 deletions(-) create mode 100644 quickstart.mdx create mode 100644 snippets/payment-processor-qa.jsx create mode 100644 snippets/request-lifecycle-demo.jsx diff --git a/docs.json b/docs.json index f39b279..ef990cf 100644 --- a/docs.json +++ b/docs.json @@ -40,6 +40,10 @@ "tab": "Welcome", "pages": ["index"] }, + { + "tab": "Quick Start", + "pages": ["quickstart"] + }, { "tab": "Use Cases", "groups": [ diff --git a/index.mdx b/index.mdx index a9773a0..55ae499 100644 --- a/index.mdx +++ b/index.mdx @@ -34,6 +34,14 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx'
+ + See how Request Network works in 60 seconds. Interactive demo showing the Request ID concept. + + The easiest way to integrate. Payment types, webhooks, and developer tools. - + +
+ +
+ Supported chains, currencies, smart contracts, and community resources - -
-
- + +
+ +
+ +
+

What's Next?

+ +

+ Now that you understand the core concept, explore how Request Network powers specific business use cases: +

+ +
+ + + Create professional invoices with payment terms, line items, and automatic payment detection + + + + Send batch payments to multiple recipients with one click and automatic tracking + + + + Pay your team in crypto with automated payroll runs and instant reconciliation + + +
+ +

Ready to Build?

+ +

+ Get your API key and start creating requests in production +

+ +
+ + + Start building with the Request Network API + + + + Manage your requests in the web portal + + +
+
diff --git a/snippets/payment-processor-qa.jsx b/snippets/payment-processor-qa.jsx new file mode 100644 index 0000000..2730869 --- /dev/null +++ b/snippets/payment-processor-qa.jsx @@ -0,0 +1,306 @@ +import { useState } from 'react'; + +export const PaymentProcessorQA = () => { + const [openIndex, setOpenIndex] = useState(0); + + const faqs = [ + { + question: "💰 How much cheaper is Request Network?", + answer: ( +
+

+ Request Network charges 0.05% (5 basis points) per transaction. +

+

+ Traditional processors like Stripe and PayPal charge 2.9% + $0.30 per transaction. +

+
+

+ Example: On a $10,000 payment +

+
+
+ Request Network: + $5 fee +
+
+ Stripe/PayPal: + $290 fee +
+
+
+

+ That's 58x cheaper with Request Network. +

+
+ ), + }, + { + question: "🔐 What does 'non-custodial' mean?", + answer: ( +
+

+ With Request Network, funds go directly from payer to recipient on the blockchain. +

+ {' '} +

+ Traditional payment processors hold your funds for 2-7 days before releasing them. This creates: +

+
    +
  • + ❌ + Counterparty risk (they could go bankrupt) +
    • +
  • + ❌ + Delayed access to your money +
    • +
  • + ❌ + Potential freezing or seizure of funds +
    • +
+
+

+ ✅ Request Network eliminates these risks entirely +

+

+ You have full control and immediate access to your funds at all times. +

+
+
+ ), + }, + { + question: "📊 How does reconciliation compare?", + answer: ( +
+

+ Both Request Network and traditional processors offer payment reconciliation capabilities. +

+
+
+

+ Request Network Advantages: +

+
    +
  • + ✅ + Cryptographically guaranteed accuracy +
    • +
  • + ✅ + Permanent on-chain records (can't be deleted) +
    • +
  • + ✅ + Real-time status updates via webhooks +
    • +
  • + ✅ + No data retention limits +
    • +
+
+
+

+ Traditional Processors: +

+
    +
  • + ⚠️ + Data stored in company databases +
    • +
  • + ⚠️ + Limited data retention (typically 7 years) +
    • +
  • + ⚠️ + Depends on company staying in business +
    • +
  • + ⚠️ + Subject to data breaches and loss +
    • +
+
+
+
+ ), + }, + { + question: "🌍 Which is better for crypto businesses?", + answer: ( +
+

+ Request Network is purpose-built for crypto from the ground up: +

+
+
    +
  • + ✅ + + 553+ currencies across 10 EVM chains (Ethereum, Polygon, BSC, etc.) + +
    • +
  • + ✅ + + No forced fiat conversion - stay in crypto end-to-end + +
    • +
  • + ✅ + + Native Web3 wallet integration - connect with MetaMask, WalletConnect, etc. + +
    • +
  • + ✅ + + Crosschain payments - pay in one token, receive in another + +
    • +
+
+

+ Traditional processors treat crypto as an afterthought: +

+
    +
  • + ⚠️ + + Limited token support (usually just BTC, ETH, USDC) + +
    • +
  • + ⚠️ + + Requires crypto-to-fiat conversion with variable fees + +
    • +
  • + ⚠️ + + Fiat-first architecture with crypto bolted on + +
    • +
+
+ ), + }, + { + question: "🛡️ What about chargebacks?", + answer: ( +
+

+ With Request Network, crypto payments are typically final—there are no chargebacks by default. +

+
+

+ ✅ Benefits of Finality: +

+
    +
  • + • + No surprise reversals 60-90 days after payment +
    • +
  • + • + Perfect for digital goods and services +
    • +
  • + • + Ideal for international payments where chargeback fraud is common +
    • +
  • + • + No chargeback fees ($15-25 per dispute) +
    • +
+
+

+ Traditional processors face significant chargeback risk, especially for digital goods. Merchants can lose both the product and the payment, plus pay dispute fees. +

+
+

+ Note: Request Network supports escrow-based flows for use cases requiring buyer protection. Funds are held in smart contracts until conditions are met, enabling refunds when needed. +

+
+
+ ), + }, + ]; + + const ChevronDownIcon = ({ className = "h-4 w-4" }) => ( + + + + ); + + return ( + <> +
+
+

+ Request Network vs. Traditional Payment Processors +

+

+ How does Request Network compare to Stripe, PayPal, and other payment processors? +

+
+ +
+ {faqs.map((faq, index) => ( +
+ +
+
+ {faq.answer} +
+
+
+ ))} +
+
+ +
+
+
+
+ 💡 +
+
+
+

+ The Bottom Line +

+

+ Request Network combines the reconciliation capabilities of traditional processors with the cost-efficiency and non-custodial nature of crypto. You get automated payment tracking without the high fees, custody risk, or chargeback exposure. +

+
+
+
+ + ); +}; diff --git a/snippets/request-lifecycle-demo.jsx b/snippets/request-lifecycle-demo.jsx new file mode 100644 index 0000000..f6ba4cf --- /dev/null +++ b/snippets/request-lifecycle-demo.jsx @@ -0,0 +1,668 @@ +import { useState } from 'react'; + +export const RequestLifecycleDemo = () => { + const [currentStep, setCurrentStep] = useState(1); + const [requestData, setRequestData] = useState({ + amount: '500', + currency: 'USDC', + recipient: '0x742d35Cc6634C0532925a3b844Bc9e7E7a476dbf', + note: 'Payment for services', + requestId: null, + txHash: null, + paidAt: null, + }); + const [isCreating, setIsCreating] = useState(false); + const [isPaying, setIsPaying] = useState(false); + const [copiedId, setCopiedId] = useState(false); + const [copiedLink, setCopiedLink] = useState(false); + const [copiedTx, setCopiedTx] = useState(false); + + // Icon components + const SendIcon = ({ className = "h-4 w-4" }) => ( + + + + + ); + + const CopyIcon = ({ className = "h-4 w-4" }) => ( + + + + + ); + + const CheckIcon = ({ className = "h-4 w-4" }) => ( + + + + ); + + const ExternalLinkIcon = ({ className = "h-4 w-4" }) => ( + + + + + + ); + + const WalletIcon = ({ className = "h-4 w-4" }) => ( + + + + + + ); + + const FileTextIcon = ({ className = "h-4 w-4" }) => ( + + + + + + + + ); + + const ClockIcon = ({ className = "h-4 w-4" }) => ( + + + + + ); + + const RefreshIcon = ({ className = "h-4 w-4" }) => ( + + + + + + ); + + const CryptoIcon = ({ currency, className = "w-5 h-5" }) => { + const iconMap = { + USDC: "/logo/icons/usdc.png", + USDT: "/logo/icons/usdt.png", + DAI: "/logo/icons/dai.png", + }; + + const iconSrc = iconMap[currency]; + if (!iconSrc) return null; + + return {`${currency}; + }; + + // Generate request ID + const generateRequestId = () => { + const chars = '0123456789abcdef'; + let id = '01'; + for (let i = 0; i < 62; i++) { + id += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return id; + }; + + // Generate transaction hash + const generateTxHash = () => { + const chars = '0123456789abcdef'; + let hash = '0x'; + for (let i = 0; i < 64; i++) { + hash += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return hash; + }; + + // Handle create request + const handleCreateRequest = () => { + setIsCreating(true); + setTimeout(() => { + const newRequestId = generateRequestId(); + setRequestData(prev => ({ + ...prev, + requestId: newRequestId, + })); + setCurrentStep(2); + setIsCreating(false); + }, 800); + }; + + // Handle pay request + const handlePayRequest = () => { + setIsPaying(true); + const txHash = generateTxHash(); + setRequestData(prev => ({ + ...prev, + txHash: txHash, + })); + setCurrentStep(3); + setTimeout(() => { + setRequestData(prev => ({ + ...prev, + paidAt: new Date(), + })); + setCurrentStep(4); + setIsPaying(false); + }, 3000); + }; + + // Handle copy functions + const handleCopy = (text, type) => { + navigator.clipboard.writeText(text); + if (type === 'id') { + setCopiedId(true); + setTimeout(() => setCopiedId(false), 2000); + } else if (type === 'link') { + setCopiedLink(true); + setTimeout(() => setCopiedLink(false), 2000); + } else if (type === 'tx') { + setCopiedTx(true); + setTimeout(() => setCopiedTx(false), 2000); + } + }; + + // Handle reset + const handleReset = () => { + setCurrentStep(1); + setRequestData({ + amount: '500', + currency: 'USDC', + recipient: '0x742d35Cc6634C0532925a3b844Bc9e7E7a476dbf', + note: 'Payment for services', + requestId: null, + txHash: null, + paidAt: null, + }); + setCopiedId(false); + setCopiedLink(false); + setCopiedTx(false); + }; + + // Format time ago + const formatTimeAgo = (date) => { + if (!date) return ''; + const seconds = Math.floor((new Date() - date) / 1000); + if (seconds < 60) return `${seconds} seconds ago`; + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`; + const hours = Math.floor(minutes / 60); + return `${hours} hour${hours > 1 ? 's' : ''} ago`; + }; + + // Truncate address/hash + const truncate = (str, start = 6, end = 4) => { + if (!str) return ''; + return `${str.substring(0, start)}...${str.substring(str.length - end)}`; + }; + + return ( +
+ {/* Header */} +
+

+ Understanding Request Network: The Request ID Concept +

+

+ Every payment gets a unique ID for perfect tracking. See how simple it is. +

+
+ + {/* Progress indicator */} +
+
+ {[1, 2, 3, 4].map((step) => ( +
+
+
= step + ? 'bg-primary-600 text-white border-2 border-primary-600' + : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-600' + } + `}> + {currentStep > step ? : step} +
+ +
+ {step < 4 && ( +
step + ? 'bg-primary-600' + : 'bg-gray-300 dark:bg-gray-600' + } + `} /> + )} +
+ ))} +
+
+ + {/* Main demo area */} +
+ + {/* Step 1: Create */} + {currentStep === 1 && ( +
+
+
+ +
+

+ Step 1: Create Request +

+

+ Enter payment details to generate your request +

+
+ +
+ {/* Amount */} +
+ + setRequestData(prev => ({ ...prev, amount: e.target.value }))} + className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent" + placeholder="500" + /> +
+ + {/* Currency */} +
+ + +
+ + {/* Recipient */} +
+ + setRequestData(prev => ({ ...prev, recipient: e.target.value }))} + className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent font-mono text-sm" + placeholder="0x..." + /> +
+ + {/* Note */} +
+ + setRequestData(prev => ({ ...prev, note: e.target.value }))} + className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent" + placeholder="Payment for services" + /> +
+ + {/* Create button */} + +
+
+ )} + + {/* Step 2: Share */} + {currentStep === 2 && ( +
+
+
+ +
+

+ Step 2: Request Created! +

+

+ Share this request ID with your payer +

+
+ +
+ {/* Request ID */} +
+ +
+ + {requestData.requestId} + + +
+
+ + {/* Details */} +
+
+ Amount + + + {requestData.amount} {requestData.currency} + +
+
+ Recipient + + {truncate(requestData.recipient)} + +
+
+ Status + + + Pending Payment + +
+
+
+ + {/* Actions */} +
+ + + +
+
+ )} + + {/* Step 3: Pay (Processing) */} + {currentStep === 3 && ( +
+
+
+ +
+

+ Step 3: Processing Payment +

+

+ Simulating payment transaction... +

+
+ +
+
+
+ + Confirming transaction... +
+
+ + {/* Request ID */} +
+ +
+ + {requestData.requestId} + + + +
+
+ + {/* Transaction Hash */} + {requestData.txHash && ( +
+ +
+ + {requestData.txHash} + + + +
+
+ )} +
+
+ )} + + {/* Step 4: Track (Paid) */} + {currentStep === 4 && ( +
+
+
+ +
+

+ Step 4: Payment Complete! 🎉 +

+

+ Your request has been paid and recorded on-chain +

+
+ +
+ {/* Request ID */} +
+ +
+ + {requestData.requestId} + + +
+
+ + {/* Status */} +
+ +
+ + Paid +
+
+ + {/* Details */} +
+
+ Amount Paid + + + {requestData.amount} {requestData.currency} + +
+
+ Paid To + + {truncate(requestData.recipient)} + +
+
+ Transaction +
+ + {truncate(requestData.txHash, 6, 4)} + + +
+
+
+ Paid At + + {formatTimeAgo(requestData.paidAt)} + +
+
+
+ + {/* Actions */} +
+ + + +
+
+ )} +
+ + {/* Key concept callout */} +
+
+
+
+ 💡 +
+
+
+

+ The Power of Request IDs +

+

+ Every Request Network payment gets a unique ID stored permanently on-chain. This ID connects the payment to its business context (amount, recipient, reason) with cryptographic certainty—enabling 100% automated reconciliation without manual matching. +

+
+
+
+
+ ); +}; From 986fe25c50e1c0e05e8310644d14bee51cd46f15 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Thu, 23 Oct 2025 19:16:47 -0400 Subject: [PATCH 02/16] Move QuickStart page to Use Cases tab and change mode to frame - Moved quickstart page under Welcome page in Use Cases tab - Removed standalone Quick Start tab - Changed quickstart.mdx mode from 'custom' to 'frame' to match Welcome page - Keeps sidebar title as "Quick Start" --- docs.json | 7 ++----- quickstart.mdx | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/docs.json b/docs.json index e25ae83..78e3769 100644 --- a/docs.json +++ b/docs.json @@ -36,17 +36,14 @@ }, "navigation": { "tabs": [ - { - "tab": "Quick Start", - "pages": ["quickstart"] - }, { "tab": "Use Cases", "groups": [ { "group": "🚀 Get Started", "pages": [ - "use-cases/welcome" + "use-cases/welcome", + "quickstart" ] }, { diff --git a/quickstart.mdx b/quickstart.mdx index c1d66b6..7415820 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -2,7 +2,7 @@ title: "Quick Start: Create Your First Request" description: "See how Request Network gives every payment a unique ID for perfect tracking. Create and pay a request in seconds." sidebarTitle: "Quick Start" -mode: "custom" +mode: "frame" --- import { RequestLifecycleDemo } from '/snippets/request-lifecycle-demo.jsx' From b7956986fcd42cd91b44b3ef531ff57165c5253c Mon Sep 17 00:00:00 2001 From: MantisClone Date: Thu, 23 Oct 2025 22:07:45 -0400 Subject: [PATCH 03/16] Polish QuickStart page styling to match Welcome page design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Comprehensive styling improvements to achieve visual parity with Welcome page: STRUCTURE & LAYOUT: - Added page wrapper with 2rem top padding, 1400px max-width, centered - Added H1 title and description intro section with proper styling - Added descriptive section headers "Try It Yourself" and "How Request Network Compares" - Reorganized content hierarchy for better information flow TYPOGRAPHY UPDATES: - H1: 2.5rem font size with text-zinc-950 dark:text-white classes - H2: Changed from 2rem to 1.75rem for consistency with Welcome page - Paragraphs: Upgraded from 1rem to 1.125rem with lineHeight 1.75 - Replaced inline color: var(--text-primary) with theme-aware className GREEN-TINTED BACKGROUNDS: - Created new DemoContainer component with gradient backgrounds - Light mode: rgba(1,176,137,0.02) → rgba(1,176,137,0.04) gradient - Dark mode: rgba(1,176,137,0.06) → rgba(1,176,137,0.10) gradient - Added subtle green borders matching the Request Network brand - Updated RequestLifecycleDemo main area from flat gray to softer gradient SPACING STANDARDIZATION: - Demo sections use marginBottom: 4rem (was mt-12 Tailwind class) - Final card section uses marginBottom: 3rem - Headers use marginTop: 3rem, marginBottom: 2rem consistently - Converted all Tailwind spacing to inline styles for uniformity THEME COMPATIBILITY: - All components tested for light and dark mode support - Green tints optimized per theme for proper contrast - Text colors use semantic variables and theme-aware classes Files changed: - quickstart.mdx: Complete page restructure and styling - snippets/demo-container.jsx: New wrapper component for green backgrounds - snippets/request-lifecycle-demo.jsx: Updated main demo area background --- quickstart.mdx | 46 ++++++++++++++++++++++++----- snippets/demo-container.jsx | 15 ++++++++++ snippets/request-lifecycle-demo.jsx | 14 ++++++++- 3 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 snippets/demo-container.jsx diff --git a/quickstart.mdx b/quickstart.mdx index 7415820..d720181 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -7,17 +7,49 @@ mode: "frame" import { RequestLifecycleDemo } from '/snippets/request-lifecycle-demo.jsx' import { PaymentProcessorQA } from '/snippets/payment-processor-qa.jsx' +import { DemoContainer } from '/snippets/demo-container.jsx' - +
+
+

Quick Start: Create Your First Request

+

+ See how Request Network gives every payment a unique ID for perfect tracking. Create and pay a request in seconds. +

+
+ +

+ Try It Yourself +

+ +

+ Experience the Request ID concept in action. Create a request, get a unique ID, and see how payments are tracked automatically: +

+ +
+ + + +
+ +

+ How Request Network Compares +

-
- +

+ Understanding how Request Network differs from traditional payment processors: +

+ +
+ + + +
-

What's Next?

+

What's Next?

-

+

Now that you understand the core concept, explore how Request Network powers specific business use cases:

@@ -49,9 +81,9 @@ import { PaymentProcessorQA } from '/snippets/payment-processor-qa.jsx'
-

Ready to Build?

+

Ready to Build?

-

+

Get your API key and start creating requests in production

diff --git a/snippets/demo-container.jsx b/snippets/demo-container.jsx new file mode 100644 index 0000000..9c258e1 --- /dev/null +++ b/snippets/demo-container.jsx @@ -0,0 +1,15 @@ +export const DemoContainer = ({ children }) => { + return ( +
+ {children} +
+ ); +}; diff --git a/snippets/request-lifecycle-demo.jsx b/snippets/request-lifecycle-demo.jsx index f6ba4cf..d7b6d7c 100644 --- a/snippets/request-lifecycle-demo.jsx +++ b/snippets/request-lifecycle-demo.jsx @@ -246,7 +246,19 @@ export const RequestLifecycleDemo = () => {
{/* Main demo area */} -
+
{/* Step 1: Create */} {currentStep === 1 && ( From 2d084addc18c949f7e9b1eb5875aa2dcc5a5de27 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Thu, 23 Oct 2025 22:24:10 -0400 Subject: [PATCH 04/16] Fix QuickStart demo backgrounds and stepper visibility issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Critical fixes for light/dark mode contrast and green theming: DARK MODE BACKGROUND FIXES: - DemoContainer: Changed from light rgba to proper dark green (#001912 → #00251a) - Main demo area: Dark green gradient (#002419 → #003326) instead of gray - Increased border opacity for better definition in dark mode STEPPER VISIBILITY FIX: - Fixed white-on-white text in light mode (was invisible) - Active steps now use explicit #01B089 background with white text - Applied inline styles to override Tailwind primary color issues - Progress lines also use #01B089 for consistency GREEN-TINTED BACKGROUNDS: - Main demo area: rgba(1,176,137,0.04) → rgba(1,176,137,0.08) gradient in light - DemoContainer: Increased light mode opacity for better visibility - All borders use green tint instead of gray These changes ensure: ✓ Stepper numbers are always visible in both themes ✓ Dark mode shows proper dark green, not light/weird color ✓ All backgrounds use green shades matching brand aesthetic ✓ Proper contrast ratios for accessibility --- snippets/demo-container.jsx | 6 ++-- snippets/request-lifecycle-demo.jsx | 46 ++++++++++++++++++----------- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/snippets/demo-container.jsx b/snippets/demo-container.jsx index 9c258e1..d5f685b 100644 --- a/snippets/demo-container.jsx +++ b/snippets/demo-container.jsx @@ -2,12 +2,12 @@ export const DemoContainer = ({ children }) => { return (
{children}
diff --git a/snippets/request-lifecycle-demo.jsx b/snippets/request-lifecycle-demo.jsx index d7b6d7c..cc7a951 100644 --- a/snippets/request-lifecycle-demo.jsx +++ b/snippets/request-lifecycle-demo.jsx @@ -212,13 +212,20 @@ export const RequestLifecycleDemo = () => { {[1, 2, 3, 4].map((step) => (
-
= step - ? 'bg-primary-600 text-white border-2 border-primary-600' - : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-600' - } - `}> +
= step + ? 'border-2' + : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-600' + } + `} + style={currentStep >= step ? { + backgroundColor: '#01B089', + borderColor: '#01B089', + color: 'white' + } : {}} + > {currentStep > step ? : step}
{
{step < 4 && ( -
step - ? 'bg-primary-600' - : 'bg-gray-300 dark:bg-gray-600' - } - `} /> +
step ? { + backgroundColor: '#01B089' + } : {}} + /> )}
))} @@ -248,16 +260,16 @@ export const RequestLifecycleDemo = () => { {/* Main demo area */}
{/* Step 1: Create */} From edc8da88e30b6728370511d2a5f8b3bf83a97280 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Thu, 23 Oct 2025 22:31:26 -0400 Subject: [PATCH 05/16] Remove duplicate headers and apply green theme to PaymentProcessorQA accordion DEDUPLICATION: - Removed centered header from RequestLifecycleDemo (duplicated page's left-justified "Try It Yourself") - Removed centered header from PaymentProcessorQA (duplicated page's "How Request Network Compares") - Eliminated redundant background container from PaymentProcessorQA - Page-level headers now serve as the single source for section titles ACCORDION GREEN THEME: - Accordion items: Green gradient backgrounds (rgba 0.02-0.06 light, #002419-#003326 dark) - Active accordion: Stronger green tint when expanded - Hover state: Green border on hover instead of primary color - Example boxes: Green gradients instead of gray (rgba 0.05-0.08) - All borders: Green-tinted instead of neutral gray VISUAL CONSISTENCY: - Accordion backgrounds now match the DemoContainer and main demo area - Dark mode uses same dark green palette (#002419-#003326) throughout - Light mode uses consistent green tints with rgba(1,176,137,...) - All interactive elements use green theme consistently The entire QuickStart page now has unified green theming with no duplicate headers. --- snippets/payment-processor-qa.jsx | 35 ++++++++++++++++++----------- snippets/request-lifecycle-demo.jsx | 10 --------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/snippets/payment-processor-qa.jsx b/snippets/payment-processor-qa.jsx index 2730869..12b615b 100644 --- a/snippets/payment-processor-qa.jsx +++ b/snippets/payment-processor-qa.jsx @@ -14,7 +14,13 @@ export const PaymentProcessorQA = () => {

Traditional processors like Stripe and PayPal charge 2.9% + $0.30 per transaction.

-
+

Example: On a $10,000 payment

@@ -102,7 +108,13 @@ export const PaymentProcessorQA = () => {
-
+

Traditional Processors:

@@ -241,21 +253,18 @@ export const PaymentProcessorQA = () => { return ( <> -
-
-

- Request Network vs. Traditional Payment Processors -

-

- How does Request Network compare to Stripe, PayPal, and other payment processors? -

-
- +
{faqs.map((faq, index) => (
- - {/* Key concept callout */} -
-
-
-
- 💡 -
-
-
-

- The Power of Request IDs -

-

- Every Request Network request gets a unique ID stored permanently on-chain. This ID connects the request to its business context (amount, recipient, reason). Payments reference this Request ID with cryptographic certainty—enabling 100% automated reconciliation without manual matching. -

-
-
-
); }; From ceb741af989a9057a33d093f716c3ddf506698ed Mon Sep 17 00:00:00 2001 From: MantisClone Date: Fri, 24 Oct 2025 21:57:44 -0400 Subject: [PATCH 10/16] Polish QuickStart page: improve intro clarity, remove redundant descriptions, tighten card copy, remove emoji from accordion, unify container padding --- quickstart.mdx | 34 ++++++++----------------------- snippets/payment-processor-qa.jsx | 8 ++++---- 2 files changed, 12 insertions(+), 30 deletions(-) diff --git a/quickstart.mdx b/quickstart.mdx index d52ea31..af91fb4 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -9,11 +9,11 @@ import { RequestLifecycleDemo } from '/snippets/request-lifecycle-demo.jsx' import { PaymentProcessorQA } from '/snippets/payment-processor-qa.jsx' import { DemoContainer } from '/snippets/demo-container.jsx' -
+

How Request IDs Work

- Every request gets a unique Request ID that links it to its business context—amount, recipient, invoice details. Payments are then tied to this Request ID, eliminating manual payment matching and enabling automated reconciliation. + Every request gets a unique Request ID, a permanent identifier that connects payment references and blockchain transactions into a single, auditable record. The API and SDK handle the underlying complexity so you can focus on building.

@@ -21,10 +21,6 @@ import { DemoContainer } from '/snippets/demo-container.jsx' Create and Pay a Request Demo -

- Create a request, get a unique ID, and see how payments are automatically tracked against that request: -

-
@@ -35,24 +31,14 @@ import { DemoContainer } from '/snippets/demo-container.jsx' Comparison with Traditional Processors -

- How Request Network differs from Stripe, PayPal, and other payment processors: -

-
-
-

Explore Use Cases

-

- See how Request Network powers specific business scenarios: -

-
- Turn invoices into trackable on-chain requests with automatic payment detection and reconciliation + Turn invoices into trackable on-chain requests with automatic payment detection - Send batch payments to multiple recipients in a single transaction with automatic tracking + Send batch payments to multiple recipients with automatic tracking - Pay your team in crypto with automated payroll runs and instant reconciliation + Pay your team in crypto with automated payroll runs

Start Building

-

- Get your API key and start integrating Request Network into your application: -

-
- - Set up authentication and create your first request with the API + + Set up authentication and create your first request - Manage API keys, view requests, and configure webhooks in the web portal + Manage API keys, view requests, and configure webhooks
diff --git a/snippets/payment-processor-qa.jsx b/snippets/payment-processor-qa.jsx index de0a7dd..3a4631c 100644 --- a/snippets/payment-processor-qa.jsx +++ b/snippets/payment-processor-qa.jsx @@ -5,7 +5,7 @@ export const PaymentProcessorQA = () => { const faqs = [ { - question: "💰 How much cheaper is Request Network?", + question: "How much cheaper is Request Network?", answer: (

@@ -42,7 +42,7 @@ export const PaymentProcessorQA = () => { ), }, { - question: "🔐 What does 'non-custodial' mean?", + question: "What does 'non-custodial' mean?", answer: (

@@ -78,7 +78,7 @@ export const PaymentProcessorQA = () => { ), }, { - question: "📊 How does reconciliation compare?", + question: "How does reconciliation compare?", answer: (

@@ -142,7 +142,7 @@ export const PaymentProcessorQA = () => { ), }, { - question: "🌍 Which is better for crypto businesses?", + question: "Which is better for crypto businesses?", answer: (

From 63c0caa09bad5ec59fad1420ead29e6f652f9b8b Mon Sep 17 00:00:00 2001 From: MantisClone Date: Sat, 25 Oct 2025 13:28:12 -0400 Subject: [PATCH 11/16] Add Payment Detection use case and rename Quickstart to Interactive Demo - Add Payment Detection as first use case in navigation (aligns with marketing's 6 use cases) - Rename "Quick Start" to "Interactive Demo" for accurate expectations - Create new payment-detection.mdx with detection mechanics, webhooks, and standalone scenarios - Update Welcome page cards to reflect new Interactive Demo naming - Keep all existing demo and comparison content intact --- docs.json | 1 + quickstart.mdx | 10 +- use-cases/payment-detection.mdx | 278 ++++++++++++++++++++++++++++++++ use-cases/welcome.mdx | 8 +- 4 files changed, 288 insertions(+), 9 deletions(-) create mode 100644 use-cases/payment-detection.mdx diff --git a/docs.json b/docs.json index 78e3769..c4cd2d3 100644 --- a/docs.json +++ b/docs.json @@ -49,6 +49,7 @@ { "group": "🎯 Use Cases", "pages": [ + "use-cases/payment-detection", "use-cases/invoicing", "use-cases/payouts", "use-cases/payroll", diff --git a/quickstart.mdx b/quickstart.mdx index af91fb4..dd8cfb7 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,7 +1,7 @@ --- -title: "Quick Start: Create Your First Request" -description: "Learn how Request IDs link payments to business context. Create a request, make a payment, and see automatic reconciliation in action." -sidebarTitle: "Quick Start" +title: "Interactive Demo" +description: "Experience Request Network's payment processing flow and see how it compares to traditional processors." +sidebarTitle: "Demo" mode: "frame" --- @@ -11,9 +11,9 @@ import { DemoContainer } from '/snippets/demo-container.jsx'

-

How Request IDs Work

+

Payment Processing with Request Network

- Every request gets a unique Request ID, a permanent identifier that connects payment references and blockchain transactions into a single, auditable record. The API and SDK handle the underlying complexity so you can focus on building. + Experience the complete payment lifecycle: create a request, process payment, and get automatic confirmation. Every request gets a unique Request ID that links the payment to your business context—no manual reconciliation needed.

diff --git a/use-cases/payment-detection.mdx b/use-cases/payment-detection.mdx new file mode 100644 index 0000000..f364594 --- /dev/null +++ b/use-cases/payment-detection.mdx @@ -0,0 +1,278 @@ +--- +title: "💳 Payment Detection" +description: "Automatically detect and verify crypto payments with real-time blockchain monitoring and webhooks" +--- + +## Overview + +Payment Detection monitors blockchain networks to automatically identify and verify when payments are completed. Add crypto payment acceptance to your existing systems without rebuilding your entire infrastructure. + +## When to Use Payment Detection + + + + You already have invoicing, billing, or business systems and just need crypto payment acceptance + + + + Collect payments at scale to one wallet address and automatically attribute each payment + + + + Need instant payment confirmation without manual blockchain checking + + + + Accept payments across Ethereum, Polygon, BSC, and 10+ EVM chains + + + +## Common Scenarios + +### Donations with Attribution +Accept crypto donations to a single wallet and automatically attribute each to the correct donor, campaign, or cause. + +**Example:** A nonprofit collects donations from hundreds of donors to one Ethereum address. Each donation includes a Request ID, enabling automatic attribution and thank-you emails. + +### SaaS Adding Crypto Payments +Existing subscription or billing platform adds crypto as a payment option alongside credit cards. + +**Example:** A SaaS company uses Stripe for card payments but wants to offer USDC payments. Payment Detection monitors for crypto payments and updates subscription status automatically. + +### Manual Invoices + Crypto Detection +Send invoices through existing channels (email, PDF) and let customers pay in crypto with automatic detection. + +**Example:** A freelancer emails invoices as PDFs with a Request ID. Clients pay in crypto, and the freelancer's accounting software automatically marks invoices as paid via webhook. + +### High-Volume Payment Collection +Collect thousands of payments without creating new wallet addresses for each transaction. + +**Example:** An e-commerce platform processes 10,000+ crypto orders per day. Instead of generating unique addresses, each order gets a Request ID for attribution. + +--- + +## How Payment Detection Works + + + + Customer sends crypto payment including the Request ID in the transaction reference + + + + Request Network continuously scans supported blockchains for transactions matching your requests + + + + When a matching payment is found, Request Network verifies amount, currency, and confirmations + + + + Your system receives a real-time webhook with payment details and status + + + + Your business logic updates invoice status, triggers fulfillment, or sends receipts + + + +--- + +## Detection Features + +### Real-time Blockchain Scanning +- **Multi-chain monitoring:** Ethereum, Polygon, Arbitrum, Optimism, BSC, Gnosis, Fantom, Avalanche, and more +- **Sub-minute detection:** Typically detect payments within seconds of blockchain confirmation +- **Confirmation tracking:** Configurable confirmation thresholds for different security requirements + +### Payment Verification +- **Amount matching:** Verify exact payment amount or accept partial payments +- **Currency validation:** Support for 553+ tokens across all supported chains +- **Smart contract verification:** Detect payments through ERC20, native tokens, and conversion proxies + +### Webhook Integration +- **Event notifications:** `payment.detected`, `payment.confirmed`, `payment.failed` +- **Retry logic:** Automatic webhook retries with exponential backoff +- **Signature verification:** Cryptographically signed webhooks for security + +--- + +## API Integration + + + + Real-time payment notifications sent to your server + + + + Poll for payment status on demand + + + + Technical details on detection methods and configuration + + + + Check request status including payment state + + + +--- + +## Detection-Only vs Full Workflows + +Understanding when to use standalone payment detection versus integrated workflows: + + + + **Best for:** Existing systems that just need crypto payment acceptance + + **What you handle:** + - Create invoices/requests in your existing system + - Generate Request IDs via API + - Include Request ID in payment instructions + - Receive webhooks when payments are detected + - Update your system based on payment status + + **What Request Network handles:** + - Blockchain monitoring across all chains + - Payment verification and confirmation tracking + - Webhook delivery with retry logic + - Permanent on-chain payment records + + **Example:** QuickBooks + crypto payments via Request Network detection + + + + **Best for:** Building new invoicing systems from scratch + + **What Request Network handles:** + - Invoice creation with structured data + - Payment link generation + - Payment processing + - Payment detection + - Complete payment lifecycle management + + **What you handle:** + - User interface and experience + - Customer management + - Business logic and workflows + + **Example:** [EasyInvoice](/use-cases/invoicing) - full-stack invoicing application + + [Learn more →](/use-cases/invoicing) + + + + **Payment detection powers all Request Network use cases:** + + - **[Payouts](/use-cases/payouts):** Detection confirms batch payment completion + - **[Payroll](/use-cases/payroll):** Detection verifies salary payments + - **[Checkout](/use-cases/checkout):** Detection triggers order fulfillment + - **[Subscriptions](/use-cases/subscriptions):** Detection handles recurring payments + + Each use case combines request creation with payment detection for specific workflows. + + + +--- + +## Implementation Example + +Here's a minimal example of using payment detection with webhooks: + + +```javascript Node.js - Create Request +const response = await fetch('https://api.request.network/requests', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${API_KEY}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + currency: 'USDC-matic', + expectedAmount: '100.00', + paymentAddress: '0x...your-wallet', + reason: 'Invoice #12345' + }) +}); + +const { requestId } = await response.json(); +// Include requestId in payment instructions to customer +``` + +```javascript Node.js - Webhook Handler +app.post('/webhooks/request', (req, res) => { + const { eventType, requestId, paymentAmount, status } = req.body; + + if (eventType === 'payment.detected') { + // Payment detected on blockchain + console.log(`Payment detected for ${requestId}: ${paymentAmount}`); + + // Update your system + await updateInvoiceStatus(requestId, 'PAID'); + await sendReceiptEmail(requestId); + } + + res.status(200).send('OK'); +}); +``` + +```python Python - Webhook Handler +from flask import Flask, request + +@app.route('/webhooks/request', methods=['POST']) +def handle_webhook(): + data = request.json + + if data['eventType'] == 'payment.detected': + request_id = data['requestId'] + payment_amount = data['paymentAmount'] + + # Update your system + update_invoice_status(request_id, 'PAID') + send_receipt_email(request_id) + + return '', 200 +``` + + +--- + +## Supported Networks & Currencies + +### Mainnet Networks +- **Ethereum:** ETH, USDC, USDT, DAI, and 200+ ERC20 tokens +- **Polygon:** MATIC, USDC, USDT, DAI, and 150+ tokens +- **Arbitrum, Optimism, BSC, Gnosis, Fantom, Avalanche:** Full ERC20 support + +### Detection Speed +- **Ethereum:** ~15 seconds per confirmation +- **Polygon:** ~2 seconds per confirmation +- **Layer 2s:** Sub-second to ~2 seconds + +### Testnet Support +Available on Sepolia, Mumbai, and other testnets for development + +[View all supported chains and currencies →](/resources/supported-chains-and-currencies) + +--- + +## Next Steps + + + + Set up authentication and create your first request + + + + Set up real-time payment notifications + + + + Learn how to check payment status programmatically + + + + Manage API keys and monitor requests in real-time + + diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index ea4dd05..cb7f92e 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -47,19 +47,19 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx'
- See how Request Network works in 60 seconds. Interactive demo showing the Request ID concept. + Experience the payment lifecycle with our interactive demo and see how we compare to traditional processors. - Explore specific business scenarios: invoicing, payouts, payroll, checkout, and subscriptions + Explore specific business scenarios: payment detection, invoicing, payouts, payroll, checkout, and subscriptions Date: Sat, 25 Oct 2025 22:16:50 -0400 Subject: [PATCH 12/16] Rename Interactive Demo to Create and Pay Demo - Rename quickstart.mdx to create-and-pay.mdx for clearer URL - Update title to "Create and Pay Demo" for maximum precision - Update sidebar title to "Create & Pay" for brevity - Update docs.json navigation reference - Update Welcome page card title and link --- quickstart.mdx => create-and-pay.mdx | 6 +++--- docs.json | 2 +- use-cases/welcome.mdx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename quickstart.mdx => create-and-pay.mdx (93%) diff --git a/quickstart.mdx b/create-and-pay.mdx similarity index 93% rename from quickstart.mdx rename to create-and-pay.mdx index dd8cfb7..c275c0d 100644 --- a/quickstart.mdx +++ b/create-and-pay.mdx @@ -1,7 +1,7 @@ --- -title: "Interactive Demo" -description: "Experience Request Network's payment processing flow and see how it compares to traditional processors." -sidebarTitle: "Demo" +title: "Create and Pay Demo" +description: "Experience the complete payment lifecycle: create a request, process payment, and see how Request Network compares to traditional processors." +sidebarTitle: "Create & Pay" mode: "frame" --- diff --git a/docs.json b/docs.json index c4cd2d3..361683c 100644 --- a/docs.json +++ b/docs.json @@ -43,7 +43,7 @@ "group": "🚀 Get Started", "pages": [ "use-cases/welcome", - "quickstart" + "create-and-pay" ] }, { diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index cb7f92e..029518f 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -47,8 +47,8 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx'
Experience the payment lifecycle with our interactive demo and see how we compare to traditional processors. From b66432b8905403d5a7dfc79136b2debfc723926c Mon Sep 17 00:00:00 2001 From: MantisClone Date: Sat, 25 Oct 2025 22:21:42 -0400 Subject: [PATCH 13/16] Update to Payment Processing Demo for better accuracy - Change title from "Create and Pay Demo" to "Payment Processing Demo" - Better aligns with page H1 "Payment Processing with Request Network" - More accurately reflects full scope: demo + processor comparison - Shorter sidebar title: "Demo" - Update Welcome page card title --- create-and-pay.mdx | 6 +++--- use-cases/welcome.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/create-and-pay.mdx b/create-and-pay.mdx index c275c0d..c12f35c 100644 --- a/create-and-pay.mdx +++ b/create-and-pay.mdx @@ -1,7 +1,7 @@ --- -title: "Create and Pay Demo" -description: "Experience the complete payment lifecycle: create a request, process payment, and see how Request Network compares to traditional processors." -sidebarTitle: "Create & Pay" +title: "Payment Processing Demo" +description: "Experience Request Network's payment processing: create requests, process payments, and see how we compare to traditional processors." +sidebarTitle: "Demo" mode: "frame" --- diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index 029518f..395f4b6 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -47,7 +47,7 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx'
From cf62f4c1005dbd99ea3622812d774ebb4e5c59fa Mon Sep 17 00:00:00 2001 From: MantisClone Date: Sat, 25 Oct 2025 22:23:00 -0400 Subject: [PATCH 14/16] Rename file to payment-processing-demo.mdx - Rename create-and-pay.mdx to payment-processing-demo.mdx - Update docs.json navigation reference - Update Welcome page card link to /payment-processing-demo - URL now matches page title and content scope --- docs.json | 2 +- create-and-pay.mdx => payment-processing-demo.mdx | 0 use-cases/welcome.mdx | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename create-and-pay.mdx => payment-processing-demo.mdx (100%) diff --git a/docs.json b/docs.json index 361683c..1571715 100644 --- a/docs.json +++ b/docs.json @@ -43,7 +43,7 @@ "group": "🚀 Get Started", "pages": [ "use-cases/welcome", - "create-and-pay" + "payment-processing-demo" ] }, { diff --git a/create-and-pay.mdx b/payment-processing-demo.mdx similarity index 100% rename from create-and-pay.mdx rename to payment-processing-demo.mdx diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index 395f4b6..59bc23b 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -48,7 +48,7 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx' Experience the payment lifecycle with our interactive demo and see how we compare to traditional processors. From 043267c94719742ee85108f3a5a662dd6cafc359 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Sat, 25 Oct 2025 22:25:22 -0400 Subject: [PATCH 15/16] Move payment-processing-demo to use-cases folder - Move payment-processing-demo.mdx to use-cases/ folder - Update docs.json navigation path - Update Welcome page card link - URL now: /use-cases/payment-processing-demo --- docs.json | 2 +- .../payment-processing-demo.mdx | 0 use-cases/welcome.mdx | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename payment-processing-demo.mdx => use-cases/payment-processing-demo.mdx (100%) diff --git a/docs.json b/docs.json index 1571715..b2015aa 100644 --- a/docs.json +++ b/docs.json @@ -43,7 +43,7 @@ "group": "🚀 Get Started", "pages": [ "use-cases/welcome", - "payment-processing-demo" + "use-cases/payment-processing-demo" ] }, { diff --git a/payment-processing-demo.mdx b/use-cases/payment-processing-demo.mdx similarity index 100% rename from payment-processing-demo.mdx rename to use-cases/payment-processing-demo.mdx diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index 59bc23b..9f87e17 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -48,7 +48,7 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx' Experience the payment lifecycle with our interactive demo and see how we compare to traditional processors. From f0bb1f3b86a51282c3a9a41b61e23cf44b624000 Mon Sep 17 00:00:00 2001 From: MantisClone Date: Sat, 25 Oct 2025 22:26:46 -0400 Subject: [PATCH 16/16] Update sidebar title to "Payment Demo" - Change sidebarTitle from "Demo" to "Payment Demo" - Provides clearer context in navigation - Specific enough while remaining concise --- use-cases/payment-processing-demo.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/use-cases/payment-processing-demo.mdx b/use-cases/payment-processing-demo.mdx index c12f35c..40607d2 100644 --- a/use-cases/payment-processing-demo.mdx +++ b/use-cases/payment-processing-demo.mdx @@ -1,7 +1,7 @@ --- title: "Payment Processing Demo" description: "Experience Request Network's payment processing: create requests, process payments, and see how we compare to traditional processors." -sidebarTitle: "Demo" +sidebarTitle: "Payment Demo" mode: "frame" ---