JS error: securedFields have been removed

[pmarjan-onestic]

Describe the bug A JS error is observable when switching address country for guest

To Reproduce Steps to reproduce the behavior:

1. As a customer, who has two different addresses in two different countries,
2. go to the "Shipping" step of the Hyva Default checkout and select one of the addresses
3. go to the "Payment" step of the Hyva Default checkout
4. Select cards as payment method
5. Uncheck "My billing and shipping address are the same"
6. Refresh the page
7. Switch to the other address

Expected behavior Able to use the Adyen Test Cards Chome plugin to Prefill the card input field

Actual behavior NOT Able to use the Adyen Test Cards Chome plugin to Prefill the card input field

Context JS error is observable in the console

Screenshots

---

The problem

• When switching the address country, any event emitted yields the error (both $this->emit() and $this->dispatchBrowserEvent())

[pmarjan-onestic]

• Commit b2cfda29bcdcded06d8abf5c3bbd0d5564f1cb37 reverts the customization around the "Address switching country" issues.

As there are no events fired for logged in customers by default in Hyva_Checkout, this problem is no longer observable for customers.

[pmarjan-onestic]

This issue is still observable for Guests. It can be reproduced in pretty much the same steps, with the only difference now that:

2. the Guest does not have saved addresses,
3. will be switching anyway between two countries from the billing address form

This issue is still observable for Guests simply because in default Hyva_Checkout code there is an event emitted from

Hyva\Checkout\Magewire\Checkout\AddressView\AbstractMagewireAddressForm:save()

line 205: $this->emitByAddressType('%s_address_saved');

This event emitted alone is responsible for refreshing the Methods listed and it does that accurately At the same time this event emitted is the reason for the JS error observed

---

In the case that line 205 from above is commented out, things get reversed:

• The JS error is gone
• The method list DOES NOT gets refreshed

On top of that, the automated E2E tests will fail will "Please select shipping method" once "Credit card" payment method is selected

[pmarjan-onestic]

This ticket is tightly connected to #28 and #29

[candemiralp]

Hello @pmarjan-onestic,

secureFields is a part of card component and it might make some calls to checkoutshopper endpoints of Adyen Checkout API.

The possible reason of the JS issue is reloading/remounting the component to the same DOM while there is already an active card component.

Could you please remove the component before mounting a new one if it's possible?

[pmarjan-onestic]

hi @candemiralp thank you for the support and advice shared.

I think, with the recent commit made, now in Adyen_Hyva, we are using the unmont() method for the loaded component successfully, thus resolving this ticket.