diff --git a/README.md b/README.md
index ae5fe10..b1b9557 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ _Continue further down for the full Bitcoin Connect API._
 ### React
 
 ```jsx
-import {Button, init, launchModal, launchPaymentModal, closeModal, requestProvider, Connect, SendPayment} from '@getalby/bitcoin-connect-react';
+import {Button, PayButton, init, launchModal, launchPaymentModal, closeModal, requestProvider, Connect, SendPayment} from '@getalby/bitcoin-connect-react';
 
 // Initialize Bitcoin Connect
 init({
@@ -95,6 +95,14 @@ init({
   const {preimage} = await provider.sendPayment("lnbc...");
 }}/>
 
+// render a "Pay Now" button
+// invoice can be unset initially - using the onClick function is a good time to fetch the invoice
+// set the `payment` prop to override the payment status if a payment was made externally
+<PayButton invoice={invoice} onClick={() => {
+  invoice = fetchInvoice();
+  setInvoice(invoice)
+}} onPaid={(response) => alert("Paid! " + response.preimage)} payment={{preimage: 'my-preimage'}}/>
+
 // render the connect flow on its own without the modal
 <Connect/>
 
@@ -189,14 +197,23 @@ _Use another popular framework? please let us know or feel free to create a PR f
 Bitcoin Connect exposes the following web components for allowing users to connect their desired Lightning wallet:
 
 - `<bc-button/>` - launches the Bitcoin Connect Modal on click
+  - Arguments:
+    - `title` - (optional) change the title of the button
+- `<bc-pay-button/>` - launches the Bitcoin Connect Payment Modal on click
+  - Arguments:
+    - `invoice` - BOLT11 invoice. Modal will only open if an invoice is set
+    - `title` - (optional) change the title of the button
+    - `preimage` - (optional) set this if you received an external payment
+  - Events:
+    - `click` - fires when the button is clicked. You can load an invoice here and set it on the button using `setAttribute('invoice', 'lnbc...')` which will then automatically launch the modal
+    - `bc:onpaid` - fires event with WebLN payment response in `event.detail` (contains `preimage`)
 - `<bc-connect/>` - render connect wallet UI without modal
 - `<bc-payment/>` - render a payment request UI without modal
   - Arguments:
     - `invoice` - BOLT11 invoice
-    - `paid` - set to true to mark payment was made externally
+    - `paid` - **Experimental** set to true to mark payment was made externally (This will change to `preimage` in v4)
   - Events:
-    - `bc:onpaid` **Experimental** - fires event with WebLN payment response in `event.detail` (contains `preimage`)
-- _more components coming soon_
+    - `bc:onpaid` - fires event with WebLN payment response in `event.detail` (contains `preimage`)
 
 ### Bitcoin Connect API
 
@@ -567,6 +584,7 @@ This project is powered by Lit.
 See [Get started](https://lit.dev/docs/getting-started/) on the Lit site for more information.
 
 ## BOLT FUN
+
 Bitcoin Connect is a BOLT FUN Legends of Lightning vol.2 finalist. [Follow our project and journey](https://bolt.fun/project/bitcoin-connect).
 
 ## License
diff --git a/demos/react/package.json b/demos/react/package.json
index 304dd17..4897e9a 100644
--- a/demos/react/package.json
+++ b/demos/react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect-react": "^3.0.0",
+    "@getalby/bitcoin-connect-react": "^3.1.0-beta.4",
     "@getalby/lightning-tools": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx
index 1b03454..1bdf1cf 100644
--- a/demos/react/src/App.tsx
+++ b/demos/react/src/App.tsx
@@ -8,6 +8,7 @@ import {
   Connect,
   Payment,
   launchModal,
+  PayButton,
 } from '@getalby/bitcoin-connect-react';
 import toast, {Toaster} from 'react-hot-toast';
 import {SendPaymentResponse} from '@webbtc/webln-types';
@@ -93,12 +94,19 @@ function App() {
       <Button
         onConnected={(provider) => {
           console.log('WebLN connected', provider);
-          toast('Connected!');
+          toast('<Button/>: Connected!');
         }}
-        onConnecting={() => toast('Connecting!')}
-        onDisconnected={() => toast('Disconnected!')}
-        onModalOpened={() => toast('Modal opened!')}
-        onModalClosed={() => toast('Modal closed!')}
+        onConnecting={() => toast('<Button/>: Connecting!')}
+        onDisconnected={() => toast('<Button/>: Disconnected!')}
+        onModalOpened={() => toast('<Button/>: Modal opened!')}
+        onModalClosed={() => toast('<Button/>: Modal closed!')}
+      />
+      <br />
+      <PayButton
+        invoice={invoice?.paymentRequest}
+        onPaid={(response) => toast('<PayButton/>: Paid! ' + response.preimage)}
+        onClick={() => toast('<PayButton/>: Clicked!')}
+        payment={paymentResponse}
       />
       <div style={{marginTop: '16px'}}>
         {preimage ? (
@@ -127,7 +135,11 @@ function App() {
           }
           const {setPaid} = launchPaymentModal({
             invoice: invoice.paymentRequest,
-            onPaid: (result) => setPreimage(result.preimage),
+            onPaid: (response) => {
+              toast('launchPaymentModal(): onPaid ' + response.preimage);
+              setPreimage(response.preimage);
+            },
+            onCancelled: () => toast(`launchPaymentModal(): cancelled`),
           });
           setPaymentModalSetPaidFunction(() => setPaid);
         }}
@@ -144,7 +156,7 @@ function App() {
           <Payment
             invoice={invoice.paymentRequest}
             onPaid={(response) =>
-              toast('Paid! preimage: ' + response.preimage, {
+              toast('<Payment/>: Paid! ' + response.preimage, {
                 style: {
                   wordBreak: 'break-all',
                 },
diff --git a/demos/react/yarn.lock b/demos/react/yarn.lock
index 658fedc..3626359 100644
--- a/demos/react/yarn.lock
+++ b/demos/react/yarn.lock
@@ -149,17 +149,17 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
-"@getalby/bitcoin-connect-react@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect-react/-/bitcoin-connect-react-3.0.0.tgz#c768ec291d92dccec3c244609d51bf4b29bf3ade"
-  integrity sha512-ngYKLpR8sh8YjbaHFBYdkZsmLIFpFLuAm9vtDkR/DRPbcTYEBNeWawRnGzt28+85gkofOI3VFxiuIsp5hnq8qg==
+"@getalby/bitcoin-connect-react@^3.1.0-beta.4":
+  version "3.1.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect-react/-/bitcoin-connect-react-3.1.0-beta.4.tgz#5b18c066483ace5a67d289adbc2de617877452b5"
+  integrity sha512-FzAHXkrOGbr3VgfAHuISVuf4s2AtS7yHoR6/5yg8PecenJqjDVNSF8thRRIIIobs2g9N8a+STIEWu+aRH/ENng==
   dependencies:
-    "@getalby/bitcoin-connect" "^3.0.0"
+    "@getalby/bitcoin-connect" "^3.1.0-beta.3"
 
-"@getalby/bitcoin-connect@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.0.0.tgz#d8c77fdd03ec691291d1e84f43ae744d7a48bf3f"
-  integrity sha512-s6D/pkjS2ojmfVYDiZehsbGjmvtwVuBZvivx8izWPhpsTwSR/J7zmxX5E4epZjijXxFEAuXU4baUBzY7NjF3Hg==
+"@getalby/bitcoin-connect@^3.1.0-beta.3":
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.1.0-beta.3.tgz#9b5448eb59b898523c94b4656c60db041a912236"
+  integrity sha512-dOl0vKC8L4whUiSrLja8LvC4NnO0+V/jmFvhf9FR7x3593wDSg5hG62H7awfA6uOf7vx0JPHvc/GRMeRm76Drg==
   dependencies:
     "@getalby/lightning-tools" "^5.0.0"
     "@getalby/sdk" "^3.0.0"
diff --git a/dev/vite/index.html b/dev/vite/index.html
index 3cb4790..5d1c42e 100644
--- a/dev/vite/index.html
+++ b/dev/vite/index.html
@@ -33,6 +33,14 @@
         document
           .getElementById('send-payment')
           .setAttribute('invoice', invoice.paymentRequest);
+        document.getElementById('pay-button').addEventListener('click', () => {
+          setTimeout(() => {
+            // fake a delay fetching an invoice
+            document
+              .getElementById('pay-button')
+              .setAttribute('invoice', invoice.paymentRequest);
+          }, 1000);
+        });
         document
           .getElementById('payment-flow')
           .setAttribute('invoice', invoice.paymentRequest);
@@ -200,6 +208,8 @@ <h2>Payment Flow</h2>
       <h1>Components</h1>
       <h2>Button</h2>
       <bc-button></bc-button>
+      <h2>Pay Button</h2>
+      <bc-pay-button id="pay-button"></bc-pay-button>
 
       <h2>Modal header</h2>
       <bc-modal-header show-help>Example Title</bc-modal-header>
diff --git a/package.json b/package.json
index 31a2eca..b443da3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.3",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",
diff --git a/react/package.json b/react/package.json
index 187cf13..d04bf31 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect-react",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.4",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -21,7 +21,7 @@
     "build": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect": "^3.0.0"
+    "@getalby/bitcoin-connect": "^3.1.0-beta.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.21",
diff --git a/react/src/components/PayButton.tsx b/react/src/components/PayButton.tsx
new file mode 100644
index 0000000..28ef0ef
--- /dev/null
+++ b/react/src/components/PayButton.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import '@getalby/bitcoin-connect';
+import {ComponentProps} from '../types/ComponentProps';
+import {useCoreEvents} from '../hooks/useCoreEvents';
+import {SendPaymentResponse} from '@webbtc/webln-types';
+import {useOnPaid} from '../hooks/useOnPaid';
+
+type PayButtonProps = ComponentProps & {
+  /**
+   * Bolt 11 invoice to pay
+   */
+  invoice?: string;
+  /**
+   * @param response response of the WebLN send payment call
+   */
+  onPaid?: (response: SendPaymentResponse) => void;
+  /**
+   * Mark that an external payment was made
+   */
+  payment?: SendPaymentResponse;
+
+  /**
+   * Listen to when the pay button is clicked.
+   * This is a good time to fetch an invoice to pay.
+   */
+  onClick?: () => void;
+};
+
+export const PayButton: React.FC<PayButtonProps> = (props) => {
+  useCoreEvents(props);
+
+  const {onPaid, payment} = props;
+  useOnPaid(onPaid, payment);
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <bc-pay-button
+      invoice={props.invoice}
+      preimage={payment?.preimage}
+      onClick={props.onClick}
+    />
+  );
+};
diff --git a/react/src/components/Payment.tsx b/react/src/components/Payment.tsx
index 85f8028..1126f3f 100644
--- a/react/src/components/Payment.tsx
+++ b/react/src/components/Payment.tsx
@@ -3,8 +3,12 @@ import '@getalby/bitcoin-connect';
 import {ComponentProps} from '../types/ComponentProps';
 import {useCoreEvents} from '../hooks/useCoreEvents';
 import {SendPaymentResponse} from '@webbtc/webln-types';
+import {useOnPaid} from '../hooks/useOnPaid';
 
 type PaymentProps = ComponentProps & {
+  /**
+   * Bolt 11 invoice to pay
+   */
   invoice: string;
   /**
    * @param response response of the WebLN send payment call
@@ -20,24 +24,7 @@ export const Payment: React.FC<PaymentProps> = (props) => {
   useCoreEvents(props);
 
   const {onPaid, payment} = props;
-  React.useEffect(() => {
-    const onPaidEventHandler = (event: Event) => {
-      onPaid?.((event as CustomEvent).detail);
-    };
-    window.addEventListener('bc:onpaid', onPaidEventHandler);
-
-    if (payment) {
-      window.dispatchEvent(
-        new CustomEvent('bc:onpaid', {
-          detail: payment,
-        })
-      );
-    }
-
-    return () => {
-      window.removeEventListener('bc:onpaid', onPaidEventHandler);
-    };
-  }, [onPaid, payment]);
+  useOnPaid(onPaid, payment);
 
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/react/src/hooks/useOnPaid.ts b/react/src/hooks/useOnPaid.ts
new file mode 100644
index 0000000..596e328
--- /dev/null
+++ b/react/src/hooks/useOnPaid.ts
@@ -0,0 +1,27 @@
+import {SendPaymentResponse} from '@webbtc/webln-types';
+import React from 'react';
+
+export function useOnPaid(
+  onPaid?: (response: SendPaymentResponse) => void,
+  payment?: SendPaymentResponse
+) {
+  React.useEffect(() => {
+    const onPaidEventHandler = (event: Event) => {
+      onPaid?.((event as CustomEvent).detail);
+    };
+    window.addEventListener('bc:onpaid', onPaidEventHandler);
+
+    if (payment) {
+      // TODO: remove once bc-send-payment accepts preimage
+      window.dispatchEvent(
+        new CustomEvent('bc:onpaid', {
+          detail: payment,
+        })
+      );
+    }
+
+    return () => {
+      window.removeEventListener('bc:onpaid', onPaidEventHandler);
+    };
+  }, [onPaid, payment]);
+}
diff --git a/react/src/index.ts b/react/src/index.ts
index 815f856..2ed17e7 100644
--- a/react/src/index.ts
+++ b/react/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components/Button';
+export * from './components/PayButton';
 export * from './components/Connect';
 export * from './components/Payment';
 export {
diff --git a/react/yarn.lock b/react/yarn.lock
index c236089..18066f5 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -1018,10 +1018,10 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@getalby/bitcoin-connect@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.0.0.tgz#d8c77fdd03ec691291d1e84f43ae744d7a48bf3f"
-  integrity sha512-s6D/pkjS2ojmfVYDiZehsbGjmvtwVuBZvivx8izWPhpsTwSR/J7zmxX5E4epZjijXxFEAuXU4baUBzY7NjF3Hg==
+"@getalby/bitcoin-connect@^3.1.0-beta.3":
+  version "3.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.1.0-beta.3.tgz#9b5448eb59b898523c94b4656c60db041a912236"
+  integrity sha512-dOl0vKC8L4whUiSrLja8LvC4NnO0+V/jmFvhf9FR7x3593wDSg5hG62H7awfA6uOf7vx0JPHvc/GRMeRm76Drg==
   dependencies:
     "@getalby/lightning-tools" "^5.0.0"
     "@getalby/sdk" "^3.0.0"
diff --git a/src/api.ts b/src/api.ts
index 841dbe0..53b5ccb 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -241,7 +241,7 @@ export function launchPaymentModal({
     setPaid: (sendPaymentResponse: SendPaymentResponse) => {
       // The app needs to add an event listener manually (or use the React wrapper).
       // Inconsistency: bc:onpaid is fired by different components (bc-send-payment, bc-payment, React wrapper)
-      // TODO: find a better way than firing bc:onpaid (also for React wrapper)
+      // TODO: remove once bc-send-payment accepts preimage
       sendPaymentFlowElement.setAttribute('paid', 'paid');
       sendPaymentFlowElement.dispatchEvent(
         new CustomEvent('bc:onpaid', {
diff --git a/src/components/bc-pay-button.ts b/src/components/bc-pay-button.ts
new file mode 100644
index 0000000..fac7dfa
--- /dev/null
+++ b/src/components/bc-pay-button.ts
@@ -0,0 +1,105 @@
+import {PropertyValues, html} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {BitcoinConnectElement} from './BitcoinConnectElement.js';
+import {bcIcon} from './icons/bcIcon.js';
+import {withTwind} from './twind/withTwind.js';
+import {loadingIcon} from './icons/loadingIcon.js';
+import {launchPaymentModal} from '../api.js';
+import './bc-balance.js';
+import {SendPaymentResponse} from '@webbtc/webln-types';
+import {checkIcon} from './icons/checkIcon.js';
+
+/**
+ * A button that when clicked launches a modal to pay an invoice.
+ */
+@customElement('bc-pay-button')
+export class PayButton extends withTwind()(BitcoinConnectElement) {
+  @property()
+  override title = 'Pay Now';
+
+  @property()
+  invoice?: string;
+
+  @property({})
+  preimage?: string;
+
+  /**
+   * This will be set to true if the button was clicked
+   * when no invoice is set on the button. The loading
+   * state will show until an invoice is set.
+   */
+  @state()
+  _waitingForInvoice = false;
+
+  @state()
+  _paid = false;
+
+  private _setPaid?: (response: SendPaymentResponse) => void;
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has('invoice') &&
+      this.invoice &&
+      this._waitingForInvoice
+    ) {
+      this._launchModal();
+    }
+
+    if (changedProperties.has('preimage') && this.preimage) {
+      this._setPaid?.({
+        preimage: this.preimage,
+      });
+    }
+  }
+
+  override render() {
+    const isLoading = this._waitingForInvoice || this._modalOpen;
+
+    return html` <div class="inline-flex" @click=${this._onClick}>
+      <bci-button variant="primary">
+        ${isLoading
+          ? html`<span class="ml-1 mr-1">${loadingIcon}</span>`
+          : this._paid
+          ? html`<span class="-ml-0.5">${checkIcon}</span>`
+          : html`<span class="-ml-0.5">${bcIcon}</span>`}
+        <span class="font-semibold">
+          ${isLoading
+            ? html`Loading...`
+            : html`${this._paid ? 'Paid' : this.title}`}
+        </span>
+      </bci-button>
+    </div>`;
+  }
+
+  private _onClick() {
+    if (this._paid) {
+      return;
+    }
+    this._waitingForInvoice = true;
+    if (this.invoice) {
+      this._launchModal();
+    }
+  }
+
+  private _launchModal() {
+    this._waitingForInvoice = false;
+    if (!this.invoice) {
+      throw new Error('No invoice available');
+    }
+    const {setPaid} = launchPaymentModal({
+      onPaid: () => {
+        this._paid = true;
+      },
+      invoice: this.invoice,
+    });
+    this._setPaid = setPaid;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bc-pay-button': PayButton;
+  }
+}
diff --git a/src/components/flows/bc-payment.ts b/src/components/flows/bc-payment.ts
index 8f590de..152f7df 100644
--- a/src/components/flows/bc-payment.ts
+++ b/src/components/flows/bc-payment.ts
@@ -33,6 +33,8 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
   })
   invoice?: string;
 
+  // TODO: change to preimage and then bc:onpaid event only needs to be fired
+  // only from bc-send-payment
   @property({
     type: Boolean,
   })
diff --git a/src/components/icons/checkIcon.ts b/src/components/icons/checkIcon.ts
new file mode 100644
index 0000000..e880023
--- /dev/null
+++ b/src/components/icons/checkIcon.ts
@@ -0,0 +1,7 @@
+import {svg} from 'lit';
+
+export const checkIcon = svg`
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6">
+<path d="M7 16.5106L13.5511 22L23 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
diff --git a/src/index.ts b/src/index.ts
index 93dc20c..c83febc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import {LnbitsWebLNProvider} from './connectors/LnbitsConnector';
 import './state/boot';
 
 export * from './components/bc-button';
+export * from './components/bc-pay-button';
 export * from './components/bc-modal';
 export * from './components/bc-connector-list';
 export * from './components/pages/bc-send-payment';