Wallet component class constructor event handler args throw exception when event fires

[rossparachute]

Hey @JoshTQ @RomanKondratyev,

I think this point might still need looked at, apologies if you've already got it in work.

Thought at first it might just be the React useState() func calls throwing the exception but it appears to fire with console.log calls too.

Overview
Some of the event handler args passed to the Wallet class constructor throw unhandled exceptions when their event is fired and handlers called.

Most importantly:

1. onPaymentInitiated
2. onPaymentCancelled

Also:

1. on3DsIFrameLoaded
2. on3DsIframeLoadTimeout
3. onThreeDSecureCompleted
4. onThreeDSecureRequired

I believe this is also a concern for the Dojo.Payment class constructor args too:

1. on3DsIFrameLoaded
2. on3DsIframeLoadTimeout
3. onThreeDSecureCompleted
4. onThreeDSecureRequired
5. onFormFieldValid
6. onFormComplete

Payments can be successfully made without these handlers passed but it does mean things can't be logged as expected, nor loading states in the UI toggled for every event etc.

The Wallet class is the main concern here, with the onPaymentInitiated and onPaymentCancelled handlers.

Expected Behaviour
The handlers fire correctly without error, allowing for logging and custom code to run.

Actual Behaviour
An unhandled DOMException is thrown, breaking the payment flow.

Exception

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': function() {
        console.log("Initializing wallet payment...");
    //setIsPaymentInProgress(true)
    } could not be cloned.
    at threeDsIframe.onload (https://cdn.dojo.tech/payments/v1/client.js:1:11826)
threeDsIframe.onload @ client.js:1
load (async)
value @ client.js:1
onThreeDSecureRequired @ client.js:1
value @ client.js:1
value @ client.js:1
receiveMessage @ client.js:1

Minimum Reproducible Example
Initialize your Wallet component widget per the docs and click the Google/Apple Pay wallet button to begin a payment:
https://docs.dojo.tech/payments/accept-payments/components/wallet

new Dojo.WalletPayment(
    {
        containerId: "dojo-wallet-widget",
        paymentDetails: {
            paymentToken: "clientSessionSecret",
        },
        buttonConfig: {
            color: 'black',
            type: 'plain'
        },
        onIframeLoaded: () => console.log("Wallet iFrame loaded"), // works
        onIframeLoadFailed: () => console.error("Wallet iFrame load failed"), // works
        on3DsIFrameLoaded: () => console.log("Wallet 3DS iFrame loaded..."), // error
        on3DsIframeLoadTimeout: () => console.error("Wallet 3DS iFrame load timed out..."), // error
        onThreeDSecureCompleted: () => console.log("Wallet 3DS completed..."), // error
        onThreeDSecureRequired: () => console.warn("Wallet 3DS required..."), // error
        onPaymentInitiated: () => console.log("Wallet payment initiated..."), // error <-- Key issue
        onPaymentCancelled: () => console.log("Wallet payment cancelled..."), // error <-- Key issue
    }, 
    errors => console.error(errors), 
    paymentResponse => console.log(paymentResponse)
)

[RomanKondratyev]

@rossparachute the problem should be fixed now.

[RomanKondratyev]

@rossparachute how is it going - can you confirm you issues are fixed now?