• Instructions to Ask a Question

    Click on the "Ask a Question" button and select the application for which you would like to ask questions.

    We have 5 different products namely - Pabbly Connect, Pabbly Subscription Billing, Pabbly Email Marketing, Pabbly Form Builder, Pabbly Email Verification.

    The turnaround time is 24 hrs (Business Hours - 10.00 AM to 6.00 PM IST, Except Saturday and Sunday). So your kind patience will be highly appreciated!

    🚀🚀Exclusive Discount Offer

    Just in case you're looking for any ongoing offers on Pabbly, you can check the one-time offers listed below. You just need to pay once and use the application forever -
     

    🔥 Pabbly Connect One Time Plan for $249 (🏆Lifetime Access) -  View offer 

    🔥 Pabbly Subscription Billing One Time Plan for $249 (🏆Lifetime Access) - View offer

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

alexco888

Member
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

Active member
Staff member
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

Member
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

Active member
Staff member
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

Member
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

Active member
Staff member
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.
 
Top