Error messages are not displayed in the payment method (inline iframe implementation)

[drabikowy]

Hello.

In one of our projects, we use iframe mode of wallee.

It seems that along with the version 2.1.12, and this specific commit to wallee-method.js Error messages functionallity has been broken: 9bce992#diff-774e3dc221fef3c7136f27818446d72b466ad7372674c7937677765687e9d57e

When there is a validation error on wallee side, after clicking on place order button, error wallee-method pushed an error message tot the messageContainer, and it shall be shown in the selected payment method container as in the example below:

The commit I mentioned fixed issue with refreshing checkout, but due to usage of this code: checkoutHandler.updateAddresses(this._super.bind(this))

it causes reinitialisation of the component, and as a side affect is breaks the reference to the messages container component.

Pls check what is the message component path after reinitialisation:

Due to this, our customers, who fail wallee validation, do not see any related error message.

Commenting out the code from the related commit brings back error messages (but of course brings back the issue with refreshing checkout).

You might want to check if there would be any better solution than calling the whole component reinitialisation., like reinitialising only the iframe itself?

[drabikowy]

To workaround this issue for now, cleanup of messages components shall be added before each call of reinitialisation of the component, so before calling this.checkoutHandler.updateAddresses(this._super.bind(this)); in initialise method (Line 53 & 67) as well as selectPaymentMethod method (Line 153).

const childComponents = this.elems() || [];
childComponents.forEach(component => {
    if (component.displayArea === 'messages') {
        component.destroy();
    }
});