Merge pull request #214 from getAlby/feat-212

Feat: add payment methods

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);

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",

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"

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';

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",

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",

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}
     />

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} : {})}
+    />
   );
 };

react/src/index.ts

@@ -17,4 +17,5 @@ export {
   onModalClosed,
   getConnectorConfig,
   WebLNProviders,
+  PaymentMethods,
 } from '@getalby/bitcoin-connect';

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"

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;

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;
   }

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>