Add HTML demos for Bitcoin Connect's core web components

[Dunsin-cyber]

This PR addresses issue #300 by adding standalone pure HTML demos for the core Bitcoin Connect web components. The goal is to showcase how to use each component independently without any framework, making it easier for developers to understand and integrate them in basic setups.

✅ Added:

• HTML demo for <bc-pay-button />
• Demo for programmatically using bitcoin-connect

Each demo includes:

• Proper usage of attributes like invoice, payment-methods, title, etc.

• Minimal styling and code for clarity

📂 Location:

All demos are added to the demos/html/ directory.

This structure allows easier future expansion and clearer documentation for developers using the package without build tools or frameworks.

[Dunsin-cyber]

Hi @rolznz, I've implemented the corrections you suggested. Apologies for the delay in pushing, I needed to set up a personal Lightning channel with Alby Hub to properly test everything, and also took some time to better understand how the codebase works.

I ran into an issue with the bc:onpaid event not consistently firing when payments are made externally (i.e. outside the modal). I tried listening for the event like this:

 const waitForModal = setInterval(() => {
   const modal = document.querySelector('bc-modal');
   if (modal) {
     clearInterval(waitForModal);
     modal.addEventListener('bc:onpaid', (e) => {
       console.log('Payment succeeded!', e.detail);
       setPaid({
         preimage: e.detail.preimage,
       });
     });
   }
 }, 50);

However, it seems to only capture internal payments made through the modal, not external ones.

As a workaround, I implemented a polling mechanism that checks the invoice status every second to confirm when payment has been made.

would love your thought on improving this or if there's a preferred approach.

[rolznz]

Hi @Dunsin-cyber how you do the polling looks good

[Dunsin-cyber]

Alright, thank you. I’d take this PR out of draft status and move it to review.

[Dunsin-cyber]

@rolznz , When you have a moment, could you please review this and let me know if there are any other demo I should make?

[Dunsin-cyber]

Just pushed a tidy-up @rolznz
Clarified the README and added clearer script references for the demos.

[Dunsin-cyber]

also @rolznz , I noticed that when using <bc-pay-button>, the bc:onpaid event doesn’t fire when listening directly on the button element. it only fires globally on window. This is because the event is dispatched from within launchPaymentModal (specifically from the bc-payment component), but it doesn't bubble up through the bc-pay-button itself.

To improve modularity and make it easier to listen for events in scoped components or apps using Web Components (or frameworks like React/Vue), I suggest forwarding the event from bc-pay-button like this:

const { setPaid } = launchPaymentModal({
  onPaid: (response) => {
    this._paid = true;
    this.dispatchEvent(new CustomEvent('bc:onpaid', {
      detail: response,
      bubbles: true,
      composed: true,
    }));
  },
  invoice: this.invoice,
  paymentMethods: this.paymentMethods,
});

This allows users to do:

payButton.addEventListener('bc:onpaid', (e) => {
  console.log('got paid', e.detail);
});

instead of having to rely on a global window listener, which can be problematic in apps with multiple buttons or more complex scopes.

[rolznz]

@Dunsin-cyber forwarding the events sounds good. Could you create a separate issue and PR for that?

[rolznz]

tACK

[Dunsin-cyber]

@Dunsin-cyber forwarding the events sounds good. Could you create a separate issue and PR for that?

alright.