docs(content): add use-case pages, Dashboard + Secure Payment tools pages#90
docs(content): add use-case pages, Dashboard + Secure Payment tools pages#90rodrigopavezi wants to merge 1 commit intodocs/revamp-refresh-contentfrom
Conversation
…ages Build out the new Use Cases tab and Tools section around the actual product surface (Dashboard, Secure Payment, v2 API). New use-case pages: - quickstart.mdx — canonical end-to-end walkthrough adapted from the payment-destinations-and-payment-links reference; spine of the tab - no-code-payment-links.mdx — Dashboard-only flow for freelancers/SMBs - programmatic-payment-links.mdx — server-side flow with TS/Python/cURL side-by-side EVM and Tron examples - multi-chain-checkout.mdx — Li.Fi cross-chain payer story - batch-payouts.mdx — EVM-only mass payouts with worked examples (marketplace, refund, payroll) and explicit Tron exclusion - webhook-reconciliation.mdx — production-ready handler with HMAC verification, idempotency, retry-aware error handling, and event routing for all 12 event types - welcome.mdx rewritten as a three-card hero (Dashboard / Secure Payment / API) with refreshed Get Started cards New tools/ pages: - tools/dashboard.mdx — feature reference for dashboard.request.network with EVM and Tron sign-in tabs side by side, destinations, Client IDs, Get Paid, Pay - tools/secure-payments.mdx — feature reference for pay.request.network with payer flow, wallet support (EVM + Tron columns), Li.Fi cross-chain, defense-in-depth, error states docs.json: - Added "Use Cases" group with 5 new pages - Added "Tools" group in Resources tab - Added tools/dashboard to API Setup group
Greptile SummaryThis PR adds a full Use Cases tab (quickstart, no-code links, programmatic links, multi-chain checkout, batch payouts, webhook reconciliation) and two new Tools reference pages (Dashboard, Secure Payment), wiring them together with consistent cross-links and a refreshed landing page.
Confidence Score: 4/5Safe to merge after confirming whether the duplicate All new pages are well-structured and internally consistent. The duplicate
Important Files Changed
Sequence DiagramsequenceDiagram
participant U as User / Developer
participant D as Dashboard
participant A as Auth API
participant R as Request API
participant SP as Secure Payment
participant W as Webhook Handler
U->>D: Step 1 — Sign in with EVM/Tron wallet
D-->>U: session_token cookie (15 min idle TTL)
U->>D: Step 2 — Create payment destination
D-->>U: destinationId (ERC-7828 format)
U->>D: Step 3 — Generate Client ID
D->>A: POST /v1/client-ids
A-->>U: clientId
U->>A: Step 4 — POST /v1/webhook (x-client-id)
A-->>U: webhookId + secret (shown once)
U->>R: Step 5 — POST /v2/secure-payments
R-->>U: securePaymentUrl + requestIds
U->>SP: Share securePaymentUrl with payer
SP->>SP: Payer connects wallet, picks chain/token
SP->>SP: Li.Fi cross-chain swap (if needed)
SP-->>W: payment.confirmed webhook (HMAC-SHA256)
W-->>SP: 200 OK (idempotent, deduped on delivery ID)
Reviews (1): Last reviewed commit: "docs(content): add use-case pages, Dashb..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| "pages": [ | ||
| "api-setup/getting-started", | ||
| "api-setup/integration-tutorial", | ||
| "tools/dashboard", |
There was a problem hiding this comment.
tools/dashboard
tools/dashboard appears twice in docs.json: once inside the "API Setup" group and again in the new "🛠️ Tools" group. If this is intentional cross-listing, it will render as two separate sidebar links pointing to the same page, which can confuse readers and signal a navigation design inconsistency. If cross-listing is desired, consider using a relative link/alias rather than duplicating the page path — or confirm this duplication is intended and add a comment.
| <Tabs> | ||
| <Tab title="TypeScript / Node.js"> | ||
| ```typescript | ||
| const response = await fetch("https://api.request.network/v2/secure-payments", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-client-id": process.env.RN_CLIENT_ID!, | ||
| }, | ||
| body: JSON.stringify({ | ||
| requests: [ | ||
| { | ||
| destinationId: | ||
| "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7@eip155:8453#ABCD1234:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", | ||
| amount: "100", | ||
| }, | ||
| ], | ||
| reference: order.id, | ||
| payerIdentifier: customer.email, | ||
| }), | ||
| }); | ||
|
|
||
| const { securePaymentUrl, requestIds, token } = await response.json(); | ||
| // Send securePaymentUrl to the customer (redirect, email, etc.) | ||
| ``` | ||
| </Tab> | ||
| <Tab title="Python"> | ||
| ```python | ||
| import os | ||
| import requests | ||
|
|
||
| response = requests.post( | ||
| "https://api.request.network/v2/secure-payments", | ||
| headers={ | ||
| "Content-Type": "application/json", | ||
| "x-client-id": os.environ["RN_CLIENT_ID"], | ||
| }, | ||
| json={ | ||
| "requests": [ | ||
| { | ||
| "destinationId": ( | ||
| "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7" | ||
| "@eip155:8453#ABCD1234:" | ||
| "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" | ||
| ), | ||
| "amount": "100", | ||
| } | ||
| ], | ||
| "reference": order.id, | ||
| "payerIdentifier": customer.email, | ||
| }, | ||
| ) | ||
|
|
||
| data = response.json() | ||
| secure_payment_url = data["securePaymentUrl"] | ||
| ``` | ||
| </Tab> | ||
| <Tab title="cURL"> | ||
| ```bash | ||
| curl -X POST "https://api.request.network/v2/secure-payments" \ | ||
| -H "Content-Type: application/json" \ | ||
| -H "x-client-id: $RN_CLIENT_ID" \ | ||
| -d '{ | ||
| "requests": [ | ||
| { | ||
| "destinationId": "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7@eip155:8453#ABCD1234:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", | ||
| "amount": "100" | ||
| } | ||
| ], | ||
| "reference": "ORDER-2026-042", | ||
| "payerIdentifier": "alice@example.com" | ||
| }' | ||
| ``` | ||
| </Tab> | ||
| </Tabs> |
There was a problem hiding this comment.
<CodeGroup> for multi-language code examples — the AGENTS.md style guide states to use <CodeGroup> when showing the same concept in multiple programming languages, and <Tabs> for platform-specific alternative approaches. TypeScript/Python/cURL for the same POST /v2/secure-payments call is a multi-language example and should use <CodeGroup>.
| <Tabs> | |
| <Tab title="TypeScript / Node.js"> | |
| ```typescript | |
| const response = await fetch("https://api.request.network/v2/secure-payments", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": process.env.RN_CLIENT_ID!, | |
| }, | |
| body: JSON.stringify({ | |
| requests: [ | |
| { | |
| destinationId: | |
| "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7@eip155:8453#ABCD1234:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", | |
| amount: "100", | |
| }, | |
| ], | |
| reference: order.id, | |
| payerIdentifier: customer.email, | |
| }), | |
| }); | |
| const { securePaymentUrl, requestIds, token } = await response.json(); | |
| // Send securePaymentUrl to the customer (redirect, email, etc.) | |
| ``` | |
| </Tab> | |
| <Tab title="Python"> | |
| ```python | |
| import os | |
| import requests | |
| response = requests.post( | |
| "https://api.request.network/v2/secure-payments", | |
| headers={ | |
| "Content-Type": "application/json", | |
| "x-client-id": os.environ["RN_CLIENT_ID"], | |
| }, | |
| json={ | |
| "requests": [ | |
| { | |
| "destinationId": ( | |
| "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7" | |
| "@eip155:8453#ABCD1234:" | |
| "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" | |
| ), | |
| "amount": "100", | |
| } | |
| ], | |
| "reference": order.id, | |
| "payerIdentifier": customer.email, | |
| }, | |
| ) | |
| data = response.json() | |
| secure_payment_url = data["securePaymentUrl"] | |
| ``` | |
| </Tab> | |
| <Tab title="cURL"> | |
| ```bash | |
| curl -X POST "https://api.request.network/v2/secure-payments" \ | |
| -H "Content-Type: application/json" \ | |
| -H "x-client-id: $RN_CLIENT_ID" \ | |
| -d '{ | |
| "requests": [ | |
| { | |
| "destinationId": "0x6923831ACf5c327260D7ac7C9DfF5b1c3cB3C7D7@eip155:8453#ABCD1234:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", | |
| "amount": "100" | |
| } | |
| ], | |
| "reference": "ORDER-2026-042", | |
| "payerIdentifier": "alice@example.com" | |
| }' | |
| ``` | |
| </Tab> | |
| </Tabs> | |
| <CodeGroup> |
Context Used: AGENTS.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| const ok = | ||
| signature.length === expected.length && | ||
| timingSafeEqual(Buffer.from(signature, "hex"), Buffer.from(expected, "hex")); |
There was a problem hiding this comment.
timingSafeEqual — signature.length === expected.length compares the raw hex string lengths, not the decoded buffer lengths. If signature contains non-hex characters, Buffer.from(signature, "hex") silently drops them and produces a shorter buffer, causing timingSafeEqual to throw a TypeError instead of returning false. The authoritative reference implementation in webhook-reconciliation.mdx correctly creates buffers first and compares their .length properties.
| const ok = | |
| signature.length === expected.length && | |
| timingSafeEqual(Buffer.from(signature, "hex"), Buffer.from(expected, "hex")); | |
| const sigBuf = Buffer.from(signature, "hex"); | |
| const expBuf = Buffer.from(expected, "hex"); | |
| const ok = | |
| sigBuf.length === expBuf.length && | |
| timingSafeEqual(sigBuf, expBuf); |
1 participant
Build out the new Use Cases tab and Tools section around the actual product
surface (Dashboard, Secure Payment, v2 API).
New use-case pages:
payment-destinations-and-payment-links reference; spine of the tab
side-by-side EVM and Tron examples
(marketplace, refund, payroll) and explicit Tron exclusion
verification, idempotency, retry-aware error handling, and event routing
for all 12 event types
API) with refreshed Get Started cards
New tools/ pages:
with EVM and Tron sign-in tabs side by side, destinations, Client IDs,
Get Paid, Pay
with payer flow, wallet support (EVM + Tron columns), Li.Fi cross-chain,
defense-in-depth, error states
docs.json: