How to embed a Popup Checkout Page on a Next.js application (React)

Hi!
I hope you are great! :)
I just found this information about how to embed a Checkout Page with traditional HTML: https://forum.pabbly.com/threads/embedding-a-popup-checkout-page-within-your-website-button-a-step-by-step-guide.12097/
Can somebody in here help me understand how to do that in my Next.js application? I am using Next.js 14 (using App router).
Right now I have this code in my layout.tsx:

/* eslint-disable @next/next/inline-script-id */
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import Script from 'next/script';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
  title: '',
  description:'',
};
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      
        {children}
        

Hello @alexco888

We kindly request you to refer to the following help document and tutorial video for more information on integrating the popup checkout page on your Next.js website:
Help Document: https://forum.pabbly.com/threads/implementing-popup-checkout-pages.4633/
Tutorial Video:

youtube.com/watch?v=wCwdyMXcI3c

We hope these resources will help resolve your query. If you have any further concerns, please feel free to ask. In case you encounter challenges during the coding process, we recommend reaching out to a freelancer or seeking assistance from a technical expert with expertise in this specific matter.

The provided information did not work since I am working with Next.js and not traditional HTML (like Wordpress).
Nevertheless, I found how to implement Pabbly Embedded Popup Checkout Pages. I share my solution in case this help to somebody else in the forum :).
I am using Next.js 14 with Typescript.

In my layout.tsx in my App directory:

/* eslint-disable @next/next/inline-script-id */
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import Script from 'next/script';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
  title: '',
  description:'',
};
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      
        {children}
                  id='pabbly-script'
          src='https://payments.pabbly.com/api/checkout/popup-checkout.js'
        >
      
    
  );
}

In my component pricing.tsx (where the button is inserted):

 const [isScriptLoaded, setIsScriptLoaded] = useState(false);
  useEffect(() => {
    const checkScriptLoaded = () => {
      const script = document.getElementById('pabbly-script');
      if (script && (window as any).open_center_popup) {
        setIsScriptLoaded(true);
      } else {
        setTimeout(checkScriptLoaded, 500);
      }
    };
    checkScriptLoaded();
  }, []);
  const handleButtonClick = () => {
    if (isScriptLoaded) {
      window.open_center_popup(
        'https://payments.pabbly.com/subscribe/xxxxxxxxxxxxxxxxxxx/name-of-your-product?is_popup_preview=true'
      );
    } else {
      console.log('Pabbly script not loaded yet');
    }
  };

                   // href={tier.href}
                  onClick={handleButtonClick}
                  aria-describedby={tier.id}
                  className={classNames(
                    tier.featured
                      ? 'bg-white/10 text-white hover:bg-white/20 focus-visible:outline-white'
                      : 'bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 mt-6',
                    'block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer'
                  )}
                >

Hello @alexco888

Thank you for providing these details. This information will be immensely helpful for other users interested in using Next.js and implementing a Popup checkout page. We truly appreciate your assistance and the valuable insights you've shared.

By the way, I forgot to mention that I needed to create as well in the app directory a new file: global.d.ts with the following code (due to Typescript):

// global.d.ts
export {};
declare global {
  interface Window {
    open_center_popup: (url: string) => void;
  }
}

Hello @alexco888

Thank you for providing these details. This information will be immensely helpful for other users interested in using Next.js and implementing a Popup checkout page. We truly appreciate your assistance and the valuable insights you've shared.