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]); }