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.

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