• Add Lightning Payments to a React App with Bitcoin Connect
  • Install
  • Initialize
  • Connect Button
  • Pay Button
  • Send Payments
  • Next.js SSR Handling

§Add Lightning Payments to a React App with Bitcoin Connect

Bitcoin Connect is an open-source library from Alby that adds Lightning wallet connectivity to any web app. Users click a button, connect their wallet, and your app can send and receive Lightning payments.

§Install

npm install @getalby/bitcoin-connect-react

§Initialize

import { init } from '@getalby/bitcoin-connect-react';

init({
  appName: 'My Lightning App',
  showBalance: true,
  persistConnection: true,
});

§Connect Button

The Button component renders a connect/disconnect button. When clicked, it opens a modal where the user picks their wallet.

§Pay Button

The PayButton shows a payment modal for a specific invoice. Your code only needs to react to the onPaid callback.

§Send Payments

Once a user connects their wallet, you can send outgoing payments using requestProvider(). It will prompt the user to connect if they haven’t already.

§Next.js SSR Handling

Bitcoin Connect uses browser APIs that don’t work during server-side rendering. In Next.js, use dynamic imports with ssr: false.

Full tutorial with complete tip jar example: https://maximumsats.com/blog/bitcoin-connect-react-payments