0

enter image description here

I have a Next.js project with a dynamic route for the donate page. In a separate HTML file, I passed the URL to an iframe and attempted to pass query parameters from there. However, I am facing an issue as I am unable to receive the query parameters in my component. I am seeking assistance from anyone who can help me with this problem.

<!DOCTYPE html>
<html>
  <head>
    <title>External Donation Page</title>
    <style>
      /* Customize the iframe styles as needed */
      iframe {
        border: none;
        width: 100%;
        height: 100vh;

      }
    </style>
  </head>
  <body>
    <h1>Donate to Charity</h1>
    <iframe
      id="donationIframe"
      scrolling="no"
      
    ></iframe>

    <script>
      // Function to build the iFrame URL with parameters
      function buildIframeUrl(organization, appeal) {
        // Replace 'http://your-website.com/donate' with the actual URL to your donation page
        const baseUrl = "http://localhost:3000/school";
        const url = `${baseUrl}?organization=${organization}&appeal=${appeal}`;
        return url;
      }

      // Replace these variables with the actual values you want to pass to the iFrame
      const organizationName = "Islamic-Relief";
      const appealName = "Orphans";

      // Generate the iFrame URL with parameters
      const iFrameUrl = buildIframeUrl(
        organizationName,
        appealName,
      );

      // Set the iFrame src attribute to the generated URL
      const iFrameElement = document.getElementById("donationIframe");
      iFrameElement.src = iFrameUrl;
    </script>
  </body>
</html>

Next JS component:

  import { useRouter } from "next/navigation";
    const Donate = ({ params }) => {
     const router = useRouter();
     const { organization, appeal } = router.query;
    
      return(
       // checkout 
    
    )}
sohaib
  • 574
  • 5
  • 16
  • Is that Donate component the default export of `page.tsx`? And why are you naming your file `[[...amount]]`? Shouldn't be `[...amount]`? – Youssouf Oumar Jul 22 '23 at 16:27

0 Answers0