"bc:onpaid" event not reaching the button element

[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.

Originally posted by @Dunsin-cyber in #301 (comment)

[rolznz]

@Dunsin-cyber is it just bc:onpaid? could you review the list of events that need to be updated and also what changes we will need to make e.g. in the react package?

[Dunsin-cyber]

@Dunsin-cyber is it just bc:onpaid? could you review the list of events that need to be updated and also what changes we will need to make e.g. in the react package?

alright i'd do that.

[Dunsin-cyber]

@rolznz

so i have gone through and yes, bc:onpaid is actually the only event i saw and the primary one affected right now, and I opened #306 specifically because it's not bubbling to the <bc-pay-button> element as expected making it hard to listen per-instance when multiple buttons are on a page.

In reviewing this, i found that:

• Some components manually dispatch the event globally (window.dispatchEvent) due to missing support for passing preimage down into bc-send-payment.
• This affects both the launchPaymentModal flow and the React wrapper (useOnPaid), which have TODOs noting this workaround.

To resolve this cleanly, i propose:

1. Enabling bc-send-payment to accept a preimage and handle its own internal .dispatchEvent('bc:onpaid').
2. Refactoring all global dispatches to local ones with { bubbles: true, composed: true }.
3. Updating the React wrapper and bc-pay-button to rely on DOM bubbling instead of window.

would you like me to open a tracking issue to unify this cleanup or just focus on fixing bc:onpaid dispatch in the current PR.

[Dunsin-cyber]

hi @rolznz , any update on this?

[rolznz]

@Dunsin-cyber the original PR was already merged - a new PR to address this issue would be good. Thanks!

[Dunsin-cyber]

@Dunsin-cyber the original PR was already merged - a new PR to address this issue would be good. Thanks!

okay, i'd do that