Project Name fiber-checkout — A React component library and hooks package that lets any web developer add Fiber Network payments to their app in minutes. Drop in a component, and your site can instantly accept payments in CKB, RUSD, or SEAL via Fiber — no raw JSON-RPC, no manual hex encoding, no Rust knowledge required.
Team Salman — Blockchain developer specializing in developer tooling, security and payment integrations. GitHub: salmansarwarr Discord: salmansarwarr32
Problem & Solution
The Problem
Fiber Network is live on mainnet. It supports instant, near-zero-fee payments in CKB, RUSD (Stable++), and SEAL. The Nervos team just published @nervosnetwork/fiber-js — a JavaScript wrapper over Fiber’s WASM — five days ago. The protocol works. The JavaScript bridge works.
But there is still no way for a web developer to add a “Pay with Fiber” button to their app.
To accept a Fiber payment today, a developer must:
-
Manually call the new_invoice JSON-RPC method with raw hex-encoded u128 amounts and Option UDT type scripts
-
Hand-render a payment request string into a QR code themselves
-
Poll get_payment on a timer, parse the response, and manage success/failure/expiry states manually
-
Do all of this with zero type safety, zero UI components, and zero examples
This is not a documentation problem. It is a missing tool. Fiber is fast, cheap, and live — but right now it is only accessible to developers who are already deep in the CKB stack.
The Solution
fiber-checkout — a React component library built on top of @nervosnetwork/fiber-js (v0.7.x) that handles the entire payment flow in a single component. Fiber supports CKB, RUSD, SEAL, and any RGB++ UDT token natively — a checkout component here is not a Lightning clone, it’s a payment tool that only exists because of CKB’s unique asset architecture.
import { FiberCheckout } from 'fiber-checkout';
<FiberCheckout
amount={5}
asset="RUSD"
nodeUrl="..."
// onSuccess and onExpired accept any callback
// e.g. fulfilling an order on payment or showing a retry button on expiry
onSuccess={handleSuccess}
onExpired={handleExpired}
/>
Under the hood, fiber-checkout handles:
-
Calling new_invoice with correctly encoded amounts and UDT type scripts
-
Rendering the payment request as a scannable QR code
-
Polling get_payment every 2 seconds until settled, expired, or failed
-
Displaying real-time status: Waiting, Processing, Paid, or Expired
-
Surfacing human-readable errors when the node is unreachable
For developers who want lower-level control without the UI, the library also exports two standalone hooks:
const { invoice, paymentHash, expiresAt } = useFiberInvoice({
amountCkb: 5,
asset: 'RUSD',
expirySeconds: 3600,
nodeUrl: '...'
});
const { status, feePaid } = useFiberPayment({
paymentHash,
nodeUrl: '...'
});
// status: pending, processing, success, failed, or expired
Technical Approach
-
@nervosnetwork/fiber-js v0.7.x — official Fiber JavaScript WASM wrapper (explicitly targeted; breaking change patches will be applied within the 4-week window if needed)
-
React 18+ with TypeScript strict mode
-
Zero styling dependencies — ships with minimal unstyled base components plus optional CSS classes, so it fits any design system
-
Deliberately narrow scope — we wrap only new_invoice and get_payment. Channel management and node administration are infrastructure concerns, not checkout concerns.
npm package structure:
fiber-checkout
FiberCheckout (React component, full UI flow)
useFiberInvoice (Hook, invoice generation only)
useFiberPayment (Hook, payment status polling only)
FiberError (Typed error class)
Ships as: CommonJS + ESM dual build, React 18+ peer dependency, MIT license, published to npm as fiber-checkout.
Deliverables
-
npm package — published, MIT licensed, works against Fiber testnet out of the box
-
GitHub repository — Full TypeScript source, JSDoc on every export, README with testnet quickstart (zero to first accepted payment in under 15 minutes)
-
Live testnet demo page — A hosted webpage accepting real Fiber testnet payments, with transactions visible on the Fiber testnet explorer
-
Companion guide — End-to-end walkthrough covering Fiber node setup through to first accepted payment in a Next.js app
-
Demo video — Screen recording: npm install, component rendered, real testnet payment received in under 10 minutes
-
Completion report — Public post on Nervos Talk with transparent fund usage breakdown and Fiber version compatibility notes
Funding Request — $1,200 USD equivalent in CKB
Week 1 — $250 | useFiberInvoice hook + testnet verification new_invoice with UDT type scripts requires careful handling — RUSD and SEAL have different script hashes that need testnet verification
Week 2 — $550 | useFiberPayment hook + FiberCheckout component Core of the project — all UI states, polling logic, error handling, and full TypeScript types
Week 3 — $250 | Cross-browser QA + mobile testing + live demo page Real testnet payments required for demo; mobile responsive layout; Safari WASM compatibility check
Week 4 — $150 | npm publish + companion guide + demo video + completion report Documentation is a first-class deliverable
Timeline
-
Week 1 — useFiberInvoice working on testnet with CKB + RUSD, repo public
-
Week 2 — FiberCheckout component + useFiberPayment hook complete
-
Week 3 — Cross-browser QA done, live testnet demo page deployed
-
Week 4 — npm published, guide posted on Nervos Talk, demo video live, completion report submitted
Estimated completion: 4 weeks from approval.
CKB Ecosystem Relevance
Nervos shut down Godwoken and Force Bridge to focus resources on Fiber Network. That is not a roadmap promise — it is a demonstrated strategic commitment. But a payment network with no checkout tooling is a payment network that only protocol developers can use.
fiber-checkout is the missing link between Fiber’s technical capabilities and the moment a developer adds a “Pay with Fiber” button to a real product. Every commerce app, tipping tool, subscription service, or peer-to-peer marketplace built on Fiber in the next 12 months will likely start with this component or the patterns it establishes.