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

alexco888 · Nov 28, 2023

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/em...ur-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:

JavaScript:

/* 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 (
    <html lang='en'>
      <body className={inter.className}>
        {children}
        <Script src='https://payments.pabbly.com/api/checkout/popup-checkout.js' />
      </body>
    </html>
  );
}

Nevertheless in my Pricing.tsx component (where I want to have a button that opens the popup checkout page) I receive an error: open_center_popup is not defined when I try to follow the instructions of the provided URL.
Thank you very much for your support!

MukeshR · Nov 28, 2023

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:

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.

alexco888 · Nov 29, 2023

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:

JavaScript:

/* 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 (
    <html lang='en'>
      <body className={inter.className}>
        {children}
        <Script
          id='pabbly-script'
          src='https://payments.pabbly.com/api/checkout/popup-checkout.js'
        ></Script>
      </body>
    </html>
  );
}

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

JavaScript:

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

Then inside this same component (pricing.tsx) my button calls handleButtonClick when it is clicked:

JavaScript:

 <a
                  // 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'
                  )}
                >

I hope this might help other people with the same situation using Next.js with React.

MukeshR · Nov 29, 2023

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.

alexco888 · Dec 7, 2023

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):

JavaScript:

// global.d.ts
export {};

declare global {
  interface Window {
    open_center_popup: (url: string) => void;
  }
}

MukeshR · Dec 7, 2023

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.

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

alexco888

Member

MukeshR

Member

alexco888

Member

MukeshR

Member

alexco888

Member

MukeshR

Member

Similar threads