diff --git a/docs.json b/docs.json index ec5a61f..b2015aa 100644 --- a/docs.json +++ b/docs.json @@ -42,12 +42,14 @@ { "group": "πŸš€ Get Started", "pages": [ - "use-cases/welcome" + "use-cases/welcome", + "use-cases/payment-processing-demo" ] }, { "group": "🎯 Use Cases", "pages": [ + "use-cases/payment-detection", "use-cases/invoicing", "use-cases/payouts", "use-cases/payroll", diff --git a/snippets/demo-container.jsx b/snippets/demo-container.jsx new file mode 100644 index 0000000..d5f685b --- /dev/null +++ b/snippets/demo-container.jsx @@ -0,0 +1,15 @@ +export const DemoContainer = ({ children }) => { + return ( +
+ {children} +
+ ); +}; diff --git a/snippets/payment-processor-qa.jsx b/snippets/payment-processor-qa.jsx new file mode 100644 index 0000000..3a4631c --- /dev/null +++ b/snippets/payment-processor-qa.jsx @@ -0,0 +1,297 @@ +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: +

+ +
+

+ βœ… 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: +

+
+ +
+

+ Traditional processors treat crypto as an afterthought: +

+ +
+ ), + }, + { + question: "πŸ›‘οΈ What about chargebacks?", + answer: ( +
+

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

+
+

+ βœ… Benefits of Finality: +

+ +
+

+ 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 ( + <> +
+
+ {faqs.map((faq, index) => ( +
+ +
+
+ {faq.answer} +
+
+
+ ))} +
+
+ + ); +}; diff --git a/snippets/request-lifecycle-demo.jsx b/snippets/request-lifecycle-demo.jsx new file mode 100644 index 0000000..110ad5a --- /dev/null +++ b/snippets/request-lifecycle-demo.jsx @@ -0,0 +1,663 @@ +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 ( +
+ {/* Progress indicator */} +
+
+ {[1, 2, 3, 4].map((step) => ( +
+
+
= 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 ? { + backgroundColor: '#01B089' + } : {}} + /> + )} +
+ ))} +
+
+ + {/* 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 */} +
+ + + +
+
+ )} +
+
+ ); +}; 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/payment-processing-demo.mdx b/use-cases/payment-processing-demo.mdx new file mode 100644 index 0000000..40607d2 --- /dev/null +++ b/use-cases/payment-processing-demo.mdx @@ -0,0 +1,83 @@ +--- +title: "Payment Processing Demo" +description: "Experience Request Network's payment processing: create requests, process payments, and see how we compare to traditional processors." +sidebarTitle: "Payment Demo" +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' + +
+
+

Payment Processing with Request Network

+

+ 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. +

+
+ +

+ Create and Pay a Request Demo +

+ +
+ + + +
+ +

+ Comparison with Traditional Processors +

+ +
+ + + +
+ +

Explore Use Cases

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

Start Building

+ +
+ + + Set up authentication and create your first request + + + + Manage API keys, view requests, and configure webhooks + + +
+
diff --git a/use-cases/welcome.mdx b/use-cases/welcome.mdx index 24c9f8c..9f87e17 100644 --- a/use-cases/welcome.mdx +++ b/use-cases/welcome.mdx @@ -46,12 +46,20 @@ import { ComparisonTable } from '/snippets/comparison-table.jsx'
+ + 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 The easiest way to integrate. Payment types, webhooks, and developer tools. - + +
+ +
+ Supported chains, currencies, smart contracts, and community resources - -
-
-