From 475325d5ebd9b5d5713cd4511403758996ba5761 Mon Sep 17 00:00:00 2001 From: gbuomprisco Date: Fri, 16 Aug 2024 12:32:01 +0200 Subject: [PATCH] Add onClose callback to LemonSqueezyEmbeddedCheckout This update introduces an optional onClose callback for the LemonSqueezyEmbeddedCheckout component. The callback is triggered when the "PaymentMethodUpdate.Closed" event occurs, providing a way to execute custom logic upon closing the payment window. Additionally, proper cleanup of the script element is implemented in the useEffect hook. --- .../lemon-squeezy-embedded-checkout.tsx | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/billing/lemon-squeezy/src/components/lemon-squeezy-embedded-checkout.tsx b/packages/billing/lemon-squeezy/src/components/lemon-squeezy-embedded-checkout.tsx index 88d2e385d..52c6d833f 100644 --- a/packages/billing/lemon-squeezy/src/components/lemon-squeezy-embedded-checkout.tsx +++ b/packages/billing/lemon-squeezy/src/components/lemon-squeezy-embedded-checkout.tsx @@ -9,7 +9,6 @@ interface LemonSqueezyWindow extends Window { eventHandler: (event: { event: string }) => void; }) => void; Refresh: () => void; - Url: { Open: (url: string) => void; Close: () => void; @@ -17,13 +16,19 @@ interface LemonSqueezyWindow extends Window { }; } -export function LemonSqueezyEmbeddedCheckout(props: { checkoutToken: string }) { - useLoadScript(props.checkoutToken); +export function LemonSqueezyEmbeddedCheckout(props: { + checkoutToken: string; + onClose?: () => void; +}) { + useLoadScript(props.checkoutToken, props.onClose); return null; } -function useLoadScript(checkoutToken: string) { +function useLoadScript( + checkoutToken: string, + onClose: (() => void) | undefined, +) { useEffect(() => { const script = document.createElement('script'); @@ -34,8 +39,22 @@ function useLoadScript(checkoutToken: string) { win.createLemonSqueezy(); win.LemonSqueezy.Url.Open(checkoutToken); + + if (onClose) { + win.LemonSqueezy.Setup({ + eventHandler: (event) => { + if (event.event === 'PaymentMethodUpdate.Closed') { + onClose(); + } + }, + }); + } }; document.body.appendChild(script); - }, [checkoutToken]); + + return () => { + document.body.removeChild(script); + }; + }, [checkoutToken, onClose]); }