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: — · Faucet CKB may take up to 30s to confirm on-chain.

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–56

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

Node already in use: close the other tutorial tab to stop its saved node session, then select Prepare browser node here. Peer handshake timed out: the node is running; check your network and select Prepare browser node again to retry the connection. If timeouts continue, the public peer may be unavailable.

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, displayed in the same uppercase format as the multi-hop tutorial, as the channel moves through the following states:

NEGOTIATING_FUNDING — The two peers agree on channel parameters and funding contributions.COLLABORATING_FUNDING_TX — The peers build the on-chain transaction that will fund the channel.SIGNING_COMMITMENT — The peers sign the initial commitment transactions that protect their channel balances.AWAITING_TX_SIGNATURES — The peers exchange funding-transaction signatures before the transaction can be broadcast.AWAITING_CHANNEL_READY — The funding transaction is awaiting confirmation and the peers are exchanging readiness messages. Payments are still disabled.CHANNEL_READY — The channel is ready. You can now send an off-chain payment.

This may take up to 1 min. The progress display lists all six stages, highlights the current state, and marks earlier stages complete. Some transitions happen between polls, so the event log may skip a state. Keep the node running while it progresses. If it stays in one state for more than a minute, refresh the live state, check the peer connection, and inspect the funding transaction in the explorer when available. A longer Testnet confirmation wait does not by itself mean the operation failed; avoid opening another channel while this one is pending.

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. Use the copy icons for the full channel ID, payment hash, or funding-transaction explorer link. A tooltip confirms successful copying. The funding link appears once the node reports the transaction outpoint.

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–74

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 { useEffect, 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, watchChannelStates } 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    // Opening only starts negotiation; wait for CHANNEL_READY.43  }44 45  useEffect(() => {46    if (!connected || !node.current) return;47    return watchChannelStates(node.current, (state) => {48      setChannelReady(state.replace(/_/g, '').toLowerCase() === 'channelready');49    });50  }, [connected]);51 52  async function pay() {53    if (!node.current || !channelReady) return;54    const result = await sendKeysend(node.current, routerPubkey, '1');55    setPaymentStatus(result.status);56  }57 58  return (59    <main>60      <button onClick={start}>Start node</button>61      <button disabled={!node.current} onClick={connect}>62        Connect peer63      </button>64      <code>{fundingAddress}</code>65      <button disabled={!connected} onClick={openChannel}>66        Open 499 CKB channel67      </button>68      <button disabled={!channelReady} onClick={pay}>69        Send 1 CKB70      </button>71      <p>{paymentStatus}</p>72    </main>73  );74}

app/pay/page.tsx tsx