Interactive tutorial · About 15 minutes

Open a Fiber Channel and Send a Payment

Fund your browser node, open a real Fiber Testnet channel, and send 1 CKB to a public peer. Testnet confirmations may take longer than the active tutorial time.

Need background on browser nodes? Review Connect to Fiber with a WASM Node.

Prepare node. Start and connect.

Fund address. Receive Testnet CKB.

Open channel. Commit the peer minimum on-chain.

Send payment. Send CKB to the peer.

NodeReady to start

PeerNode required

ChannelNot opened

PaymentNot sent

Prepare browser nodeStart locally and connect over WSS. This does not move funds.

Fund the address

—

Balance: — · auto-checks every 5s

Open a 499 CKB channelCKB

Send CKB to the peerCKB

Runtime events and results

NODEstateReady to start

PEERconnectionOffline

Channel and payment events will appear here.

Implementation walkthrough

Behind the scenes

Follow the data and SDK calls that prepare the node, fund and open the channel, then confirm the payment.

Architecture

Understand the channel payment flow

openChannel() locks a chosen amount of Testnet CKB on-chain. Once the channel is ready, pay() can make multiple off-chain payments without creating a new CKB transaction for every small amount.

Your browser nodeFiber WASM

→ Fiber channel →

Public Fiber peerReceives payment

Testnet state is real

Preparing the node starts it locally and connects it to the public peer. Opening the channel and sending payments are separate actions.

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

1 Prepare the node

Start the node and derive its funding address

start() starts the browser node and reveals the Testnet address that must be funded. It calls startFiber(), reads the node information, and uses scriptToAddress() to convert default_funding_lock_script into its Testnet address.

The demo combines startup and connectToRouter() into one preparation action. The downloaded source keeps the helpers separate, so an application can expose more control when needed.

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

2 Watch funding

Detect sufficient Testnet funding

queryCkbBalance() calls CKB RPC get_cells_capacity to measure the address's available capacity. watchCkbBalance() repeats the check every five seconds while the page is visible, allowing the interface to unlock channel creation once the address can cover the funding amount.

Use Testnet funds only

The public peer accepts CKB channels at or above 499 CKB. Keep extra Testnet CKB available for the transaction fee.

lib/balance.ts · lines 7–45

3 Format the amount

Convert CKB amounts without losing precision

ckbToHex() converts the entered CKB amount into the exact hexadecimal shannon value expected by Fiber RPC. It uses BigInt to avoid floating-point rounding across CKB's eight decimal places.

CKB amount499 CKB

Smallest unit49,900,000,000 shannons

Hexadecimal RPC value0xb9e0ab300

lib/amounts.ts · lines 1–18

4 Commit funds

Open the channel

openCkbChannel() begins channel negotiation with the connected public peer. It calls node.openChannel() with the peer pubkey, the exact funding amount, and public: true.

Its temporary channel ID confirms negotiation started; it does not mean the channel can carry a payment yet.

lib/channel.ts · lines 7–19

5 Observe confirmation

Wait for ChannelReady

watchChannelStates() keeps payment controls locked until the funding transaction and peer handshake complete. It polls listChannels() and reports each new state_name as the channel moves through the following states:

NegotiatingFunding → agree on channel parametersCollaboratingFundingTx → build the funding transactionAwaitingChannelReady → wait for confirmation and both peersChannelReady → allow payments

lib/channel.ts · lines 21–40

6 Pay and verify

Send and confirm the keysend payment

sendKeysend() sends a direct payment without first requesting an invoice. Fiber calls this a keysend payment because it does not require the receiving peer to create an invoice. The function calls sendPayment() with the recipient pubkey, amount, and keysend: true.

If the response is still in flight, waitForPayment() waits for Success or Failed. The demo then shows the payment hash and the channel's local balance before and after.

lib/payment.ts · lines 4–26

7 React integration

Wire the complete flow into React

PayPage() turns SDK state into a guided interface. It keeps the node in a ref, renders funding and channel state from React state, and gates each state-changing button on the prerequisite it needs.

Production requirements

A production product should also encrypt keys, support backup and recovery, surface fees and timeouts, and use server-side verification when payments unlock orders or access.

app/pay/page.tsx · lines 16–65

Optional local setup

Run the complete project locally

Select Download project in the top-right corner, or download here. The archive contains the Next.js application, Fiber integration, required browser headers, and the interface shown here.

Terminal

npm install
npm run dev

Then open http://localhost:3000/pay in your browser.

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    // Start this browser's Fiber node.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