JS function "initPaytrail" called multiple times resulting in a broken UI

[oskar-koli]

Describe the bug

The "initPaytrail" javascript method is called multiple times on page load:

1. It is called on DOMContentLoaded here
2. It is called by an inline function call here
3. If on the (legacy) checkout page, Woocommerce's checkout.js refreshes the payment options by requesting a fragment, which also contains the same inline function call mentioned above.

On the checkout page the result of this is that the "initPaytrail" function is called three times, results in three "click" event listeners being added to each .paytrail-provider-group element. So each click triggers the sequence open, close, open, which just happens to result in the state we want which is that the group is opened.

But on the /checkout/order-pay page (where the customer is taken back to if the payment failed) checkout.js never refreshes the payment options because it only does it on the checkout page. The result is that initPaytrail is called twice, which means that clicking a .paytrail-provider-group element resuts in an open, close sequence, meaning that the groups can't be opened and the user is stuck.

Steps to Reproduce

1. Go to the (legacy) checkout page.
2. Choose a payment option
3. Fail the payment, and be sent to the /checkout/order-pay page
4. Try to click on a .paytrail-provider-group element and notice that it does not open

Expected behaviour

initPaytrail should not be called multiple times, or alternatively be made idempotent (for example using a "hasBeenInited" bool)

Actual behaviour

initPaytrail is called multiple times, causing the bug described above.