fix(adyen): destroy Drop-in on unmount to stop iframe/listener leak - #813
Closed
acasazza wants to merge 1 commit into
Closed
fix(adyen): destroy Drop-in on unmount to stop iframe/listener leak#813acasazza wants to merge 1 commit into
acasazza wants to merge 1 commit into
Conversation
AdyenPayment mounted an Adyen Web Drop-in but never called its remove() teardown, so every payment-method switch away from and back to Adyen (AdyenGateway unmounts the component on selection change) orphaned the previous instance's Secured-Field iframes, wallet SDK injections, 3DS frames, and global message/resize listeners. The destroy call is added in a separate unmount-only effect (empty deps) rather than the existing mount effect's cleanup, because that cleanup also fires on every status change (e.g. a declined-payment retry flips standby -> placing -> standby while the component stays mounted), and tearing down the live Drop-in there would rebuild it mid-flow. Fixes #811
❌ Deploy Preview for commercelayer-react-components failed.
|
Member
Author
|
Closing: v5 has landed on main (#619), so this fix will be redone against the new codebase rather than rebased onto it. The commits stay reachable at refs/pull/813/head. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
AdyenPaymentmounted an Adyen Web Drop-in but never called itsremove()teardown on unmount, leaking Secured-Field iframes, wallet SDK injections, 3DS challenge frames, and global message/resize listeners on every payment-method switch away from and back to Adyen (AdyenGatewayunmounts the component on selection change).statuschange (e.g. a declined-payment retry flipsstandby -> placing -> standbywhile the component stays mounted), and destroying the live Drop-in there would rebuild it mid-flow.component.mount("#adyen-dropin")calls elsewhere reuse the SDK-handed-back live instance, not new ones.Fixes #811. A related but distinct latent race (unmount during an in-flight
AdyenCheckout()call) is filed separately as #812.Test plan
specs/payment_source/adyen-payment.spec.tsx: mocksDropin/AdyenCheckout, assertsremove()is called exactly once on real unmount and not called across astatus-only re-render.remove()into the shared cleanup (which fires on the status flip and rebuilds the Drop-in mid-retry).pnpm lint/tsc --noEmitclean on changed files.