diff --git a/README.md b/README.md
index 125e471..36a6307 100644
--- a/README.md
+++ b/README.md
@@ -36,13 +36,13 @@ You can use Bitcoin Connect without any build tools:
 
 ```html
 <script type="module">
-  import {launchModal} from 'https://esm.sh/@getalby/bitcoin-connect@3.2.2'; // jsdelivr.net, skypack.dev also work
+  import {launchModal} from 'https://esm.sh/@getalby/bitcoin-connect@3.3.0'; // jsdelivr.net, skypack.dev also work
 
   // use Bitcoin connect API normally...
   launchModal();
 
   // or if you just want access to the web components:
-  import 'https://esm.sh/@getalby/bitcoin-connect@3.2.2';
+  import 'https://esm.sh/@getalby/bitcoin-connect@3.3.0';
 </script>
 
 <!-- Bitcoin Connect components are now available -->
@@ -204,6 +204,7 @@ Bitcoin Connect exposes the following web components for allowing users to conne
 - `<bc-pay-button/>` - launches the Bitcoin Connect Payment Modal on click
   - Arguments:
     - `invoice` - BOLT11 invoice. Modal will only open if an invoice is set
+    - `payment-methods` (optional) "all" | "external" | "internal"
     - `title` - (optional) change the title of the button
     - `preimage` - (optional) set this if you received an external payment
   - Events:
@@ -213,6 +214,7 @@ Bitcoin Connect exposes the following web components for allowing users to conne
 - `<bc-payment/>` - render a payment request UI without modal
   - Arguments:
     - `invoice` - BOLT11 invoice
+    - `payment-methods` (optional) "all" | "external" | "internal"
     - `paid` - **Experimental** set to true to mark payment was made externally (This will change to `preimage` in v4)
   - Events:
     - `bc:onpaid` - fires event with WebLN payment response in `event.detail` (contains `preimage`)
@@ -274,6 +276,7 @@ import {launchPaymentModal} from '@getalby/bitcoin-connect';
 
 const {setPaid} = launchPaymentModal({
   invoice: 'lnbc...',
+  //paymentMethods: "all" // "all" | "external" | "internal"
   onPaid: (response) => {
     clearInterval(checkPaymentInterval);
     alert('Received payment! ' + response.preimage);
diff --git a/demos/react/package.json b/demos/react/package.json
index 0113eed..ab7eecf 100644
--- a/demos/react/package.json
+++ b/demos/react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect-react": "^3.2.2",
+    "@getalby/bitcoin-connect-react": "^3.3.0-beta.3",
     "@getalby/lightning-tools": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/demos/react/yarn.lock b/demos/react/yarn.lock
index 85fb698..b1fd9ba 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.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect-react/-/bitcoin-connect-react-3.2.2.tgz#536c4c94437f2c2c105517510c324a10b629f882"
-  integrity sha512-JLJBJgYySr7LDIfycDum/pNdqKxKr81Rw+iidO6CW45N3XGyVLEHLMDZI1ZfwV1i/nsOiqL65BUICGXrBSBnHA==
+"@getalby/bitcoin-connect-react@^3.3.0-beta.3":
+  version "3.3.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect-react/-/bitcoin-connect-react-3.3.0-beta.3.tgz#480a0729bb826f6ec474cb202e1ef96ffb08cf94"
+  integrity sha512-MnYF3Xl0LlOyDBL/U+pZOLpUVO7wJnJeY2dXHOrqFJDgM+P3Bce29QbL0FWZiIxSRvnwZzMHAMHK/xs/D0nPwA==
   dependencies:
-    "@getalby/bitcoin-connect" "^3.2.2"
+    "@getalby/bitcoin-connect" "^3.3.0-beta.1"
 
-"@getalby/bitcoin-connect@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.2.2.tgz#961374b8a7b91dd6310e714c9c9cc8c87dbc438a"
-  integrity sha512-hqsnTVNojTmLDXhhkJvs1RDFKZIFEQDD4UWNlB/hIV3Bx4INxRZzeOi8SOG7idjGF3ix7I8hpG3zeeJCZWNByQ==
+"@getalby/bitcoin-connect@^3.3.0-beta.1":
+  version "3.3.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.3.0-beta.1.tgz#b3e217b7066840c654b20bf3b5e73604ea7f9515"
+  integrity sha512-fx8rFSV6de4oFlJRSVRnGK7BzwmNiwMfQTu2DB5Fkpcu9IJtmKSPvGw4Wh6+2vxgG/OPAxgS9tMPRk3izQynmg==
   dependencies:
     "@getalby/lightning-tools" "^5.0.1"
     "@getalby/sdk" "^3.2.3"
diff --git a/dev/vite/index.html b/dev/vite/index.html
index 2f81ed9..c022bcb 100644
--- a/dev/vite/index.html
+++ b/dev/vite/index.html
@@ -153,6 +153,11 @@ <h1>Settings</h1>
         id="invoice"
         onchange="localStorage.setItem('invoice', document.getElementById('invoice').value); window.location.reload()"
       />
+      <p>Payment methods (all, external, internal)</p>
+      <input
+        id="payment-methods"
+        onchange="localStorage.setItem('payment-methods', document.getElementById('payment-methods').value); window.location.reload()"
+      />
       <p>Show Balance</p>
       <input
         id="show-balance"
@@ -219,9 +224,14 @@ <h2>Router outlet</h2>
       <bc-router-outlet></bc-router-outlet>
 
       <h2>Request Payment Screen</h2>
+      <p>
+        Note: connect button will do nothing because requires higher component.
+        Use "Payment Flow" above instead.
+      </p>
       <bc-send-payment
         id="send-payment"
         invoice="lnbc10n1pj4g7ugpp5h0lld9qzh06ngn8ur756rva0ntfdfg34h298337rljjyztxy8rfqhp50kncf9zk35xg4lxewt4974ry6mudygsztsz8qn3ar8pn3mtpe50scqzzsxqyz5vqsp5lwlnu7xjs7hj7vltx7rhzsjf60l5mwckuw93qngjrz7sdhdkw7gs9qyyssqzy543rxhkdtncjrmuzlz4lrh2eauldawa9np5yysh7dhqhv8kaahydurha2cfelr7t6wt33xse7fdykupnjv36na6x6crrhy53lyg6cqf2jhjj"
+        payment-methods="all"
       ></bc-send-payment>
 
       <h2>Start screen</h2>
@@ -272,6 +282,9 @@ <h3>Try it yourself</h3>
       const invoice = localStorage.getItem('invoice');
       document.getElementById('invoice').value = invoice;
 
+      const paymentMethods = localStorage.getItem('payment-methods');
+      document.getElementById('payment-methods').value = paymentMethods;
+
       const showBalance =
         localStorage.getItem('show-balance') !== false.toString();
       document.getElementById('show-balance').checked = showBalance;
@@ -316,6 +329,7 @@ <h3>Try it yourself</h3>
           }
           launchPaymentModal({
             invoice: invoiceToPay,
+            paymentMethods,
             onPaid: (response) => {
               alert('Paid! ' + response.preimage);
             },
@@ -334,6 +348,7 @@ <h3>Try it yourself</h3>
 
           const {setPaid} = launchPaymentModal({
             invoice: invoice.paymentRequest,
+            paymentMethods,
             onPaid: (response) => {
               clearInterval(checkPaymentInterval);
               alert('Received payment! ' + response.preimage);
@@ -396,6 +411,18 @@ <h3>Try it yourself</h3>
         });
 
       document.addEventListener('bc:onpaid', (e) => console.log('PAID!', e));
+
+      if (paymentMethods) {
+        document
+          .getElementById('send-payment')
+          .setAttribute('payment-methods', paymentMethods);
+        document
+          .getElementById('payment-flow')
+          .setAttribute('payment-methods', paymentMethods);
+        document
+          .getElementById('pay-button')
+          .setAttribute('payment-methods', paymentMethods);
+      }
     </script>
     <script type="module">
       import * as bitcoinConnectSandbox from '../../src/index.ts';
diff --git a/package.json b/package.json
index bddeeae..94c0c8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",
@@ -47,7 +47,7 @@
     "url": "https://github.com/getAlby/bitcoin-connect.git"
   },
   "dependencies": {
-    "@getalby/lightning-tools": "^5.0.1",
+    "@getalby/lightning-tools": "^5.0.3",
     "@getalby/sdk": "^3.2.3",
     "@lightninglabs/lnc-web": "^0.3.1-alpha",
     "qrcode-generator": "^1.4.4",
diff --git a/react/package.json b/react/package.json
index 060113d..db02dc3 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect-react",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -23,10 +23,11 @@
   ],
   "scripts": {
     "dev": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react watch",
+    "prepack": "yarn build",
     "build": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect": "^3.2.2"
+    "@getalby/bitcoin-connect": "^3.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.21",
diff --git a/react/src/components/PayButton.tsx b/react/src/components/PayButton.tsx
index 28ef0ef..a6a7e35 100644
--- a/react/src/components/PayButton.tsx
+++ b/react/src/components/PayButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import '@getalby/bitcoin-connect';
+import {PaymentMethods} from '@getalby/bitcoin-connect';
 import {ComponentProps} from '../types/ComponentProps';
 import {useCoreEvents} from '../hooks/useCoreEvents';
 import {SendPaymentResponse} from '@webbtc/webln-types';
@@ -10,6 +11,10 @@ type PayButtonProps = ComponentProps & {
    * Bolt 11 invoice to pay
    */
   invoice?: string;
+  /**
+   * Supported payment methods in payment flow
+   */
+  paymentMethods?: PaymentMethods;
   /**
    * @param response response of the WebLN send payment call
    */
@@ -37,6 +42,9 @@ export const PayButton: React.FC<PayButtonProps> = (props) => {
     // @ts-ignore
     <bc-pay-button
       invoice={props.invoice}
+      {...(props.paymentMethods
+        ? {'payment-methods': props.paymentMethods}
+        : {})}
       preimage={payment?.preimage}
       onClick={props.onClick}
     />
diff --git a/react/src/components/Payment.tsx b/react/src/components/Payment.tsx
index 1126f3f..79e7a44 100644
--- a/react/src/components/Payment.tsx
+++ b/react/src/components/Payment.tsx
@@ -4,12 +4,17 @@ import {ComponentProps} from '../types/ComponentProps';
 import {useCoreEvents} from '../hooks/useCoreEvents';
 import {SendPaymentResponse} from '@webbtc/webln-types';
 import {useOnPaid} from '../hooks/useOnPaid';
+import {PaymentMethods} from '@getalby/bitcoin-connect';
 
 type PaymentProps = ComponentProps & {
   /**
    * Bolt 11 invoice to pay
    */
   invoice: string;
+  /**
+   * Supported payment methods in payment flow
+   */
+  paymentMethods?: PaymentMethods;
   /**
    * @param response response of the WebLN send payment call
    */
@@ -29,6 +34,12 @@ export const Payment: React.FC<PaymentProps> = (props) => {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    <bc-payment invoice={props.invoice} {...(payment ? {paid: true} : {})} />
+    <bc-payment
+      invoice={props.invoice}
+      {...(props.paymentMethods
+        ? {'payment-methods': props.paymentMethods}
+        : {})}
+      {...(payment ? {paid: true} : {})}
+    />
   );
 };
diff --git a/react/src/index.ts b/react/src/index.ts
index 621dc91..a935c14 100644
--- a/react/src/index.ts
+++ b/react/src/index.ts
@@ -17,4 +17,5 @@ export {
   onModalClosed,
   getConnectorConfig,
   WebLNProviders,
+  PaymentMethods,
 } from '@getalby/bitcoin-connect';
diff --git a/react/yarn.lock b/react/yarn.lock
index 5e77413..48ce92c 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -1018,21 +1018,21 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@getalby/bitcoin-connect@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.2.2.tgz#961374b8a7b91dd6310e714c9c9cc8c87dbc438a"
-  integrity sha512-hqsnTVNojTmLDXhhkJvs1RDFKZIFEQDD4UWNlB/hIV3Bx4INxRZzeOi8SOG7idjGF3ix7I8hpG3zeeJCZWNByQ==
+"@getalby/bitcoin-connect@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.3.0.tgz#7a53bf884729e8ff3e692e059d2b9c02ba75fa4b"
+  integrity sha512-3e4oGasmz6EdX+xwzS/bFv9nZmZcFSafSgrabpX9ejvBGS93sntZ8yFwLf0ynyvpxcUbeCq4Ww0Vt3TlQmwgug==
   dependencies:
-    "@getalby/lightning-tools" "^5.0.1"
+    "@getalby/lightning-tools" "^5.0.3"
     "@getalby/sdk" "^3.2.3"
     "@lightninglabs/lnc-web" "^0.3.1-alpha"
     qrcode-generator "^1.4.4"
     zustand "^4.4.7"
 
-"@getalby/lightning-tools@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.1.tgz#08a974bcdf3d98a86ff9909df838360ee67174c8"
-  integrity sha512-xoBfBYMQrJqwryU9fAYGIW6dzWRpdsAw8rroqTROba2bHdYT0ZvGnt4tjqXUhRswopR2X+wp1QeeWHZNL9A0Kg==
+"@getalby/lightning-tools@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.3.tgz#4cc6ef1253a30fb4913af89b842645e0c04994bf"
+  integrity sha512-QG3/SBI5n2py5IgsjP3K+c8eq55eiI3PQB12yo9Pot0b5hcN7TNNoTKn0fgLJjO1iEVCUkF513kDOpjjXwK0hQ==
 
 "@getalby/sdk@^3.2.3":
   version "3.2.3"
diff --git a/src/api.ts b/src/api.ts
index be5848e..7e8aa0a 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -2,6 +2,7 @@ import {SendPaymentResponse, WebLNProvider} from '@webbtc/webln-types';
 import store from './state/store';
 import {ConnectorFilter} from './types/ConnectorFilter';
 import {WebLNProviderConfig} from './types/WebLNProviderConfig';
+import {PaymentMethods} from './types/PaymentMethods';
 
 type BitcoinConnectConfig = {
   /**
@@ -29,6 +30,10 @@ type LaunchPaymentModalArgs = {
    * Launch a payment flow to pay a BOLT11 invoice
    */
   invoice: string;
+  /**
+   * Supported payment methods in payment flow
+   */
+  paymentMethods?: PaymentMethods;
   /**
    * Called when a payment is made (either with WebLN or externally)
    * @param response response of the WebLN send payment call
@@ -222,6 +227,7 @@ export function launchModal() {
 // TODO: add launchPaymentModal and update README and migration guide
 export function launchPaymentModal({
   invoice,
+  paymentMethods,
   onPaid,
   onCancelled,
 }: LaunchPaymentModalArgs) {
@@ -239,6 +245,9 @@ export function launchPaymentModal({
   const sendPaymentFlowElement = document.createElement('bc-payment');
   sendPaymentFlowElement.setAttribute('closable', 'closable');
   sendPaymentFlowElement.setAttribute('invoice', invoice);
+  if (paymentMethods) {
+    sendPaymentFlowElement.setAttribute('payment-methods', paymentMethods);
+  }
   modalElement.appendChild(sendPaymentFlowElement);
 
   let paid = false;
diff --git a/src/components/bc-pay-button.ts b/src/components/bc-pay-button.ts
index 60abdda..b6f4e49 100644
--- a/src/components/bc-pay-button.ts
+++ b/src/components/bc-pay-button.ts
@@ -8,6 +8,7 @@ import './bc-balance.js';
 import {SendPaymentResponse} from '@webbtc/webln-types';
 import {checkIcon} from './icons/checkIcon.js';
 import {waitingIcon} from './icons/waitingIcon.js';
+import {PaymentMethods} from '../types/PaymentMethods.js';
 
 /**
  * A button that when clicked launches a modal to pay an invoice.
@@ -20,6 +21,12 @@ export class PayButton extends withTwind()(BitcoinConnectElement) {
   @property()
   invoice?: string;
 
+  @property({
+    type: String,
+    attribute: 'payment-methods',
+  })
+  paymentMethods: PaymentMethods = 'all';
+
   @property({})
   preimage?: string;
 
@@ -93,6 +100,7 @@ export class PayButton extends withTwind()(BitcoinConnectElement) {
         this._paid = true;
       },
       invoice: this.invoice,
+      paymentMethods: this.paymentMethods,
     });
     this._setPaid = setPaid;
   }
diff --git a/src/components/flows/bc-payment.ts b/src/components/flows/bc-payment.ts
index 152f7df..4f72c63 100644
--- a/src/components/flows/bc-payment.ts
+++ b/src/components/flows/bc-payment.ts
@@ -8,6 +8,7 @@ import '../bc-modal-header';
 import '../bc-router-outlet';
 import {classes} from '../css/classes';
 import store from '../../state/store';
+import {PaymentMethods} from '../../types/PaymentMethods';
 
 @customElement('bc-payment')
 export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
@@ -33,6 +34,12 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
   })
   invoice?: string;
 
+  @property({
+    type: String,
+    attribute: 'payment-methods',
+  })
+  paymentMethods: PaymentMethods = 'all';
+
   // TODO: change to preimage and then bc:onpaid event only needs to be fired
   // only from bc-send-payment
   @property({
@@ -71,6 +78,7 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
           <div class="flex flex-col justify-center items-center w-full pt-8">
             <bc-send-payment
               .invoice=${this.invoice}
+              .paymentMethods=${this.paymentMethods}
               ?paid=${this.paid}
               @onclickconnectwallet=${this._onClickConnectWallet}
             ></bc-send-payment>
diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
index cf496b7..49cdb8e 100644
--- a/src/components/pages/bc-send-payment.ts
+++ b/src/components/pages/bc-send-payment.ts
@@ -19,6 +19,7 @@ import {copyIcon} from '../icons/copyIcon.js';
 import qrcode from 'qrcode-generator';
 import {walletIcon} from '../icons/walletIcon.js';
 import {qrIcon} from '../icons/qrIcon.js';
+import {PaymentMethods} from '../../types/PaymentMethods.js';
 
 @customElement('bc-send-payment')
 export class SendPayment extends withTwind()(BitcoinConnectElement) {
@@ -31,6 +32,9 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
   @state()
   _showQR = false;
 
+  @state()
+  _qr = null as QRCode | null;
+
   @property({
     type: String,
   })
@@ -41,6 +45,12 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
   })
   paid?: boolean;
 
+  @property({
+    type: String,
+    attribute: 'payment-methods',
+  })
+  paymentMethods: PaymentMethods = 'all';
+
   protected override updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
@@ -51,6 +61,169 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
     }
   }
 
+  private renderHeading(decodedInvoice: Invoice) {
+    return html`
+      <h2 class="text-2xl mb-6 ${classes['text-neutral-secondary']}">
+        <span
+          class="font-bold font-mono text-4xl align-bottom ${classes[
+            'text-brand-mixed'
+          ]}"
+          >${decodedInvoice.satoshi.toLocaleString(undefined, {
+            useGrouping: true,
+          })}</span
+        >&nbsp;sats
+      </h2>
+    `;
+  }
+
+  private renderPaidState() {
+    return html`
+      <div
+        class="flex flex-col justify-center items-center ${classes[
+          'text-brand-mixed'
+        ]}"
+      >
+        <p class="font-bold">Paid!</p>
+        ${successAnimation}
+      </div>
+    `;
+  }
+
+  private renderPayingState() {
+    return html`
+      <div class="flex flex-col justify-center items-center">
+        <p class="${classes['text-neutral-secondary']} mb-5">Paying...</p>
+        ${waitingIcon(`w-48 h-48 ${classes['text-brand-mixed']}`)}
+      </div>
+    `;
+  }
+
+  private renderPaymentConfirmation() {
+    return html`
+      <bci-button variant="primary" @click=${this._payInvoice}>
+        <span class="-ml-0.5">${bcIcon}</span>
+        Confirm Payment
+      </bci-button>
+      ${disconnectSection(this._connectorName)}
+    `;
+  }
+
+  private renderWaitingForPayment() {
+    return html`
+      <div class="flex justify-center items-center">
+        ${waitingIcon(`w-7 h-7 ${classes['text-brand-mixed']}`)}
+        <p class="${classes['text-neutral-secondary']}">Waiting for payment</p>
+      </div>
+    `;
+  }
+
+  private renderConnectWalletMobile() {
+    let internalMethods = null;
+    let externalMethods = null;
+    let qrSection = null;
+
+    if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
+      internalMethods = html`
+        <bci-button block @click=${this._onClickConnectWallet}>
+          <span class="-ml-0.5">${bcIcon}</span>Connect Wallet
+        </bci-button>
+      `;
+    }
+
+    if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
+      externalMethods = html`
+        <bci-button block @click=${this._copyAndDisplayInvoice}>
+          ${qrIcon} Copy & Display Invoice
+        </bci-button>
+      `;
+
+      if (this._showQR) {
+        qrSection = this.renderQR();
+      }
+    }
+
+    return html`
+      <div class="mt-8 w-full flex flex-col gap-4">
+        ${this.paymentMethods === 'all' || this.paymentMethods === 'external'
+          ? html`<a href="lightning:${this.invoice}">
+              <bci-button variant="primary" block>
+                ${walletIcon} Open in a Bitcoin Wallet
+              </bci-button>
+            </a>`
+          : null}
+        ${internalMethods} ${externalMethods}
+      </div>
+      ${qrSection}
+    `;
+  }
+
+  private renderConnectWalletDesktop() {
+    let internalMethods = null;
+    if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
+      internalMethods = html`
+        <div class="${this.paymentMethods !== 'internal' ? 'mt-8' : ''}">
+          <bci-button variant="primary" @click=${this._onClickConnectWallet}>
+            <span class="-ml-0.5">${bcIcon}</span>
+            Connect Wallet to Pay
+          </bci-button>
+        </div>
+      `;
+    }
+
+    let separator = null;
+    if (this.paymentMethods === 'all') {
+      separator = html` <div class="w-full py-8">${hr('or')}</div> `;
+    }
+
+    let externalMethods = null;
+    if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
+      externalMethods = html`
+        <div
+          class="flex flex-col items-center ${this.paymentMethods === 'external'
+            ? 'mt-8'
+            : ''}"
+        >
+          <p class="font-medium ${classes['text-neutral-secondary']}">
+            Scan to Pay
+          </p>
+          ${this.renderQR()}
+        </div>
+      `;
+    }
+
+    return html` ${internalMethods} ${separator} ${externalMethods} `;
+  }
+
+  private renderQR() {
+    if (!this._showQR || !this.invoice) {
+      return null;
+    }
+
+    const errorCorrectionLevel = 'L';
+    const qr = qrcode(0, errorCorrectionLevel);
+    qr.addData(this.invoice);
+    qr.make();
+
+    return html`
+      <!-- add margin only on dark mode because on dark mode the qr has a white border -->
+      <a href="lightning:${this.invoice}" class="dark:mt-2">
+        <img src=${qr.createDataURL(4)} class="rounded-lg"></img>
+      </a>
+      <a
+        @click=${this._copyInvoice}
+        class="
+        flex gap-1
+        mt-4
+        ${classes['text-brand-mixed']} ${
+      classes.interactive
+    } font-semibold text-xs"
+        >
+        ${this._hasCopiedInvoice ? copiedIcon : copyIcon}
+        ${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}
+      </a>
+    `;
+  }
+
   override render() {
     if (!this.invoice) {
       return null;
@@ -64,111 +237,36 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
       store.getState().setError((error as Error).message);
       return null;
     }
-    const errorCorrectionLevel = 'L';
-    const qr = qrcode(0, errorCorrectionLevel);
-    qr.addData(this.invoice);
-    qr.make();
 
     const isMobileView = window.innerWidth < 600;
+    if (!isMobileView) {
+      this._showQR = true;
+    }
 
-    return html` <div
-      class="flex flex-col justify-center items-center font-sans w-full"
-    >
-      <h2 class="text-2xl mb-6 ${classes['text-neutral-secondary']}">
-        <span
-          class="font-bold font-mono text-4xl align-bottom ${classes[
-            'text-brand-mixed'
-          ]}"
-          >${decodedInvoice.satoshi.toLocaleString(undefined, {
-            useGrouping: true,
-          })}</span
-        >&nbsp;sats
-      </h2>
-      ${this._connected || this.paid
-        ? this.paid
-          ? html`<div
-              class="flex flex-col justify-center items-center ${classes[
-                'text-brand-mixed'
-              ]}"
-            >
-              <p class="font-bold">Paid!</p>
-              ${successAnimation}
-            </div>`
-          : this._isPaying
-          ? html`<div class="flex flex-col justify-center items-center">
-              <p class="${classes['text-neutral-secondary']} mb-5">Paying...</p>
-              ${waitingIcon(`w-48 h-48 ${classes['text-brand-mixed']}`)}
-            </div>`
-          : html`<bci-button variant="primary" @click=${this._payInvoice}>
-                <span class="-ml-0.5">${bcIcon}</span>
-                Confirm Payment
-              </bci-button>
-              ${disconnectSection(this._connectorName)} `
-        : html`
-            <div class="flex justify-center items-center">
-              ${waitingIcon(`w-7 h-7 ${classes['text-brand-mixed']}`)}
-              <p class="${classes['text-neutral-secondary']}">
-                Waiting for payment
-              </p>
-            </div>
-
-            ${!isMobileView
-              ? html`<div class="mt-8">
-                    <bci-button variant="primary" @click=${
-                      this._onClickConnectWallet
-                    }>
-                    <span class="-ml-0.5">${bcIcon}</span>
-                    Connect Wallet to Pay
-                  </bci-button>
-                  </div>
-                  <div class="w-full py-4">${hr('or')}</div>
-
-                  <p class="font-medium ${classes['text-neutral-secondary']}">
-                    Scan to Pay
-                  </p>
-              </div>`
-              : html`
-                  <div class="mt-8 w-full flex flex-col gap-4">
-                    <a href="lightning:${this.invoice}">
-                      <bci-button variant="primary" block>
-                        ${walletIcon} Open in a Bitcoin Wallet
-                      </bci-button>
-                    </a>
-                    <bci-button block @click=${this._onClickConnectWallet}>
-                      <span class="-ml-0.5">${bcIcon}</span>Connect Wallet
-                    </bci-button>
-                    ${this._showQR
-                      ? null
-                      : html`<bci-button
-                          block
-                          @click=${this._copyAndDisplayInvoice}
-                        >
-                          ${qrIcon}Copy & Display Invoice
-                        </bci-button>`}
-                  </div>
-                `}
-            ${!isMobileView || this._showQR
-              ? html`
-                <!-- add margin only on dark mode because on dark mode the qr has a white border -->
-                <a href="lightning:${this.invoice}" class="dark:mt-2">
-                  <img src=${qr.createDataURL(4)} class="rounded-lg"></img>
-                </a>
-                <a
-                  @click=${this._copyInvoice}
-                  class="
-                  flex gap-1
-                  mt-4
-                  ${classes['text-brand-mixed']} ${
-                  classes.interactive
-                } font-semibold text-xs"
-                  >
-                  ${this._hasCopiedInvoice ? copiedIcon : copyIcon}
-                  ${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}
-                </a>
-            `
-              : null}
-          `}
-    </div>`;
+    let paymentStateElement;
+
+    if (this.paid) {
+      paymentStateElement = this.renderPaidState();
+    } else if (this._isPaying) {
+      paymentStateElement = this.renderPayingState();
+    } else if (this._connected) {
+      paymentStateElement = this.renderPaymentConfirmation();
+    } else {
+      paymentStateElement = html`
+        ${this.paymentMethods !== 'internal'
+          ? this.renderWaitingForPayment()
+          : null}
+        ${isMobileView
+          ? this.renderConnectWalletMobile()
+          : this.renderConnectWalletDesktop()}
+      `;
+    }
+
+    return html`
+      <div class="flex flex-col justify-center items-center font-sans w-full">
+        ${this.renderHeading(decodedInvoice)} ${paymentStateElement}
+      </div>
+    `;
   }
 
   private _onClickConnectWallet() {
diff --git a/src/components/routes.ts b/src/components/routes.ts
index b1525e9..b5ff9da 100644
--- a/src/components/routes.ts
+++ b/src/components/routes.ts
@@ -16,12 +16,12 @@ export const routes = {
   '/mutiny': html`<bc-mutiny class="flex w-full"></bc-mutiny>`,
   '/lnbits': html`<bc-lnbits class="flex w-full"></bc-lnbits>`,
   '/umbrel': html`<bc-umbrel class="flex w-full"></bc-umbrel>`,
-  /*(params) => {*/
+  /*(params) => {
   '/send-payment': html`<bc-send-payment
-    invoice="{params.invoice}"
+    invoice=${params.invoice}"
     class="flex w-full justify-center"
-  ></bc-send-payment>` /*;
-  }*/,
+  ></bc-send-payment>`
+  },*/
   '/new-wallet': html`<bc-new-wallet class="flex w-full"></bc-new-wallet>`,
 };
 
diff --git a/src/index.ts b/src/index.ts
index e8eb971..7080d85 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,3 +21,5 @@ export const WebLNProviders = {
   LNCWebLNProvider,
   LnbitsWebLNProvider,
 };
+
+export {PaymentMethods} from './types/PaymentMethods';
diff --git a/src/types/PaymentMethods.ts b/src/types/PaymentMethods.ts
new file mode 100644
index 0000000..8e26e4f
--- /dev/null
+++ b/src/types/PaymentMethods.ts
@@ -0,0 +1 @@
+export type PaymentMethods = 'all' | 'internal' | 'external';
diff --git a/yarn.lock b/yarn.lock
index c8fe806..2c51b99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1304,10 +1304,10 @@
   dependencies:
     "@types/chai" "^4.2.12"
 
-"@getalby/lightning-tools@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.1.tgz#08a974bcdf3d98a86ff9909df838360ee67174c8"
-  integrity sha512-xoBfBYMQrJqwryU9fAYGIW6dzWRpdsAw8rroqTROba2bHdYT0ZvGnt4tjqXUhRswopR2X+wp1QeeWHZNL9A0Kg==
+"@getalby/lightning-tools@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.0.3.tgz#4cc6ef1253a30fb4913af89b842645e0c04994bf"
+  integrity sha512-QG3/SBI5n2py5IgsjP3K+c8eq55eiI3PQB12yo9Pot0b5hcN7TNNoTKn0fgLJjO1iEVCUkF513kDOpjjXwK0hQ==
 
 "@getalby/sdk@^3.2.3":
   version "3.2.3"