WebLN 協議

WebLN API 方法：

// 檢測 WebLN 是否可用
if (typeof window.webln !== 'undefined') {
  // WebLN 提供者已安裝
}

// 啟用 WebLN（請求用戶授權）
await window.webln.enable();

// 獲取節點資訊
const info = await window.webln.getInfo();
console.log(info.node.pubkey);

// 發送支付
const response = await window.webln.sendPayment(bolt11Invoice);
console.log(response.preimage); // 支付證明

// 創建發票
const invoice = await window.webln.makeInvoice({
  amount: 1000,           // satoshis
  defaultMemo: 'Coffee'
});
console.log(invoice.paymentRequest); // BOLT11 發票

// 簽名訊息
const signature = await window.webln.signMessage('Hello');

// 驗證訊息
const verified = await window.webln.verifyMessage(
  signature.signature,
  'Hello'
);

完整的支付按鈕示例：

<button id="pay-button">Pay 1000 sats</button>

<script>
document.getElementById('pay-button').addEventListener('click', async () => {
  // 檢查 WebLN 是否可用
  if (typeof window.webln === 'undefined') {
    alert('請安裝 WebLN 擴展（如 Alby）');
    return;
  }

  try {
    // 啟用 WebLN
    await window.webln.enable();

    // 從後端獲取發票（或使用 LNURL）
    const response = await fetch('/api/create-invoice', {
      method: 'POST',
      body: JSON.stringify({ amount: 1000 })
    });
    const { invoice } = await response.json();

    // 請求用戶支付
    const payment = await window.webln.sendPayment(invoice);

    // 支付成功
    console.log('支付成功！Preimage:', payment.preimage);
    alert('謝謝你的支付！');

  } catch (error) {
    if (error.message === 'User rejected') {
      console.log('用戶取消了支付');
    } else {
      console.error('支付失敗:', error);
    }
  }
});
</script>

進階 WebLN 功能：

// Keysend（自發支付）
await window.webln.keysend({
  destination: 'node_pubkey...',
  amount: 1000,
  customRecords: {
    // TLV 自訂資料
    7629168: 'Hello!'  // Keysend 預留類型
  }
});

// LNURL 支援
await window.webln.lnurl('lnurl1...');

// 請求發票（讓用戶創建發票給你）
const invoice = await window.webln.makeInvoice({
  amount: 5000,
  defaultMemo: 'Refund'
});

// 使用 webln-js 庫簡化開發
import { requestProvider } from 'webln';

async function pay() {
  const webln = await requestProvider();
  await webln.sendPayment(invoice);
}

// 監聽 WebLN 事件
window.addEventListener('webln:enabled', () => {
  console.log('WebLN 已啟用');
});

WebLN + LNURL Workflow

LNURL-pay Example Flow:
1. Website shows LNURL QR code or button
2. User clicks, WebLN handles LNURL
3. WebLN requests invoice from server
4. User confirms payment
5. WebLN sends payment

Code Example:
// Using LNURL
const lnurl = 'lnurl1dp68gurn8ghj7...';

try {
  await window.webln.enable();
  const result = await window.webln.lnurl(lnurl);
  console.log('LNURL result:', result);
} catch (error) {
  console.error('LNURL failed:', error);
}

Lightning Address Support:
// Parse Lightning Address to LNURL
const address = '[email protected]';
const lnurlPayUrl = `https://${domain}/.well-known/lnurlp/${user}`;
// Then use webln.lnurl()

Applications Supporting WebLN

Content Platforms:
• Stacker News: Bitcoin discussion forum
• Fountain: Podcast app
• Nostr clients: Snort, Iris, etc.
• Y'alls: Paid articles platform

Games:
• Lightning Crush: Match-3 game
• Satoshi's Games: Various mini-games
• Lightning Spin: Roulette game

Tools:
• LN.Tips: Tipping tool
• Amboss: Node analytics
• LightningNetwork+: Node ranking
• 1ML: Network explorer

Merchants:
• Bitrefill: Gift cards
• Fold: Shopping cashback
• Other Lightning-integrated merchants

開發工具：

npm 套件：
npm install webln
npm install @webbtc/webln-types  # TypeScript 類型

React Hook：
npm install @alby/bitcoin-connect

import { BitcoinConnectProvider, useLnProvider } from '@alby/bitcoin-connect';

function PayButton() {
  const { provider, connect, isConnected } = useLnProvider();

  const pay = async () => {
    if (!isConnected) await connect();
    await provider.sendPayment(invoice);
  };

  return <button onClick={pay}>Pay</button>;
}

測試環境：
├── 使用 Polar 建立本地測試網路
├── Alby 擴展支援 regtest/testnet
└── 或使用 MockWebLN 進行單元測試