The Spark Program Presents;

Fiber-checkout — A “Stripe-Style” React Payment Library for Fiber Network.

Announcing the great news for the community!!

The Spark Program | Fiber-Checkout has completed.

Built by community developer Salman, Fiber-Checkout is a Stripe-style React payment library for the Fiber Network.

Drop-in <FiberCheckout /> component plus useFiberInvoice / useFiberPayment hooks, dual RPC / WASM backends, multi-asset support out of the box (CKB, RUSD, SEAL, any RGB++ UDT).

The Committee's take:

Fiber has the technical potential to reshape crypto payments and is shifting CKB from a storage-oriented chain toward payment infrastructure, though whether that potential converts ultimately depends on ecosystem density, application adoption, and network effects.

Hence, we look for more attempts like Fiber-Checkout from within our community.

Forum thread: https://talk.nervos.org/t/10045/26

GitHub: https://github.com/salmansarwarr/Fiber-checkout

npm: https://www.npmjs.com/package/fiber-checkout

Live demo: https://fiber-checkout.vercel.app/

Demo video: https://www.youtube.com/watch?v=bWKslRFl-98

The full Nervos Talk link (and proposal) here on Linkdn: (10 minute technical read)

https://shorturl.at/ayYbn

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 specialising in developer tooling, security and payment integrations. GitHub: salmansarwarr Discord: salmansarwarr32

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 u/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 u/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

• u/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.