From what I know, onclick uses event delegation in Svelte, while on:click is effectively the same as addEventListener. I don't know enough about the Apple Pay web components to know if they have a Shadow DOM, because that influences how events work as well. I'm not sure if/how event delegation works with custom elements either.

@Ocean-OS Apple pay does use Shadow DOM

This is a combination of several things:

1. The custom element does stop the propagation of the click event. That means the event is only available on the custom element itself and does not bubble beyond it
2. We're assuming that the delegateable events (such as click from a button) from within custom elements bubble and are composed, i.e. they bubble beyond the shadow root. It's debateable whether or not we should assume that; given that everything can happen within custom elements (as shown here) I would be in favor of never delegating events on custom elements
3. Within events.js#create_event we're checking if the event has cancelBubble set to true, in which case we don't invoke the passed handler. That is wrong, because the custom element did call stopPropagation, so it's already true, but we're a listener on the last element that still receives the event.

Temporary fix

Wrap it with other buttons

<button onclick={onApplePayButtonClicked}> <apple-pay-button buttonstyle="black" type="plain" locale="en"></apple-pay-button> </button>