Build15 minute tutorial

Open a Fiber Channel and Send a Payment

Fund your browser node, open a real Testnet payment channel, and send CKB over Fiber—all from React and WASM.

ReactFiber WASMTestnet payment

Before you pay

A channel turns one on-chain setup into fast payments

Opening a channel commits Testnet CKB on-chain. Once the channel reaches ChannelReady, payments update the channel off-chain instead of creating a new CKB transaction each time.

Your browser nodeWASM + local keys

→ Channel →

Public Fiber nodeReceives keysend

This page uses real Testnet state

Starting and connecting do not move funds. Opening the channel and sending the payment happen only after you click their separate buttons.

1 Fund the browser identity

Send Testnet CKB to the generated address

Start the same browser identity used in the connection tutorial. The SDK derives its CKB funding address from default_funding_lock_script. Use the faucet, then refresh until the on-chain balance appears.

Keep the same localStorage identity and IndexedDB dataFund at least 499 CKB plus an on-chain transaction feeUse Testnet funds only

lib/balance.ts · lines 7–45

2 Convert the amount

Express CKB as hexadecimal shannons

Fiber RPC amounts use hexadecimal shannons. Parse the decimal string with BigInt so eight-decimal CKB values stay exact and do not pass through floating-point numbers.

499 CKB = 49,900,000,000 shannons0xb9e0ab300

lib/amounts.ts · lines 1–18

3 Open the channel

Commit funding to the public Testnet peer

Call openChannel() only after the browser node is running, the public peer is connected, and the funding address has enough CKB. The example makes the channel public so it can participate in routing.

Why 499 CKB?

The selected public Testnet node auto-accepts CKB channels at or above 499 CKB. Each side also reserves 99 CKB for channel contracts and shutdown.

lib/channel.ts · lines 7–19

4 Wait for ChannelReady

Do not enable payments when negotiation merely starts

openChannel() returns a temporary channel ID before the funding transaction is ready. Poll listChannels()and unlock the payment UI only when a channel state contains ready.

NegotiatingFunding: agree on channel parametersCollaboratingFundingTx: build the funding transactionSigningCommitment: exchange commitment signaturesAwaitingTxSignatures: finalize funding signaturesAwaitingChannelReady: wait for confirmation and both peersChannelReady: the channel can carry a payment

lib/channel.ts · lines 21–40

5 Send a payment

Use keysend for the smallest working example

Pass the recipient pubkey, an amount, and keysend: trueto sendPayment(). Keysend avoids invoice generation, which keeps this first payment flow entirely in the browser.

When do you need a backend?

Not for this direct keysend demo. A merchant app usually adds a backend to create invoices, match payments to orders, and grant access after server-side verification.

lib/payment.ts · lines 4–13

6 Confirm the result

Wait for a terminal payment status

A submitted payment can still be in flight. If the first response is not Success or Failed, callwaitForPayment() and update the React UI with its terminal status.

lib/payment.ts · lines 15–26

7.1 Wire the controls

Start, then connect

Starting restores local identity and channel data. Connecting is a separate user action, just like the first tutorial. The code panel highlights both handlers as one explicit preparation step.

app/pay/page.tsx · lines 23–37

7.2 Wire the controls

Open, then pay

The channel button requires a connected peer. The payment button remains disabled until a stored or new channel is ready, so every state-changing action stays separate and explicit.

app/pay/page.tsx · lines 39–49

Production checklist

Keep the browser node; harden everything around it

Before handling real funds, encrypt keys, add backup and recovery, validate channel liquidity, surface fees and timeouts, and decide whether invoices need server-side order verification.

Understand channel lifecycle ↗Read the payment model ↗Open the full Browser Node Lab ↗

Fiber Testnet

Run the Live Demo

Fund the browser identity, observe the channel lifecycle, and send a real Testnet payment.

Live Testnet flow

NodeStopped

PeerOffline

ChannelNot opened

PaymentNot sent

Prepare the browser nodeStart locally, then connect over WSS.

Fund the address

—

Balance: — · auto-checks every 5s

Faucet ↗

Open a channelCKB

Send keysendCKB

Channel and payment buttons submit real Testnet actions only when you click them.

Runtime events and results

NODEstateStopped

PEERconnectionOffline

1'use client';2 3import { useRef, useState } from 'react';4import {5  scriptToAddress,6  type FiberBrowserNode,7} from '@fiber-pay/sdk/browser';8import {9  connectToRouter,10  routerPubkey,11  startFiber,12} from '@/lib/fiber';13import { openCkbChannel } from '@/lib/channel';14import { sendKeysend } from '@/lib/payment';15 16export default function PayPage() {17  const node = useRef<FiberBrowserNode | null>(null);18  const [connected, setConnected] = useState(false);19  const [fundingAddress, setFundingAddress] = useState('');20  const [channelReady, setChannelReady] = useState(false);21  const [paymentStatus, setPaymentStatus] = useState('Not sent');22 23  async function start() {24    // Reuse startFiber() from the first tutorial.25    const fiber = await startFiber();26    node.current = fiber;27    const info = await fiber.getNodeInfo();28    setFundingAddress(29      scriptToAddress(info.default_funding_lock_script, 'testnet'),30    );31  }32 33  async function connect() {34    if (!node.current) return;35    await connectToRouter(node.current);36    setConnected(true);37  }38 39  async function openChannel() {40    if (!node.current || !connected) return;41    await openCkbChannel(node.current, routerPubkey, '499');42    setChannelReady(true);43  }44 45  async function pay() {46    if (!node.current || !channelReady) return;47    const result = await sendKeysend(node.current, routerPubkey, '1');48    setPaymentStatus(result.status);49  }50 51  return (52    <main>53      <button onClick={start}>Start node</button>54      <button disabled={!node.current} onClick={connect}>55        Connect peer56      </button>57      <code>{fundingAddress}</code>58      <button disabled={!connected} onClick={openChannel}>59        Open 499 CKB channel60      </button>61      <button disabled={!channelReady} onClick={pay}>62        Send 1 CKB63      </button>64      <p>{paymentStatus}</p>65    </main>66  );67}

app/pay/page.tsx tsx